diff --git a/README.md b/README.md index bbd226cc2..1f4b3bd18 100644 --- a/README.md +++ b/README.md @@ -6,16 +6,15 @@ Open-source, AI-native design editor. Figma alternative built from scratch with ## Features -- **CanvasKit (Skia WASM) renderer** — same rendering engine as Figma -- **Figma .fig file import** — Kiwi binary codec with Zstd decompression -- **Figma clipboard interop** — copy/paste between OpenPencil and Figma -- **Vector networks** — full Figma-compatible vertex/segment/region model, not SVG paths -- **Auto-layout** — Yoga WASM engine, supports all Figma layout modes -- **Pen tool** — click-to-place vertices, bezier tangent dragging, close/open paths -- **Inline text editing** — CanvasKit Paragraph API with Inter font -- **Undo/redo** — inverse command pattern across all operations -- **Snap guides** — edge/center snapping with rotation awareness -- **Color picker** — HSV area + hue/alpha sliders + hex input +- **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 @@ -23,33 +22,44 @@ Open-source, AI-native design editor. Figma alternative built from scratch with |-------|------| | UI | Vue 3, VueUse, Reka UI | | Styling | Tailwind CSS 4 | -| Rendering | CanvasKit (Skia WASM) | +| Rendering | Skia (CanvasKit WASM) | | Layout | Yoga WASM | -| File format | Kiwi binary (vendored fork) + Zstd (fzstd) + ZIP (fflate) | +| File format | Kiwi binary (vendored) + Zstd + ZIP | | Color | culori | | Desktop | Tauri v2 | -| Testing | Playwright (E2E visual regression), bun:test (unit) | +| Testing | Playwright (visual regression), bun:test (unit) | | Tooling | Vite 7, oxlint, oxfmt, typescript-go | ## Getting Started ```sh bun install -bun run dev # http://localhost:1420 +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 Builds + +Requires [Rust](https://rustup.rs/) and platform-specific prerequisites ([Tauri v2 guide](https://v2.tauri.app/start/prerequisites/)). + ```sh -bun run dev # Vite dev server -bun run build # Production build -bun run check # Lint + typecheck -bun run test # E2E visual regression tests -bun run test:update # Regenerate screenshot baselines -bun run test:unit # Unit tests (scene graph, ~15ms) -bun run tauri dev # Desktop app (requires Rust toolchain) +bun run tauri build # Current platform +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). + ## Project Structure ``` @@ -58,21 +68,16 @@ src/ composables/ Canvas input, keyboard shortcuts, rendering stores/ Editor state (Vue reactivity) engine/ Scene graph, renderer, layout, clipboard, undo, vector, snap - kiwi/ Figma binary format (Kiwi codec, .fig import, protocol) - kiwi-schema/ Vendored kiwi-schema (TypeScript source from evanw/kiwi) - types.ts Shared types (GUID, Color) - constants.ts UI colors, default fills, thresholds + 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 tests - engine/ bun:test unit tests - helpers/ Test utilities (canvas interactions, Figma CDP) + e2e/ Playwright visual regression + engine/ Unit tests ``` -## Figma Compatibility - -OpenPencil reads Figma's native .fig files (ZIP → Kiwi binary → Zstd) and supports bidirectional clipboard copy/paste. The Kiwi codec includes a vendored fork of [kiwi-schema](https://github.com/evanw/kiwi) with support for Figma's sparse field IDs. Vector data uses the reverse-engineered `vectorNetworkBlob` binary format for full round-trip fidelity. - ## License MIT