openpencil/docs/development/roadmap.md

Roadmap

Phases

Phase 1: Core Engine ✅

SceneGraph, Skia rendering, basic shapes, selection, zoom/pan, undo/redo.

Delivered:

• Scene graph with flat Map storage and parent-child tree
• CanvasKit WASM rendering for all shape types
• Click/shift/marquee selection with resize handles and rotation
• Zoom/pan with keyboard shortcuts and trackpad gestures
• Undo/redo wired into all operations
• Snap guides with edge and center snapping

Phase 2: Editor UI + Layout ✅

Properties panel, layers panel, toolbar, Yoga layout integration, text editing.

Delivered:

• Vue 3 + Reka UI panels (properties, layers, toolbar)
• Properties panel split into sections (Appearance, Fill, Stroke, Typography, Layout, Position)
• ScrubInput component for all numeric inputs
• Color picker (HSV, hex, opacity)
• Layers panel with tree view, drag reorder, visibility toggle
• Auto-layout with Yoga WASM (direction, gap, padding, justify, align)
• Inline text editing with CanvasKit Paragraph API
• System font loading via Local Font Access API
• Canvas rulers with selection highlight

Phase 3: File Format + Import ✅

.fig import, Kiwi codec, clipboard compatibility.

Delivered:

• .fig file import via Kiwi binary codec
• Vendored kiwi-schema with ESM + sparse field ID patches
• Figma-compatible clipboard (bidirectional fig-kiwi binary)
• Pen tool with vector network model
• vectorNetworkBlob binary encode/decode
• Group/ungroup (⌘G/⇧⌘G)
• Tauri v2 desktop app with native macOS menu bar

Phase 4: Components + Variables 🔲

Components, instances, overrides, variants, variables, collections, modes/themes.

Planned:

• Component creation and instantiation
• Override propagation
• Variant switching
• Variable collections with modes (light/dark)
• Variable binding to node properties

Phase 5: AI Integration 🔲

MCP server, design guidelines, screenshot verification loop.

Planned:

• Port MCP server from figma-use (117 tools)
• Design guidelines system
• AI-driven design workflow via MCP
• Screenshot verification loop

Phase 6: Polish + Distribution 🔲

Prototyping, comments, desktop distribution, documentation, public launch.

Planned:

• Prototyping (frame connections, transitions)
• Comments (pin, threads, resolve)
• Cross-platform Tauri builds (macOS, Windows, Linux)
• PWA support
• Documentation site (VitePress) ← this is being built now
• Performance optimization (Lighthouse > 90)
• Full Figma compatibility test suite

Timeline

Phase	Estimated Duration	Status
Phase 1: Core Engine	3 months	✅ Complete
Phase 2: Editor UI + Layout	3 months	✅ Complete
Phase 3: File Format + Import	2 months	✅ Complete
Phase 4: Components + Variables	2 months	🔲 Planned
Phase 5: AI Integration	2 months	🔲 Planned
Phase 6: Polish + Distribution	2 months	🔲 Planned