Pixel Art Studio

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

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

• 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: Vertical tool palette with keyboard shortcuts (V, M, B, P, E, G, I, L, R, O)
• Center Canvas: Clean, focused workspace with professional canvas presentation
• Right Sidebar: Tabbed panels for Colors, Layers, Properties, and Export

• V: Select tool
• M: Move tool
• B: Brush tool
• P: Pencil tool
• E: Eraser tool
• G: Fill bucket tool
• I: Eyedropper tool
• L: Line tool
• R: Rectangle tool
• O: Circle 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.