A Figma-style 2D vector editor built with Zig WASM core and WebGPU rendering, running entirely in a Web Worker for smooth 60fps performance.

• Rectangle Tool - Create rectangles with optional corner radius
• Ellipse Tool - Create circles and ellipses
• Pen Tool - Draw arbitrary paths with bezier curve support (click+drag for smooth curves)
• Select Tool - Select, move, resize, and rotate shapes

• Fill & Stroke - Per-shape fill and stroke colors
• Stroke Options - Configurable width, caps (butt/round/square), joins (miter/round/bevel)
• Dashed Strokes - Customizable dash length and gap
• Corner Radius - Rounded corners for rectangles

• Nested Groups - Arbitrary hierarchy depth with Cmd/Ctrl+G to group, Cmd/Ctrl+U to ungroup
• Layer Panel - Visual hierarchy with visibility toggles
• Undo/Redo - Full history support (Cmd/Ctrl+Z / Cmd/Ctrl+Y)

• GPU Compute Shaders - Geometry generation on GPU (curve flattening, stroke expansion)
• Adaptive Bezier Subdivision - 4-128 segments based on curvature and zoom
• Tile-Based Rendering - Only re-render dirty regions for efficiency
• 4x MSAA Antialiasing - Smooth edges with fragment shader AA
• Object Transforms - Full rotation and scale support with hierarchy propagation

• Bun or Node.js
• Zig 0.15.0 or later
• WebGPU-capable browser (Chrome 113+, Edge 113+, Firefox 139+)

# Install dependencies
bun install

# Development build (fast iteration)
bun run build:wasm:debug && bun run dev

# Production build
bun run prod

wiggle/
├── src/
│   ├── main.zig         # Core: scene graph, input, geometry export
│   └── app/
│       ├── App.tsx      # React UI: tool panel, layers, properties
│       └── styles.css   # UI styling
├── www/
│   ├── worker.js        # WebGPU init, WGSL shaders, render loop
│   ├── index.html       # Entry point
│   └── index.js         # Canvas setup, worker communication
├── build.zig            # Zig build configuration
├── ARCHITECTURE.md      # Detailed technical documentation
└── package.json

┌─────────────────┐    postMessage    ┌──────────────────────────────┐
│  React UI       │ ←───────────────→ │  Web Worker                  │
│  - Tool panel   │                   │  - WebGPU pipelines          │
│  - Layers panel │                   │  - WGSL compute shaders      │
│  - Properties   │                   │  - WASM ↔ GPU buffer sync    │
└─────────────────┘                   └──────────────────────────────┘
                                                 ↓
                                      ┌──────────────────────────────┐
                                      │  Zig WASM                    │
                                      │  - Scene graph (shapes[])    │
                                      │  - Paths with bezier curves  │
                                      │  - Hit testing, selection    │
                                      │  - Undo/redo history         │
                                      └──────────────────────────────┘

1. Zig exports shape/path descriptors to linear memory
2. Worker.js reads via exported pointers (getShapeDescriptorPtr(), etc.)
3. Uploads to GPU storage buffers
4. Compute shaders generate vertices (curve flattening, stroke expansion)
5. Render pass draws from vertex buffer with tile-based dirty tracking

See ARCHITECTURE.md for in-depth documentation on:

• Adaptive bezier subdivision algorithm
• GPU compute pipeline stages
• Tile-based dirty rendering
• Miter join calculations
• Group hierarchy and transforms

MIT