A really simple, browser-based pixel art editor
- Pencil : draw pixels one by one or drag to paint freely
- Eraser : remove pixels by clicking or dragging
Choose between 8×8, 16×16, 32×32 (default), 48×48, and 64×64 grids depending on how detailed you want your artwork.
- Native color picker input for full color selection
- Hex input field : type any hex code directly (e.g.
#ff6600) - Current color preview box always visible
- Quick color palette with 5 preset colors (black, white, red, green, blue)
- Undo : go back up to 80 steps
- Redo : restore undone actions
- History is reset when the grid size changes
- Checkerboard background to visualize transparent pixels
- Canvas scales automatically with the selected grid size
| Key | Action |
|---|---|
P |
Switch to Pencil |
E |
Switch to Eraser |
Ctrl + Z |
Undo |
Ctrl + Y / Ctrl + Shift + Z |
Redo |
Shortcuts are disabled when typing inside an input field.
- Open
index.htmlin any modern browser or visit https://lua.gabintavernier.com - Select a grid size from the dropdown
- Pick a color using the color picker or type a hex code
- Choose a tool (Pencil or Eraser)
- Click or drag on the canvas to draw
- Use Undo / Redo to fix mistakes
- Click 🗑 Clear to reset the canvas (asks for confirmation)
| Layer | Technology |
|---|---|
| Markup | HTML5 |
| Styling | CSS3 (vanilla, no framework) |
| Logic | JavaScript (vanilla ES5/ES6) |
| Rendering | HTML5 Canvas API |
and all that in 1 html file lmfao
lua/
└── index.html # entire app : markup, styles, and logic in one file
- Export as PNG
- Fill bucket tool
- Color history / recently used colors display
- Save / load from localStorage
- Zoom in / out
- Symmetry mode
MIT : do whatever you want with it lol.