Pixel Painter

Draw on a pixel grid and save a PNG. Free, MIT · Image generation › Small editors

A small pixel editor: draw on an 8–32 cell grid with a pencil, eraser, 4-way fill and colour picker, undo whole strokes, and save a PNG with transparency at a whole-number scale without smoothing. The grid has one Tab stop: the arrow keys move a cursor and Space applies the tool, with the cell and its colour announced.

Installation

npx valyro-cli@latest add pixel-painter

npx shadcn@latest add https://valyro.xyz/r/pixel-painter.json

npm install valyro-ui

import 'valyro-ui/styles.css';
import { PixelPainter } from 'valyro-ui';

Props

Prop	Type	Default
`value`	`PixelDocument`		The picture: grid size, palette and cells (palette indexes, row by row).
`defaultValue`	`PixelDocument`		Initial picture when uncontrolled. Default: a transparent 16 × 16 grid with ten colours.
`onValueChange`	`(value: PixelDocument) => void`		Called with the new picture when a stroke, fill, undo or redo completes.
`tools`	`PixelTool[]`	`ALL_TOOLS`	Tools on the toolbar, in order. Default: pencil, eraser, fill, picker.
`activeColorIndex`	`number`		Palette index of the drawing colour.
`defaultActiveColorIndex`	`number`		Initial drawing colour when uncontrolled. Default: the first opaque palette entry.
`onActiveColorIndexChange`	`(index: number) => void`		Called with the new `activeColorIndex` when it changes.
`historyLimit`	`number`	`50`	Most undoable actions. Default 50.
`exportScale`	`number`	`1`	Whole-number size factor of the PNG, 1…64; each cell becomes `scale × scale` pixels without smoothing. Default 1.
`onExport`	`(blob: Blob) => void`		Receives the PNG. Without it, the save button downloads the file.
`fileName`	`string`	`'pixel-art.png'`	Name of the downloaded file. Default `pixel-art.png`.
`labels`	`Partial<PixelPainterLabels>`		Overrides for the built-in English text; keys left out keep their defaults.

Related components

Gradient Mixer — Drag colour points over a canvas and copy the layered CSS gradient
Prompt Editor — Prompt and negative prompt: weights, LoRA, autocomplete, token count
Generation Settings — Model, sampler, steps, CFG, size, presets
Aspect Ratio Picker — Aspect ratio and exact size
Seed Input — Seed: random, fixed, increment
LoRA Stack — LoRA stack: strengths, toggles, order, trigger words
Style Presets — Style cards with previews and weights
Reference Image Input — Reference image for img2img and ControlNet
Generation Progress — Steps, ETA, live latent preview, queue
Image Result Grid — Result gallery with actions and a lightbox
Image Compare — Before/after comparison: slider, side by side, overlay
Inpaint Canvas — Inpainting mask and canvas outpainting

Previous: Gradient Mixer · Next: Code Block · All Image generation