SemianiakaVY/openpencil
1
0
Fork 0
Code Issues Pull requests Actions 1 Packages Projects Releases Wiki Activity

Simplify README, add desktop build instructions

Browse source
This commit is contained in:
Danila Poyarkov 2026-02-28 08:14:28 +03:00
parent 040f3df22f
commit 2306457b5f
1 changed files with 37 additions and 32 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

69
README.md
View file

@ -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