A professional pixel art editor built with React and TailwindCSS featuring a modern interface inspired by Illustrator and Figma.

• Selection Tool: Select and manipulate areas of your artwork
• Move Tool: Move selected areas around the canvas
• Hand Tool: Pan around large canvases for easy navigation
• Zoom Tool: Zoom in and out for detailed work
• 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
• Gradient Tool: Create smooth color transitions
• Eyedropper: Sample colors directly from the canvas
• Text Tool: Add text elements to your artwork
• Line Tool: Draw perfect straight lines
• Rectangle Tool: Draw rectangles (hold Shift for filled)
• Circle Tool: Draw perfect circles (hold Shift for filled)
• Polygon Tool: Create custom polygon shapes with adjustable sides
• Star Tool: Draw star shapes with customizable points

• Illustrator-Style Toolbar: Vertical tool palette with tooltips and keyboard shortcuts
• Top Menu Bar: Professional menu system with quick actions and canvas info
• Tabbed Sidebar: Organized panels for Colors, Layers, Properties, and Export
• Canvas Settings Bar: Quick access to canvas size, brush settings, and tool options
• Modern Design: Clean, professional interface with proper spacing and typography

• Flexible Sizing: Choose from presets (8×8 to 512×512) or custom dimensions (4×4 to 1024×1024)
• Large Canvas Support: Work on high-resolution artwork up to 1024×1024 pixels
• 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 with 600px maximum display
• Enhanced Viewport: Larger canvas display area for better visibility

• 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

• Colors Panel: Primary/secondary colors with 32 preset colors and color picker
• Layers Panel: Visual layer management with opacity and visibility controls
• Properties Panel: Context-sensitive tool properties and canvas information
• Export Panel: Professional export options with scaling and format choices

• 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

The interface is designed to feel familiar to users of professional design tools:

• Top Menu Bar: File, Edit, View, Layer, Filter menus with undo/redo and grid toggle
• Canvas Settings Bar: Quick access to canvas size, brush settings, and tool properties
• Left Toolbar: Scrollable vertical tool palette with 20+ professional tools and keyboard shortcuts
• Center Canvas: Clean, focused workspace with enhanced 600px maximum display size
• Right Sidebar: Tabbed panels for Colors, Layers, Properties, and Export

• V: Select tool
• M: Move tool
• H: Hand (pan) tool
• Z: Zoom tool
• B: Brush tool
• P: Pencil tool
• E: Eraser tool
• S: Clone stamp tool
• G: Fill bucket tool
• U: Gradient tool
• I: Eyedropper tool
• W: Magic wand tool
• T: Text tool
• L: Line tool
• R: Rectangle tool
• O: Ellipse tool
• C: Circle tool
• N: Polygon tool
• A: Star tool
• F: Blur tool
• Ctrl+Z: Undo
• Ctrl+Y: Redo
• Ctrl+G: Toggle grid

1. Select Brush or Pencil tool from the left toolbar
2. Choose your color from the Colors panel
3. Adjust brush size and opacity in the canvas settings bar
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. Set Canvas Size: Use the canvas settings dropdown to choose presets or custom dimensions
2. Select Tools: Use keyboard shortcuts or click tools in the left toolbar
3. Manage Colors: Use the Colors tab in the right sidebar
4. Organize Layers: Switch to the Layers tab for complex artwork
5. Adjust Properties: Use the Properties tab for tool-specific settings
6. Export: Use the Export tab to save your work with custom scaling

• React 18.2.0 with TypeScript for type safety
• Professional UI Components with proper SVG icons and tooltips
• TailwindCSS with custom dark theme and professional styling
• 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 provides a truly professional pixel art editing experience with a modern interface that feels familiar to users of industry-standard design tools like Illustrator and Figma.