> WHAT IT DOES
A browser-based pixel-art editor for designing retro villain characters.
Paint on a live canvas grid, choose from ten colour palettes or build your own,
load starter templates, and export your creation as a JavaScript array
ready for pixel-chars.js.
Save up to 64 designs in the Developer portfolio, cycle through them with Play All, and swap slots by drag-and-drop. When your villain is ready, submit it directly to the Pixel Library for a chance to be featured — subject to approval.
> KEY FEATURES
- Live canvas preview — click or drag to paint, right-click to erase
- Configurable pixel size (2–40 px) with a range slider
- Five-value compact colour map (0–4) — click swatch to paint, drag number to reorder across the entire colour scheme
- Ten preset palettes (Villain, Ghost, Skull, Robot, Dev Kit, Agency, Blueprint, Neon Arcade, Pastel UI, Monochrome) plus three custom slots saved in the browser
- Grid overlay: off / green / red / yellow, adjustable opacity, flat or gradient; coordinate labels at pixel size ≥ 8
- Starter templates: Villain, Pac-Man, Blank 8×8, 12×10, 16×16, 16×24
- Paste any JS array or CSV into the Input Grid and hit Render — inline comments stripped automatically
- Export to JS array or CSV with one button
- 64-slot Developer portfolio: save, load, duplicate and drag-to-swap designs; Play All slideshow with configurable gap
- Portfolio save and load to a JSON file for backup and sharing
- Submit to Gallery — sends your villain to the Pixel Library queue for approval
> HOW IT WAS BUILT
Developed iteratively with Claude Code as an internal pixel-art tool for creating the character icons used across this site, then expanded into a full standalone editor. Built entirely with vanilla HTML, CSS and JavaScript — no frameworks, no build step, no install.
Projects on this website are free to download for charities and non-profit organisations — please get in touch via the contact page.