Pixel Art Editor

How do I make pixel art in the browser?

Use the Pixel Art Editor. Pick a square canvas size (8×8 up to 64×64), choose a colour, and draw on the snap-to-grid canvas with the pencil, eraser, flood-fill, line, box or eyedropper tools. Turn on X/Y mirror for symmetric sprites, zoom in for precision, and undo/redo any stroke (Ctrl/⌘+Z). When you are done, export a crisp nearest-neighbour PNG at an integer scale (up to 32×), or copy the raw sprite data as JSON to re-open later. Everything is drawn and exported in your browser — nothing is uploaded.

Square canvas from 8×8 to 64×64; pencil, eraser, flood-fill, line, box and eyedropper tools
X/Y mirror symmetry, adjustable zoom, show/hide grid lines, and snapshot undo/redo (up to 60 steps)
Export a razor-sharp PNG at an integer scale (up to 32×) with a transparent or white background
Copy the sprite as compact JSON to save it; 100% client-side, nothing uploaded

What is

A pixel art editor is a drawing tool that works on a fixed grid of square cells (a sprite), where you place one solid colour per cell rather than painting smooth, anti-aliased strokes. Each pixel is deliberate: lines and shapes are rasterised with integer algorithms (Bresenham for lines and box outlines, a 4-neighbour flood fill for regions) so edges stay hard-edged, and the artwork is enlarged with nearest-neighbour scaling at whole-number multiples so it never blurs. This browser tool is a focused single-frame sprite editor — canvas 8×8 to 64×64, mirror mode, zoom, snapshot undo/redo and crisp PNG export — running entirely on your device.

Design

Related terms

spritenearest-neighbour scalingBresenham line algorithmflood fillanti-aliasingditheringpaletteHEX colourcanvas imageSmoothingEnabledimage-rendering: pixelated

Frequently Asked Questions

Everything happens on your device. The sprite is a flat array of colour values in React state, each tool (pencil, eraser, flood fill, line, box, eyedropper) mutates a pure copy of that grid in the page, and the PNG export draws to an offscreen <canvas> and hands you a temporary blob URL to download. There is no backend, no API call and no CDN in the drawing or export path — the only optional network use anywhere on the page is consent-gated ads. The tool works offline once cached, and because nothing is auto-saved, closing the tab discards your artwork — use Download PNG or Copy data first to keep it.

No. The Pixel Art Editor is 100% client-side. Your sprite is just a grid of colour values held in the page, every stroke is computed locally, and the PNG is rendered on an in-memory canvas. Nothing is uploaded, logged or stored on a server.

Pixel art is defined by hard, single-colour pixel edges, so it can only be enlarged cleanly by an exact whole number. The exporter draws each logical pixel as an integer block of output pixels with image smoothing turned off — true nearest-neighbour — so a 32×32 sprite at 16× becomes a razor-sharp 512×512 PNG. A fractional scale (say 3.5×) would map one logical pixel onto 3.5 output pixels, forcing the browser to average across a half-pixel seam and smear the edge. That is why only integer multiples are offered, and why the on-screen zoom also snaps to whole pixels. The chosen scale is clamped to the editor’s 1×–32× range before export so the result is always in the crisp band.

Because pixel art must be enlarged with nearest-neighbour scaling at integer multiples to stay sharp. A fractional scale like 3.5× would land logical pixels on half-pixel boundaries and blur the edges, so the tool only offers whole-number multiples (up to 32×).

The tool deliberately stays a lightweight, single-frame sprite editor so it is fast and simple. It intentionally has no layer stack, no timeline of animation frames, no onion-skinning, and no way to load an existing photo to trace over — you draw from scratch on one grid. It also caps the canvas at 64×64, because larger sizes make flood-fill and hand-placing pixels impractical and classic 8/16-bit sprites rarely exceed that. If you need layers, animation and importing, a dedicated desktop app such as Aseprite is the right tool; this editor covers quick sprites, icons and tiles.

No. This is a focused single-frame sprite editor, not a full studio like Aseprite. It has no layers, no animation frames or onion-skinning, and no image import or tracing — you draw each sprite from scratch on one grid.

When you finish a stroke, the tool saves the whole grid as a new immutable snapshot, so undo and redo simply step backward and forward through a history stack (Ctrl/⌘+Z to undo, Shift+Z or Ctrl+Y to redo, up to 60 steps). Mirror mode mirrors every painted cell across the X axis, the Y axis, or both at once, which is ideal for symmetric characters and icons. The fill tool runs a 4-neighbour breadth-first flood fill: it recolours the pixel you click and every orthogonally-connected pixel of the same original colour, stopping at any different colour or the canvas edge — the same behaviour as the paint-bucket in classic pixel editors.

