last updated: 2026-04-14

Fabian's Development Page

Pixel Art Editor

Browser-native. AI-powered. Full layer system built from scratch.

The AI assistant receiving a prompt and drawing a robot character step by step, using the same tool system available to the user.


What it can do

Built entirely from scratch, no canvas libraries. Direct pixel manipulation with typed arrays, dirty-rect rendering optimizations, and a complete tool and layer architecture.

Drawing tools

Pen, eraser, shapes (line, rect, ellipse, freeform), paint bucket and gradient. Each tool has its own controls for size, opacity, stroke alignment, fill and more.

Layer system

Hierarchical layers with drag-and-drop reordering, collapsible groups, per-layer opacity & visibility, multi-select, duplicate, merge down, merge selected, and full multi-layer undo/redo.

AI drawing assistant

Describe what to draw. The AI translates your prompt into structured canvas actions and executes them step by step using the same tool system available to you. Fully observable, no black box.

Gradient & dithering

Linear, random and ordered dithering with custom N×N pattern matrices. Edit fill order per cell, set the threshold with a live preview slider, and reset to defaults.

Selection tools

Rectangle marquee, select all, deselect, invert and select from active layer. All painting tools respect the active selection so pixels stay contained.

Cloud sync & auth

Projects sync to the cloud with JWT auth and rotating refresh tokens. Metadata saves are debounced. Real-time status shows whether layers are synced, saving, or pending.


Built with

TypeScriptReactNext.jsHTML CanvasCSS ModulesHonoCloudflare WorkersCloudflare D1Cloudflare R2OpenAI APIJWT Auth

Frontend is a Next.js app deployed on Vercel. Backend runs on Cloudflare Workers (edge runtime) with D1 for the database and R2 for layer/image storage. The AI integration uses the OpenAI API with structured output to produce executable drawing actions.


Feature clips

Quick recordings of individual features in action.

Layer groups with drag and drop reordering, collapse to keep things tidy and multi-select for bulk actions

Shape tools covering line, rectangle, ellipse and freeform, each with fill, stroke width and alignment controls

Gradient fill with ordered dithering, edit the pattern per cell and preview the fill threshold as you drag

Rectangle selection that keeps all painting tools contained, with invert and select from layer built in

Cloud sync with real-time status in the toolbar, showing when layers are saving, synced or waiting

Pen tool with adjustable size and opacity for precise pixel-level control

Layer management: context menu, visibility toggle, opacity slider, rename and reorder

Zoom toward the cursor and pan smoothly, stays responsive at any canvas size

HSB color picker modal, drag it anywhere on the canvas while you work