A minimal Figma-like design tool built with React, TypeScript, and HTML5 Canvas.
- Drawing Tools: Rectangle and ellipse shapes
- Selection & Transform: Click to select, drag to move, corner handles to resize
- Viewport Controls: Zoom (Cmd/Ctrl + scroll), pan (Space + drag)
- Undo/Redo: Full history support via Zustand temporal middleware
- Color Picker: Change fill color of selected shapes
| Action | Shortcut |
|---|---|
| Select tool | V |
| Rectangle tool | R |
| Ellipse tool | O |
| Delete shape | Delete / Backspace |
| Duplicate | Cmd/Ctrl + D |
| Undo | Cmd/Ctrl + Z |
| Redo | Cmd/Ctrl + Shift + Z |
| Pan canvas | Space + Drag |
| Zoom | Cmd/Ctrl + Scroll |
- Runtime: Bun
- Framework: React 19 + TypeScript
- State: Zustand + zundo
- Backend: Convex (self-hosted)
- Styling: Tailwind CSS v4 + shadcn/ui
- Build: Vite
| Tool | Purpose |
|---|---|
| tsgo | TypeScript type checking (~10x faster than tsc) |
| oxlint | Linting (~50-100x faster than ESLint) |
| oxfmt | Code formatting (~30x faster than Prettier) |
bun install
bun run devCanvas state is persisted to a self-hosted Convex backend.
-
Start your self-hosted Convex backend
-
Configure
.env.local:CONVEX_SELF_HOSTED_URL=http://localhost:3210 CONVEX_SELF_HOSTED_ADMIN_KEY=your-admin-key VITE_CONVEX_URL=http://localhost:3210 -
Run in separate terminals:
bun run dev:backend # Push schema to Convex bun run dev # Start Vite
bun run dev # Start dev server
bun run build # Build for production
bun run preview # Preview production build
bun run lint # Lint code
bun run format # Format code