~/pixel-editor ☀ LIGHT 8-bit studio favicon image to ascii ☕ Support me apps ← about me
100%
Colour
Palette
Click: primary · right-click: secondary · Alt+click: remove
Layers
opacity 100%
Preview
fps 8
xy —size 32×32layer 1/1frame 1/1colour —Scroll or pinch to zoom · Space, middle mouse or two fingers to pan · right-click = secondary colour · ? = shortcuts

New canvas

× up to 256 × 256
Your current drawing is replaced. Save a project file first if you want to keep it.

Resize canvas

×
Scaling keeps pixels sharp (nearest neighbour).

Export

columns 0 = all frames in one row
speed and ping-pong come from the preview panel

Keyboard shortcuts

BPencil (Alt+click picks colour)EEraserGFill / replace colourIColour picker LLineURectangle (Shift+U: ellipse)MSelectVMove DDitherHShade (right-click darkens)XSwap colours[ ]Brush size ShiftStraight / square / circle while drawing shapes Ctrl+Z / YUndo / redoCtrl+C X VCopy, cut, paste (also images from the clipboard)Ctrl+ASelect all DeleteClear selectionEnter / EscApply / drop selectionArrowsNudge selection 1 px , .Previous / next frameNNew frame (Shift+N duplicates)Shift+LNew layer ' T O PGrid, tile preview, onion skin, pixel-perfect+ − 0Zoom in, out, fit Space / middle dragPanCtrl+S / Ctrl+ESave project / export

Guide — draw, animate and export pixel art

Layers, frames, palettes and real pixel-art tools. PNG, GIF and spritesheet export. Autosaved in your browser.
1Pick a canvas

Menu → New: 8, 16, 32, 64, 128 or 256 pixels, or any custom size. Resize later with an anchor, or import an image as a new layer.

2Choose a palette

PICO-8, Sweetie 16, Endesga 32, Game Boy, Grayscale or your own. Left click sets the primary colour, right click the secondary.

3Draw

Pencil with pixel-perfect lines, shapes with Shift to constrain, fill, dither and shade. Symmetry in four directions.

4Layers & frames

Put the outline, colours and shadows on separate layers. Add frames, turn on onion skin and watch the live preview.

5Export

PNG at any scale, a spritesheet with columns, an animated GIF that keeps your blacks black, or a project file to continue later.

Good to know

KEYSShortcuts
B E G I
pencil, eraser, fill, picker
L U · Shift+U
line, rectangle, ellipse
M V
select, move
D H
dither, shade
?
all shortcuts
TOUCHPhone & tablet
one finger
draw
two fingers
pinch to zoom, drag to pan
🎨 button
colours, layers and preview
SAVEYour work
autosave
layers, frames and colours, in this browser
undo
120 steps
project file
Ctrl+S, open it on any device

Pixel art in the browser, explained

Pixel art is drawn one square at a time on a small grid, then scaled up without smoothing so every pixel stays sharp. This editor gives you the tools that dedicated pixel-art apps have: layers, a timeline with onion skin, pixel-perfect strokes, dithering, palettes and clean exports. It runs entirely in your browser. Nothing is uploaded.

What drawing tools are available?

Pencil with brush sizes 1, 2, 3, 4, 6 and 8 (round from 4). Eraser. Fill, contiguous or replace-everywhere, on this frame or all frames (Shift+click fills globally). Picker, or Alt+click with the pencil. Line, Shift snaps to 45°. Rectangle and ellipse, outline or filled, Shift for a square or circle. Select and move. Dither paints a checkerboard of two colours. Shade lightens or darkens what is already there.

What does pixel-perfect mean?

When you draw a curve with a 1px pencil, a mouse often leaves doubled pixels in the corners: small L-shapes that make lines look thick and messy. With Pixel-perfect on (P), the editor removes those corner pixels while you draw, so curves stay one pixel wide. Fast strokes are also interpolated, so there are no gaps.

How do layers work?

Every frame has the same set of layers. Add, duplicate, reorder, hide, rename (double-click) and delete them, set an opacity, or merge a layer down. A good habit: sketch on one layer, line art on the next, colours underneath. The move tool moves the whole layer when nothing is selected.

How do selection, copy and paste work?

Drag with Select (M) to mark an area. You can then copy, cut, paste, delete, flip, rotate or crop to it. A pasted or moved selection floats above the canvas until you press Enter or click Apply, so you can drag it into place first. Arrow keys nudge it one pixel. You can also paste an image straight from your clipboard.

Which palettes are included?

The Jasper terminal palette, PICO-8, Sweetie 16, Endesga 32, Game Boy (4 greens) and Grayscale 8. Make a custom palette by adding colours, take one from your artwork, or import a .hex, .gpl (GIMP/Aseprite) or text file. Menu → Reduce layer to palette maps every pixel to its nearest palette colour.

What canvas sizes can I use?

Presets from 8×8 up to 256×256, or any custom width and height. 16×16 is the classic NES and favicon size, 32×32 suits detailed sprites, 64×64 and larger work for tiles and scenes. Resize at any time with an anchor (top-left, centre, …), or scale the whole artwork 2× or ½.

Can I create animations?

Yes. Add, duplicate, reorder and delete frames in the timeline. Onion skin shows the previous frame and, more faintly, the next one. The preview in the side panel plays at 1–30 fps, looping or ping-pong, while you keep drawing.

How do I export PNG, GIF or a spritesheet?

Press Export (Ctrl+E). PNG: the current frame or every frame, at any scale from 1× to 64×. Spritesheet: all frames in one PNG, in one row or a number of columns you choose. Animated GIF: with transparency or a background colour, looping or once. Each frame is cleared before the next one, so animations don't smear, and black stays black. Project file: a JSON file with all layers and frames that you can open again later.

What are symmetry and tile mode?

Symmetry mirrors every stroke horizontally, vertically, in both directions, or diagonally. Tile mode (T) repeats your canvas around itself, so you can see straight away whether a pattern or game tile is seamless.

Can I import an existing image?

Yes. Menu → Import image places a PNG, JPG or GIF on a new layer, fitted and centred. Combine it with Reduce to palette to turn a photo into pixel art, or lower the layer opacity and trace over it.

Will I lose my work if I close the tab?

No. Layers, frames and colours are saved in your browser's local storage after every change, and come back when you reopen the page. For very large projects, or to move to another device, save a project file with Ctrl+S.

Does it work on a phone or tablet?

Yes. Draw with one finger or a stylus. Two fingers pinch to zoom and drag to pan; a second finger cancels the stroke you started. The tools sit in a bar at the bottom and the 🎨 button opens colours, layers and the preview as a sheet. On a laptop, pinch the trackpad to zoom and scroll with two fingers to pan.

Which keyboard shortcuts are there?

B pencil · E eraser · G fill · I picker · L line · U rectangle · Shift+U ellipse · M select · V move · D dither · H shade · X swap colours · [ and ] brush size · Ctrl+Z / Ctrl+Y undo and redo · Ctrl+C / X / V copy, cut, paste · Ctrl+A select all · Delete clears the selection · Enter applies · , and . previous and next frame · N new frame · ' grid · T tile · O onion skin · P pixel-perfect · + − 0 zoom and fit · Space+drag pan · ? all shortcuts.

Is it free and private?

Yes. No account, no download, no watermark. Everything happens in your browser and your drawings never leave your device.

More free tools