How to use the Pixel Art Editor
- Pick a canvas size (16×16 and 32×32 are good starting points) or open a PNG, GIF or .piskel file.
- Choose a palette such as PICO-8 or Endesga 32 and draw with the pencil (B). Right-click paints with the secondary color, which is transparent by default.
- Add layers for line art, color and shading. Add frames for animation and switch on onion skin (K) to see the previous and next frame.
- Press Enter to play the animation, adjust the FPS, and check the small preview at 1×, 2× or tiled.
- Open Export and download a PNG, a sprite sheet with JSON, an animated GIF, an SVG, a ZIP of frames or a .piskel file.
What you get
- PNG of the current frame at 1× to 16×
- Sprite sheet PNG with a JSON frame list (any column count)
- Animated GIF using the document FPS, transparency kept
- ZIP of numbered frame PNGs
- SVG with one path per color
- .piskel file you can reopen here or in Piskel
Tips from making games with it
- Leave pixel-perfect on (P) when drawing 1px outlines. It removes the doubled corner pixels that freehand strokes leave behind.
- Shift-click with the pencil draws a straight line from your last point. Hold Shift while dragging a line to snap it to 45° steps, or a rectangle/ellipse to a square/circle.
- The shade tool (U) steps a pixel to the next lighter or darker color in your palette, so you can shade without leaving the palette. Right-click darkens.
- Select an area (S, or W for one color) before drawing to keep strokes inside it, or before moving to shift just those pixels.
- Turn on mirror X for characters and front-facing sprites, then break the symmetry by hand at the end so the sprite doesn't look stamped.
- Use a hidden 'sketch' layer at low opacity under your line art, then delete it before exporting.
- Your work autosaves in this browser. It is not synced anywhere, so export a .piskel file if you want a backup.
- Paste an image with Ctrl+V to drop it in as a new layer, which is handy for tracing references.
Use cases
- Drawing characters, items and tiles for a game jam without installing anything
- Cleaning up AI-generated sprites pixel by pixel before importing them into an engine
- Animating idle, walk and attack cycles and exporting a sheet for Godot, Unity or GameMaker
- Making small animated GIFs and emotes
- Editing Piskel projects on a machine where Piskel isn't installed
FAQ
Is this pixel art editor free?
Yes. All drawing, animation, import and export features are free and there is no watermark. The editor runs entirely in your browser.
Where is my drawing saved?
In your browser's local storage, on this device only. It survives a page reload but not clearing site data or switching browsers. Export a .piskel or PNG to keep a copy.
Can I open Piskel files?
Yes. Open a .piskel file and its layers, frames and FPS come in. You can also export back to .piskel.
What's the maximum canvas size?
512×512 pixels. Pixel art is usually 16 to 128 pixels per side, and keeping the limit there keeps drawing smooth on phones and older laptops.
How do I make a sprite sheet for my game engine?
Draw each animation frame in the timeline, then choose Export → Sprite sheet. Set the number of columns and scale. You get a PNG plus a JSON file with every frame's position and duration.
Does it work on a phone or tablet?
Yes. Draw with one finger, and pinch or use two fingers to zoom and pan. A mouse and keyboard are still faster for detailed work because of the shortcuts.
Can I import a GIF or a sprite sheet?
Yes. A GIF opens with one frame per GIF frame. When you open a PNG that looks like a sheet, the editor offers to split it into frames using the grid it detects.