Pixel Art Editor

What this tool does

The pixel art editor lets you create crisp, grid-based art one pixel at a time, entirely in your browser. Choose a grid size — 8×8, 16×16, 32×32 or a custom size up to 64×64 — and paint with a small set of focused tools: paint a pixel, erase it, pick a colour from an existing pixel with the eyedropper, or flood-fill a region with the bucket. The grid is stored as a simple 2D array of colour values, which means full undo and redo, clean PNG export and a JSON save file all come naturally. It opens with a small sample sprite so you can see how everything behaves before starting your own.

When you’d use it

Pixel art is the natural style for retro-flavoured games, and this editor is built for making the small sprites those games need — characters, items, tiles, icons and UI elements. Hobbyists use it to draw avatars, emotes and little illustrations. Students and teachers use a fixed grid to explore colour, symmetry and how images are really stored as numbers. It is also a quick way to make a sharp, distinctive icon for an app, a website or a profile, since pixel art reads clearly even at small sizes. Anyone who likes the deliberate, chunky look of pixel graphics — without launching a full art program — will feel at home here.

How to use it

1. The editor opens with a sample 16×16 sprite. To start fresh, choose a grid size and press New grid (it asks you to confirm, because a new grid clears the current art).
2. Pick a colour with the colour picker, or click a swatch in the default palette. Colours you use appear under Recent for quick reuse.
3. Choose a tool — Paint, Erase, Pick (eyedropper) or Fill.
4. Press and drag on the grid to paint. Paint and erase work pixel-by-pixel as you drag; fill floods a connected area; the eyedropper copies a pixel’s colour.
5. Toggle Grid lines on or off, and use the Zoom slider to work closely on detail.
6. Use Undo and Redo (or Ctrl+Z and Ctrl+Shift+Z) to step through your changes. Clear wipes the grid after you confirm.
7. Export a PNG at true pixel size or scaled up — pick the scale that suits where the art will go — and Save JSON to keep an editable copy.

Tips for great results

Start with the big shapes and block in flat colour, then add shading and detail on top — pixel art rewards a small, deliberate palette rather than many near-identical shades. The default palette gives you a balanced sixteen colours to work from; lean on the eyedropper to reuse a colour exactly instead of guessing. Keep the grid small for a single icon or sprite: a 16×16 or 32×32 grid forces clean, readable shapes, while large grids are better suited to scenes or tilesets. Use the fill tool for backgrounds and big solid regions to save dozens of clicks. Save a JSON copy whenever the art reaches a state worth keeping, especially before you resize the grid.

To go further, the colour palette generator can help you design a tight, harmonious palette before you paint, and the image compressor will shrink a scaled-up PNG for faster sharing. If you would rather sketch freely with a brush than place individual pixels, the whiteboard is the sibling free-form drawing tool.

Your work stays on your device

Everything in this editor happens locally. The pixel grid, the colours you choose and the PNG and JSON files you export are all processed by JavaScript in your own browser — no upload, no server copy, no tracking of what you draw. Closing the tab discards the grid, so if you want to keep a piece, export a PNG or save the JSON first. That local-only design means you can experiment freely, privately, and as often as you like.