Every completed stroke is one immutable snapshot of the grid, so undo/redo is a plain history stack (Ctrl/⌘+Z, Shift+Z, up to 60 steps). Mirror mode reflects each stroke across the X and/or Y axis. Fill is a 4-neighbour flood fill that recolours the connected same-colour region you click.

Pixel Art Editor

Draw sprites on a snap-to-grid canvas entirely in your browser. Choose a square size from 8×8 to 64×64 and use pencil, eraser, flood-fill, line, box and eyedropper tools, with optional X/Y mirror symmetry, adjustable zoom, toggleable grid lines and snapshot undo/redo. Export a crisp nearest-neighbour PNG at an integer scale (up to 32×) on a transparent or white background, or copy the sprite as compact JSON to re-open. 100% client-side — nothing is uploaded.

Features

Square canvas 8×8 to 64×64 with pencil, eraser, 4-neighbour flood-fill, Bresenham line and box, and eyedropper
X/Y mirror symmetry, adjustable pixel zoom, and toggleable grid lines
Snapshot undo/redo up to 60 steps (Ctrl/⌘+Z, Shift+Z) plus one-key tool shortcuts
Crisp nearest-neighbour PNG export at an integer scale up to 32×, transparent or white background
Copy the sprite as compact JSON to save and re-open; preset palette plus in-sprite colour picker

PriceFree

CategoryDesign

PlatformAll (any modern browser)

PrivacyThe sprite is a colour grid in the page and the PNG is rendered on an in-memory canvas; nothing is uploaded and no CDN is used for drawing or export

Input: Mouse / touch / stylus drawing, HEX colour, Sprite JSON (via Copy data)

Output: PNG (integer nearest-neighbour scale, transparent or white), Sprite JSON

Detailed Explanation

How It Works

How the Pixel Art Editor Works

The Pixel Art Editor is a 100% client-side sprite editor built on a single HTML <canvas>. The sprite is a pure, flat array of colour values — one cell per pixel on a square grid from 8×8 up to 64×64 — with an empty string meaning transparent. Every tool (pencil, eraser, flood-fill, line, box, eyedropper) is a pure function that returns a brand-new grid rather than mutating the old one, and the on-screen canvas re-renders that grid with imageSmoothingEnabled set to false so each logical pixel is a crisp solid block. The pointer position is mapped back to a cell with a simple floor(coord / zoom). Nothing is uploaded: the grid lives in the page, every stroke is computed locally, and export is done entirely in the browser.

Sprite is a flat colour-per-cell array on a square 8×8–64×64 grid
Empty string = transparent; every tool returns a new immutable grid
Canvas renders with imageSmoothingEnabled = false for crisp pixels
Pointer → cell via floor(coord / zoom)
100% client-side — the sprite never leaves the browser

Methodology

Drawing Tools and Integer Rasterisation

The editor uses classic integer rasterisation so edges stay hard, never anti-aliased. Pencil and eraser paint single cells and, during a fast drag, interpolate along a Bresenham line between successive pointer samples so quick strokes leave no gaps. The line and box tools also use Bresenham (a straight 1px line and a rectangle outline) previewed live against the grid as you drag from the start cell. Flood-fill is a 4-neighbour breadth-first search that recolours the clicked pixel and every orthogonally-connected cell of the same original colour, stopping at any different colour or the canvas edge. The eyedropper samples the colour under a cell into the active swatch. An optional mirror mode reflects each painted cell across the X axis, the Y axis, or both, for symmetric sprites.

Pencil/eraser interpolate along a Bresenham line on fast drags — no gaps
Line and box tools use Bresenham for hard 1px edges
Flood-fill is a 4-neighbour BFS bounded by colour and canvas edge
Eyedropper samples any cell into the active colour
Mirror mode reflects strokes across X and/or Y

Technical Details

Snapshot Undo/Redo and Canvas Sizing

