6503c9a267
Sync 12 commits from master (af3db9f..70c88dd): - Polygon and Star drawing tools in shapes flyout - Resizable left/right panels via reka-ui Splitter - @/ import alias, shared types (src/types.ts, src/global.d.ts) - Codebase lint-clean: 0 oxlint warnings, 0 tsgo type errors - oxfmt formatting, Firefox spinner fix, ScrubInput cursor fix Updated: 4 openspec specs, 4 VitePress docs pages |
||
|---|---|---|
| .github/workflows | ||
| .vscode | ||
| desktop | ||
| docs | ||
| openspec | ||
| public | ||
| src | ||
| tests | ||
| .gitignore | ||
| .oxfmtrc.json | ||
| bun.lock | ||
| COMPARISON.md | ||
| components.d.ts | ||
| index.html | ||
| oxlint.json | ||
| package.json | ||
| PLAN.md | ||
| playwright.config.ts | ||
| README.md | ||
| tsconfig.json | ||
| tsconfig.node.json | ||
| vite.config.ts | ||
OpenPencil
Open-source, AI-native design editor. Figma alternative built from scratch with full .fig file compatibility.
Status: Active development. Not ready for production use.
Features
- Figma .fig file import — open native Figma files directly
- Figma clipboard — copy/paste between OpenPencil and Figma
- Vector networks — complex boolean shapes and open paths, like Figma
- Auto-layout — constraint-based layout matching Figma behavior
- Pen tool — bezier curves with tangent handles
- Inline text editing — multi-line text with Inter font
- Undo/redo — all operations are undoable
- Snap guides — edge and center snapping
- Color picker — HSV, hue/alpha sliders, hex input
Tech Stack
| Layer | Tech |
|---|---|
| UI | Vue 3, VueUse, Reka UI |
| Styling | Tailwind CSS 4 |
| Rendering | Skia (CanvasKit WASM) |
| Layout | Yoga WASM |
| File format | Kiwi binary (vendored) + Zstd + ZIP |
| Color | culori |
| Desktop | Tauri v2 |
| Testing | Playwright (visual regression), bun:test (unit) |
| Tooling | Vite 7, oxlint, oxfmt, typescript-go |
Getting Started
bun install
bun run dev
Scripts
| Command | Description |
|---|---|
bun run dev |
Dev server at http://localhost:1420 |
bun run build |
Production build |
bun run check |
Lint + typecheck |
bun run test |
E2E visual regression |
bun run test:update |
Regenerate screenshot baselines |
bun run test:unit |
Unit tests |
bun run tauri dev |
Desktop app (requires Rust) |
Desktop App
Requires Rust, the Tauri CLI, and platform-specific prerequisites (Tauri v2 guide).
bun run tauri dev # Dev mode with hot reload
bun run tauri build # Production build
bun run tauri build --target universal-apple-darwin # macOS universal
Cross-compilation to other platforms requires their respective toolchains or CI (e.g. GitHub Actions).
Platform Prerequisites
macOS
Install Xcode Command Line Tools:
xcode-select --install
Windows
- Install Rust — make sure the default toolchain is
stable-msvc:rustup default stable-msvc - Install Visual Studio Build Tools with the "Desktop development with C++" workload (MSVC compiler + Windows SDK)
- WebView2 is pre-installed on Windows 10 (1803+) and Windows 11. If missing, download from Microsoft
Linux
Install system dependencies (Debian/Ubuntu):
sudo apt install libwebkit2gtk-4.1-dev build-essential curl wget file \
libxdo-dev libssl-dev libayatana-appindicator3-dev librsvg2-dev
For other distros, see the Tauri v2 prerequisites.
Project Structure
src/
components/ Vue SFCs (canvas, panels, toolbar, color picker)
composables/ Canvas input, keyboard shortcuts, rendering
stores/ Editor state (Vue reactivity)
engine/ Scene graph, renderer, layout, clipboard, undo, vector, snap
kiwi/ Figma file format (Kiwi codec, .fig import)
kiwi-schema/ Vendored from evanw/kiwi
types.ts Shared types
constants.ts UI colors, defaults, thresholds
desktop/ Tauri v2 (Rust + config)
tests/
e2e/ Playwright visual regression
engine/ Unit tests
License
MIT