A pixel art editor with AI-powered generation. An experiment to test LLM-based pixel art generation using WebGPU in the browser.
WARNING: This is an experimental project and should NOT be used in production.
The OpenAI API key handling is not secure - it's stored in localStorage and used directly from the browser with
dangerouslyAllowBrowser: true. This is fine for local experimentation but absolutely not suitable for any production or public-facing deployment. If you need production API usage, implement a proper backend proxy.
- Full-featured pixel art editor with layers, tools (pencil, eraser, fill, color picker, move)
- Undo/redo history
- PNG export
- Autosave to localStorage
- AI Generation: Generate pixel art from text prompts
Two generation options are available:
- Requires an API key from OpenAI
- Best quality results
- API key is stored locally in your browser
- Runs entirely in your browser via WebGPU using Transformers.js
- Uses mistralai/Ministral-3-3B-Instruct-2512-ONNX from Hugging Face
- ~2GB download (cached after first load)
- No API key needed
I built this to experiment with running small LLMs locally via WebGPU for structured output generation. Let's be honest: the local model doesn't work great for this use case. The 3B model struggles to consistently produce valid pixel art grids in the expected format.
My prompt engineering and grid-to-pixel parsing could probably be improved, but fundamentally this might not be the best use case for a model of this size. Generating structured coordinate/color data requires precise output that small models tend to hallucinate or mess up.
Still, it was a fun experiment! The WebGPU inference via Transformers.js works surprisingly well, and the API-based generation with larger models produces decent results.
- Node.js 18+
- pnpm
pnpm installpnpm devOpen http://localhost:3000 in your browser.
pnpm buildpnpm test # Watch mode
pnpm test:run # Run once- Framework: Next.js 16 (App Router)
- UI: React 19, Tailwind CSS 4
- State: Zustand
- Canvas: HTML5 Canvas API
- AI: Transformers.js (WebGPU), OpenAI SDK
- Testing: Vitest
| Key | Action |
|---|---|
| P | Pencil tool |
| E | Eraser tool |
| F | Fill tool |
| I | Color picker |
| M | Move tool |
| X | Swap colors |
| Ctrl+Z | Undo |
| Ctrl+Shift+Z | Redo |
| +/- | Zoom in/out |
| 0 | Reset zoom |
| Space+Drag | Pan canvas |
MIT