Brush Lab

## Inspiration

Digital art tools often force a choice between expressive raster brushes and editable vector graphics. I wanted to create a browser-based studio where calligraphic strokes feel natural and spontaneous while remaining fully editable.

## What it does

Brush Lab turns freehand gestures into editable vector artwork. It includes five brush styles: Kanteiryū, Sumoji, Tachist Rake, Basic, and Lantingji.

Users can work with layers, move, rotate, scale, copy, and delete strokes, apply non- destructive erasing, and use Undo/Redo. Artwork can be exported as SVG, vector PDF, or PNG. The production build also works as a single offline HTML file.

## How I built it

I built Brush Lab with Vue 3 and TypeScript. Konva handles interactive rendering and transformations, while Paper.js supports vector geometry processing. A VectorDocument acts as the single source of truth for editing, saving, and exporting.

OpenAI Codex helped me plan features, review architecture, debug interaction issues, write regression tests, and iterate on the UI.

## Challenges

The main challenge was balancing expressive brush behavior with deterministic vector output. I also worked through asynchronous stroke processing, non-destructive eraser geometry, affine transformations, Undo/Redo consistency, and cross-browser pointer interactions.

## What I learned

I learned how important it is to separate the authoritative document model from the renderer. I also learned that small event-propagation details can break an otherwise complete transformation pipeline, and that focused regression tests are essential for interactive graphics.

## What's next

I plan to add more brush engines and presets, improve performance for complex artwork, expand editing tools, and develop Brush Lab into a dedicated desktop creative application.

Built With

• cloudflare
• css3
• html
• html5
• javascript
• konva.js
• openai-codex
• paper.js
• playwright
• svg
• typescript
• vite
• vitest
• vue.js