Because every completed stroke produces a new immutable grid, history is a plain snapshot stack: finishing a stroke pushes the previous grid onto the undo stack and clears the redo stack, Undo and Redo step through those stacks, and the depth is capped (60 entries) so memory stays bounded. Keyboard shortcuts map to Ctrl/Cmd+Z (undo), Shift+Z or Ctrl+Y (redo), and single keys for each tool. Changing the canvas size starts a fresh sprite and auto-fits a sensible zoom. The visible zoom is snapped to whole on-screen pixels per logical pixel, and grid lines are drawn only when the zoom is large enough to be useful. Clearing the board is itself an undoable snapshot.

History is a bounded snapshot stack (60 entries) of whole grids
Undo = Ctrl/Cmd+Z; Redo = Shift+Z or Ctrl+Y; single keys pick tools
Changing size starts a new sprite and auto-fits the zoom
Zoom snaps to whole pixels; grid lines show only when large enough
Clear is recorded as an undoable snapshot

Use Cases

Crisp Nearest-Neighbour PNG Export

Export renders the sprite to an offscreen <canvas> at an INTEGER scale with image smoothing disabled, so each logical pixel becomes a solid block of output pixels — true nearest-neighbour — and a 32×32 sprite at 16× becomes a razor-sharp 512×512 PNG. The chosen scale is clamped to the engine’s 1×–32× bounds before rendering so the output always stays in the crisp band. Only whole-number scales are offered on purpose: a fractional scale would land logical pixels on half-pixel boundaries and blur the art. The background is either left transparent or filled solid white. The PNG is produced with the canvas toBlob API and downloaded through an in-memory object URL that is revoked immediately after the click; the raw sprite can also be copied as compact JSON to re-open later.

Each logical pixel is drawn as an integer block, smoothing off
Scale clamped to the engine’s 1×–32× integer bounds
Fractional scales are refused because they would blur the art
Transparent or solid-white background; PNG via canvas toBlob
Sprite can also be copied as compact JSON for re-opening

Limitations

Honest Limitations of a Single-Frame Editor

This is a focused single-frame sprite editor, not a full studio like Aseprite. It deliberately has NO layers, NO animation frames or onion-skinning, and NO way to import an existing image to trace over — you draw from scratch on one grid. The canvas is capped at 64×64 because larger sizes make flood-fill and hand-placing pixels impractical, and classic 8/16-bit sprites rarely exceed that. Export is nearest-neighbour at an integer scale only; fractional scales are not offered because they blur pixel art. Nothing is auto-saved: the sprite lives only in the current tab, so it must be exported or copied as JSON before the tab closes, and there is deliberately no cloud sync or account system.

No layers, no animation frames or onion-skin, no image import/tracing
Canvas capped at 64×64 to keep fill and hand-drawing practical
Export is integer nearest-neighbour only — no blurry fractional scales
Nothing is auto-saved; the sprite lives only in the current tab
No cloud sync and no accounts by design

Privacy & Security

Private by Design

Everything happens on the user’s device. The sprite is a plain array of colour values in the page, every tool computes a new grid locally, and the PNG is rendered on an in-memory canvas and handed to the browser through a temporary object URL that is revoked after the download. There is no upload endpoint, no server-side processing and no CDN in the drawing or export path; the only optional network use on the page is consent-gated ads. The tool works offline once cached, keeps no accounts and sets no tracking, and the sprite and its undo history are discarded the moment the tab closes.

Sprite is a colour array in the page — never uploaded
Every stroke is computed locally; PNG rendered on an in-memory canvas
Download uses a temporary object URL, revoked after the click
Works offline once cached; no accounts, no tracking
Sprite and undo history discarded when the tab closes

Grid-based pixel editor vs. vector editor vs. general raster paint app
Approach	Best for	Scaling behaviour
Grid pixel editor (this tool)	Sprites, icons and tiles with deliberate per-pixel control	Integer nearest-neighbour — stays razor-sharp
Vector (SVG) editor	Logos and diagrams reshaped and restyled freely	Resolution-independent, but not pixel art
General raster paint app	Photos and painterly, anti-aliased artwork	Smooth interpolation — blurs when pixel art is enlarged
Full sprite studio (e.g. Aseprite)	Layered, animated multi-frame sprite work	Integer nearest-neighbour, plus layers and timelines

A grid pixel editor trades layers and animation for fast, pixel-perfect single-frame control. As of July 2026.

Cite This Page

