From 040f3df22fbf117ff89b12aa8e79eb8f9716dbdc Mon Sep 17 00:00:00 2001 From: Danila Poyarkov Date: Sat, 28 Feb 2026 08:12:18 +0300 Subject: [PATCH] Update README --- README.md | 79 ++++++++++++++++++++++++++++++++++++++++++++++++++++--- 1 file changed, 75 insertions(+), 4 deletions(-) diff --git a/README.md b/README.md index 102e36689..bbd226cc2 100644 --- a/README.md +++ b/README.md @@ -1,7 +1,78 @@ -# Tauri + React + Typescript +# OpenPencil -This template should help get you started developing with Tauri, React and Typescript in Vite. +Open-source, AI-native design editor. Figma alternative built from scratch with full .fig file compatibility. -## Recommended IDE Setup +> **Status:** Active development. Not ready for production use. -- [VS Code](https://code.visualstudio.com/) + [Tauri](https://marketplace.visualstudio.com/items?itemName=tauri-apps.tauri-vscode) + [rust-analyzer](https://marketplace.visualstudio.com/items?itemName=rust-lang.rust-analyzer) +## 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 + +## Tech Stack + +| Layer | Tech | +|-------|------| +| UI | Vue 3, VueUse, Reka UI | +| Styling | Tailwind CSS 4 | +| Rendering | CanvasKit (Skia WASM) | +| Layout | Yoga WASM | +| File format | Kiwi binary (vendored fork) + Zstd (fzstd) + ZIP (fflate) | +| Color | culori | +| Desktop | Tauri v2 | +| Testing | Playwright (E2E visual regression), bun:test (unit) | +| Tooling | Vite 7, oxlint, oxfmt, typescript-go | + +## Getting Started + +```sh +bun install +bun run dev # http://localhost:1420 +``` + +## Scripts + +```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) +``` + +## 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 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 +desktop/ Tauri v2 (Rust + config) +tests/ + e2e/ Playwright visual regression tests + engine/ bun:test unit tests + helpers/ Test utilities (canvas interactions, Figma CDP) +``` + +## 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