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 16 essential tools, tooltips, and keyboard shortcuts
• Top Menu Bar: Professional menu system with quick actions and canvas info
• Responsive Design: Optimized for desktop, tablet, and mobile devices
• Touch Support: Full touch support for mobile and tablet drawing
• Canvas Settings Bar: Quick access to canvas size, brush settings, and tool options
• Adaptive Sidebar: Hidden on mobile, collapsible on tablet for optimal screen usage
• 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 16 professional tools and keyboard shortcuts
• Center Canvas: Clean, focused workspace with responsive sizing (300px mobile, 600px desktop)
• Right Sidebar: Tabbed panels for Colors, Layers, Properties, and Export (hidden on mobile)

• V: Select tool
• M: Move tool
• H: Hand (pan) tool
• Z: Zoom tool
• B: Brush tool
• P: Pencil tool
• E: Eraser tool
• G: Fill bucket tool
• U: Gradient tool
• I: Eyedropper tool
• T: Text tool
• L: Line tool
• R: Rectangle tool
• O: Circle tool
• N: Polygon tool
• A: Star 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

• Touch-Optimized Interface: Full touch support for drawing on mobile and tablet devices
• Responsive Canvas: Automatically adjusts size based on screen (300px on mobile, 600px on desktop)
• Mobile-First Toolbar: Compact tool palette with touch-friendly buttons
• Adaptive Layout: Sidebar hidden on mobile for maximum canvas space
• Touch Drawing: Native touch events for smooth drawing experience
• Gesture Support: Pinch-to-zoom and pan gestures (where supported)
• Cross-Platform: Works seamlessly on iOS, Android, and desktop browsers

• 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.