A professional pixel art editor built with React and TailwindCSS featuring multiple layout modes and a comprehensive toolset.

• Selection Tool: Select and manipulate areas of your artwork
• Move Tool: Move selected areas around the canvas
• Brush: Paint with customizable brush size and opacity
• Pencil: Draw precise single pixels with pixel-perfect accuracy
• Eraser: Remove pixels with adjustable size
• Fill Bucket: Flood fill connected areas with color
• Eyedropper: Sample colors directly from the canvas
• Line Tool: Draw perfect straight lines
• Rectangle Tool: Draw rectangles (hold Shift for filled)
• Circle Tool: Draw circles (hold Shift for filled)

• Classic Layout: Traditional sidebar-based interface
• Illustrator Style: Professional floating panels with vertical toolbar
• Compact Layout: Minimal interface optimized for smaller screens

• Flexible Sizing: Choose from presets (8×8 to 128×128) or custom dimensions (4×4 to 512×512)
• Independent Dimensions: Set width and height separately for non-square canvases
• Smart Grid: Automatically hides when pixels are too small to see clearly
• Zoom-Adaptive: Canvas scales intelligently based on size

• Primary/Secondary Colors: Left-click for primary, right-click for secondary
• Color Picker: HTML5 color picker with hex input
• 32 Preset Colors: Carefully curated color palette
• Eyedropper Sampling: Pick colors directly from your artwork
• Transparent Support: Full transparency support for layered artwork

• Layers Panel: Visual layer management (coming soon)
• Properties Panel: Context-sensitive tool properties
• Export Panel: Professional export options
• Layout Settings: Switch between interface modes

• PNG Export: High-quality raster images (1-20px per pixel)
• SVG Export: Scalable vector graphics
• Grid Export: Optional grid lines in exported images
• Custom Scaling: Adjust output resolution for any use case

• Deep Dark Theme: Professional dark interface (#0d1117 background)
• System Integration: Automatic switching based on OS preference
• Smooth Transitions: Animated theme changes
• Enhanced Contrast: Optimized for extended creative sessions

Traditional three-column layout with:

• Left sidebar: Tools, colors, and settings
• Center: Canvas workspace
• Right sidebar: Export and additional panels

Professional layout inspired by Adobe Illustrator:

• Top menu bar with quick actions
• Vertical toolbar on the left
• Centered canvas workspace
• Floating panels on the right
• Properties and layers panels

Streamlined interface for smaller screens:

• Horizontal toolbar at the top
• Canvas and controls in a grid layout
• Minimal space usage
• Mobile-friendly design

1. Select Brush or Pencil tool
2. Choose your color from the palette
3. Adjust brush size and opacity in Properties panel
4. Click and drag on canvas to draw

• Line: Click and drag to draw straight lines
• Rectangle: Click and drag to draw rectangles (Shift for filled)
• Circle: Click and drag from center outward (Shift for filled)

• Select: Click and drag to select rectangular areas
• Move: Drag selected areas to new positions
• Eyedropper: Click any pixel to sample its color

• Fill Bucket: Click to fill connected areas with the same color
• Undo/Redo: Full history support for all operations
• Grid Toggle: Show/hide pixel grid for precision work
• Custom Canvas: Set any dimensions up to 512×512 pixels

1. Choose Layout: Select your preferred interface mode
2. Set Canvas Size: Use presets or custom dimensions
3. Select Tools: Use the vertical or grid toolbar
4. Manage Colors: Primary/secondary color system
5. Use Properties: Adjust tool settings in real-time
6. Export: Save as PNG or SVG with custom scaling

• React 18.2.0 with TypeScript for type safety
• Professional UI Components with proper SVG icons
• TailwindCSS with custom dark theme
• HTML5 Canvas for high-performance drawing
• Advanced Algorithms: Bresenham's line drawing, flood fill
• Responsive Design: Works on all screen sizes
• Memory Efficient: Optimized pixel storage and history

• Modern browsers with HTML5 Canvas support
• Automatic fallbacks for older browsers
• Touch support for mobile devices
• Keyboard shortcuts for power users

• Game Development: Sprites, tiles, and game assets
• Icon Design: Clean, pixel-perfect icons
• Digital Art: Retro-style artwork and animations
• Prototyping: Quick mockups and concepts
• Education: Learning pixel art fundamentals

The application now provides a truly professional pixel art editing experience with multiple interface modes, comprehensive tools, and a polished user experience that rivals commercial software.