The Problem
Game developers and indie creators constantly switch between their code editor and external image tools. Need to tweak a sprite? Open Aseprite. Adjust an icon? Launch Photoshop. Every context switch breaks flow and adds friction to the development process.
For pixel art specifically—the medium of choice for countless indie games and retro-style projects—dedicated editors are powerful but heavyweight. Sometimes you just need to make a quick edit to a 16x16 sprite without leaving your IDE.
Design Goals
I wanted to build a pixel art editor that feels native to the VSCode experience—fast to open, intuitive to use, and powerful enough for real work.
1. Zero Context Switching
Right-click any image in the explorer and start editing instantly. No external apps, no window juggling—just another tab in your editor.
2. Full Drawing Toolkit
Pencil, eraser, fill, shapes, selection—all the essential tools you'd expect from a dedicated pixel editor, with keyboard shortcuts for efficient workflows.
3. Professional Features
Adjustable brush sizes, opacity control, canvas transformations, and complete undo/redo history. Capable enough for serious pixel art work.
The Solution
Pixel Art Editor brings a complete drawing environment into VSCode. Open any PNG, JPEG, GIF, or BMP file and start editing with familiar tools—pencil, eraser, flood fill, color picker, and shape tools for lines, rectangles, and ellipses.
The canvas supports smooth zooming and panning, with a pixel grid that appears at higher zoom levels. Every action is recorded in the undo history, so you can experiment freely without fear of losing work.
Key Features
- Drawing tools: Pencil with adjustable brush sizes (1-32px), eraser, flood fill, and eyedropper for color sampling.
- Shape tools: Line, rectangle, and ellipse drawing with optional fill. Hold Shift for perfect squares and circles.
- Selection tool: Select regions for targeted operations, copy/paste, and transformations.
- Canvas transforms: Flip horizontally/vertically, rotate 90° in either direction, resize canvas with anchor point positioning.
- Color control: Visual color picker with hex input for precise colors, plus opacity slider for semi-transparent strokes.
- Keyboard shortcuts: Every tool accessible via keyboard—B for brush, E for eraser, G for fill, and more. Ctrl+Z/Y for undo/redo.
Implementation Notes
The editor runs in a VSCode webview with the HTML Canvas API handling all rendering. The drawing layer uses a double-buffering approach—one canvas for the committed image, another for the preview of the current stroke. This makes real-time feedback smooth even on large canvases.
Zoom and pan use CSS transforms on the canvas container rather than re-rendering at different scales. This keeps the actual pixel data 1:1 with the source image while allowing smooth viewport manipulation. The pixel grid is drawn as an overlay that only appears above a certain zoom threshold.
The undo system stores image data snapshots rather than operation logs. This uses more memory but makes undo/redo instant regardless of what operations were performed. For typical sprite sizes (16x16 to 256x256), memory usage is negligible.
File I/O goes through the VSCode extension API. When you save, the canvas exports to the original format (PNG, JPEG, etc.) and writes back to the workspace file. The extension properly integrates with VSCode's dirty state tracking, so you get the familiar unsaved indicator and save prompts.
Tech Stack
Extension
- TypeScript
- VSCode Extension API
- esbuild
Editor UI
- HTML Canvas API
- Vite
- CSS
Features
- Custom Drawing Engine
- Flood Fill Algorithm
- Image Format Support
Distribution
- VS Code Marketplace
- Open VSX Registry
- Manual VSIX Install