🎨

Pixel Art Studio

Browser-based pixel art editor with layers, animation frames, symmetry drawing, onion skinning, and PNG/GIF/sprite sheet export.

Design v1.0.0 12 uses
8x
Symmetry
32 x 32
0, 0

Colors ▼

Layers ▼

Opacity: 100%

Animation ▼

FPS:
Onion Skinning

✚ New Canvas

⬇ Export

📷
PNG (Current Frame)
Export the current frame as PNG
📈
PNG (Scaled)
Scale up with nearest-neighbor
🎬
Animated GIF
Export all frames as animated GIF
Scale:
🎲
Sprite Sheet
All frames in a horizontal strip

About This App

A professional, browser-based pixel art editor built entirely with HTML5 Canvas. Create stunning pixel art with a full suite of drawing tools — Pencil, Brush, Eraser, Fill Bucket, Color Picker, Line, Rectangle, Circle, and Selection. Work with unlimited layers featuring opacity, visibility, lock, and blend controls. Build animations frame-by-frame with onion skinning to see previous/next frames as transparent overlays. Enable horizontal, vertical, or quad symmetry mode for instant mirrored drawing. Choose from preset canvas sizes (16x16 up to 128x128) or set custom dimensions. Customize your color palette with 32 preset colors, a history of recently used colors, and a full color picker. Zoom from 1x to 32x with smooth scrolling. Navigate large canvases with pan controls. Full undo/redo history with up to 100 steps. Auto-save to browser storage so you never lose work. Export finished art as PNG (current frame or all frames), animated GIF with configurable frame rate, or horizontal/vertical sprite sheets. Save and load project files to continue editing later. Runs entirely in your browser — your artwork never leaves your device.

How to Use

  1. 1 Choose a canvas size from the presets (16x16, 32x32, 48x48, 64x64, 128x128) or set custom dimensions
  2. 2 Select a drawing tool from the left toolbar (Pencil, Brush, Eraser, Fill, Color Picker, Line, Rectangle, Circle, Selection)
  3. 3 Pick a color from the palette panel or use the color picker to choose a custom color
  4. 4 Draw on the canvas — zoom with mouse wheel, pan with middle-click or Space+drag
  5. 5 Add layers using the Layers panel — toggle visibility, lock, adjust opacity, and reorder by dragging
  6. 6 Enable symmetry mode (horizontal, vertical, or quad) for mirrored drawing
  7. 7 Switch to the Animation panel to add frames — use onion skinning to see ghost overlays of adjacent frames
  8. 8 Press Play to preview your animation at adjustable frame rates
  9. 9 Use Ctrl+Z / Ctrl+Y to undo and redo changes
  10. 10 Save your project as a .json file to continue editing later
  11. 11 Export as PNG (single frame), animated GIF (all frames), or sprite sheet (horizontal or vertical strip)
X Facebook LinkedIn Reddit WhatsApp Telegram Pinterest Email

More Apps in Design

🎥

Premium GIF Maker

Design

Create stunning animated GIFs from scratch with drawing tools, image imports, text overlays, effects, transitions, and multi-layer frame-by-frame editing.
📊

Flowchart Designer

Design

Browser-based flowchart and diagram editor with 10 node types, orthogonal connection routing, snap-to-grid, and PNG/SVG/JSON export.
🎨

Advanced Sticker Maker

Design

Create custom stickers with shapes, text, effects, borders, shadows, and export as PNG/SVG with transparent backgrounds.
ESC