Title: Pixel Art Editor (a real, 100% client-side <canvas> sprite editor — a snap-to-grid pixel brush on a square 8×8 to 64×64 grid with pencil, eraser, 4-neighbour flood-fill, Bresenham line and box, and an eyedropper, plus optional X/Y mirror symmetry, adjustable zoom, toggleable grid lines and snapshot undo/redo — exporting a crisp nearest-neighbour PNG at an integer 1×–32× scale on a transparent or white background, or copying the sprite as compact JSON; nothing is uploaded, the artwork never leaves your device)
Author: AnyTool
Published: January 1, 2026
Modified: February 8, 2026
Section: Design
URL: https://www.anytool.tech/pixel-art-editor

Formatted Citation

AnyTool. "Pixel Art Editor (a real, 100% client-side <canvas> sprite editor — a snap-to-grid pixel brush on a square 8×8 to 64×64 grid with pencil, eraser, 4-neighbour flood-fill, Bresenham line and box, and an eyedropper, plus optional X/Y mirror symmetry, adjustable zoom, toggleable grid lines and snapshot undo/redo — exporting a crisp nearest-neighbour PNG at an integer 1×–32× scale on a transparent or white background, or copying the sprite as compact JSON; nothing is uploaded, the artwork never leaves your device)." AnyTool, January 1, 2026. https://www.anytool.tech/pixel-art-editor

A 100% client-side Pixel Art Editor built on a single HTML <canvas> element, where all drawing, history and export happen in the browser with no server call, no CDN in the drawing path and no user data ever uploaded. A pure, React-free engine (pixelArtEngine.ts) holds the deterministic grid maths and the small canvas primitives, while the page owns the DOM, pointer orchestration and rendering. The sprite is a flat, immutable array of colour values — one cell per pixel on a square grid selectable at 8×8, 16×16, 24×24, 32×32, 48×48 or 64×64, with an empty string denoting a transparent cell. Every tool is a pure function returning a brand-new grid: the pencil and eraser paint single cells and, on a fast drag, interpolate along a Bresenham line between successive pointer samples so quick strokes leave no gaps; the line and box tools also use Bresenham (a straight 1px line and a rectangle outline) previewed live against the base grid as the user drags from the start cell; the flood-fill runs a 4-neighbour breadth-first search that recolours the clicked pixel and every orthogonally-connected cell of the same original colour, stopping at any different colour or the canvas edge; and the eyedropper samples the colour under a cell into the active swatch. An optional mirror mode reflects each painted cell across the X axis, the Y axis, or both, for symmetric characters and icons. The on-screen canvas is rendered with imageSmoothingEnabled set to false — true nearest-neighbour — with a transparency checker behind the painted cells and optional grid lines that appear only when the whole-pixel zoom is large enough to be useful; the pointer position is mapped back to a cell with floor(coord / zoom). History is a bounded snapshot stack (up to 60 entries) of whole grids: finishing a stroke pushes the previous grid onto the undo stack and clears the redo stack, while Undo (Ctrl/Cmd+Z), Redo (Shift+Z or Ctrl+Y) and an undoable Clear step through those snapshots; single-key shortcuts select each tool. Changing the canvas size starts a fresh sprite and auto-fits a sensible zoom. Export renders the sprite to an offscreen canvas at an INTEGER scale with smoothing disabled so each logical pixel becomes a solid block — a 32×32 sprite at 16× becomes a razor-sharp 512×512 PNG — with the chosen scale clamped to the engine’s 1×–32× bounds before rendering, on either a transparent or solid-white background, encoded with the canvas toBlob API and downloaded through an in-memory object URL that is revoked immediately after the click; the raw sprite can also be copied as compact JSON for re-opening. The React page exposes a canvas size picker, a tool grid, mirror toggles, a colour input with a preset palette and an in-sprite used-colour list, a zoom slider and grid-lines toggle, an export scale and background chooser, and Undo/Redo/Clear/Download/Copy actions, plus a sticky mobile action bar. It is prominently HONEST about the real caveats of a focused sprite editor: it has NO layers, NO animation frames or onion-skinning and NO image import or tracing, so the user draws from scratch on one grid; the canvas is capped at 64×64 because larger sizes make flood-fill and hand-placing pixels impractical and classic 8/16-bit sprites rarely need more; PNG export is nearest-neighbour at a whole-number scale only, because a fractional scale would land logical pixels on half-pixel boundaries and blur the art, and the on-screen zoom snaps to whole pixels for the same reason; nothing is auto-saved, so the sprite lives only in the current tab and is discarded when it closes, and there is deliberately no cloud sync or account system. The page supports dark mode and a mobile-first responsive layout, and has exactly three horizontal ad slots.