Pixel Painter

Рисование на пиксельной сетке и экспорт PNG. Бесплатно, MIT · Изображения и генерация › Мини-редакторы

Установка

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';

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.