Danila Poyarkov 96d8ab5789 Move docs to packages/docs, add Cloudflare Pages deploy

- Move docs/ → packages/docs/ as @open-pencil/docs workspace package
- Add screenshot.png as hero image on landing page
- Add GitHub Actions workflow for Cloudflare Pages deploy (openpencil.dev)
- Remove vitepress from root devDependencies
- Root docs:* scripts delegate via bun --filter

2026-03-01 15:16:16 +03:00

2.5 KiB

Raw Blame History

Tech Stack

Core Technologies

Layer	Technology	Why
Rendering	Skia CanvasKit WASM	Same engine as Figma — proven performance, GPU-accelerated, pixel-perfect
UI Framework	Vue 3 + VueUse	Reactive composition API, excellent TypeScript support
Components	Reka UI	Headless, accessible UI primitives (tree, slider, etc.)
Styling	Tailwind CSS 4	Utility-first, fast iteration, dark theme
Layout	Yoga WASM	CSS flexbox engine from Meta, battle-tested in React Native
File Format	Kiwi binary + Zstd	Figma's own format — compact, fast parsing, .fig compatible
Color	culori	Color space conversions (HSV, RGB, hex)
Desktop	Tauri v2	~5MB native app (vs Electron's ~100MB), Rust backend
Build	Vite 7	Fast HMR, native ES modules
Testing	Playwright + bun:test	Visual regression (E2E) + fast unit tests
Linting	oxlint	Rust-based, orders of magnitude faster than ESLint
Formatting	oxfmt	Rust-based formatter
Type Checking	typescript-go (tsgo)	Native Go implementation of TypeScript type checker

Key Dependencies

{
  "canvaskit-wasm": "^0.40.0",
  "vue": "^3.5.29",
  "yoga-layout": "^3.2.1",
  "reka-ui": "^2.8.2",
  "tailwindcss": "^4.2.1",
  "culori": "^4.0.2",
  "fzstd": "^0.1.1",
  "fflate": "^0.8.2"
}

Why Not...

Why not SVG rendering (like Penpot)?

SVG is slow for complex documents. Every node is a DOM element — 10,000 nodes means 10,000 DOM nodes with layout, paint, and compositing overhead. CanvasKit draws everything to a single GPU surface.

Why not Electron (like Figma desktop)?

Tauri v2 uses the system webview (~5MB) instead of bundling Chromium (~100MB). The Rust backend provides native performance for file I/O and system integration.

Why not React (like the original plan)?

The project migrated from React to Vue 3 early in development. Vue's reactivity system and VueUse composables proved more ergonomic for the editor's state management needs.

Why not custom layout engine?

Yoga is maintained by Meta, battle-tested across billions of React Native devices, and implements the CSS flexbox spec. Building a custom engine would be months of work to reach the same correctness level.

Planned Technologies

Technology	Purpose	Phase
Yjs (CRDT)	Real-time collaboration	Phase 6
MCP Server	AI agent integration (117 tools)	Phase 5

2.5 KiB Raw Blame History