Danila Poyarkov eeaef12c27 Update Penpot comparison to reflect WASM renderer (render-wasm/v1)

Penpot 2.x ships with Rust/Skia WASM rendering enabled by default.
Update architecture diagram, rendering pipeline, and file format sections
to reflect the current state instead of the old SVG-based renderer.

2026-03-02 13:35:09 +03:00

2.6 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?

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. (Penpot still defaults to SVG rendering but has an opt-in Rust/Skia WASM renderer in development.)

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.6 KiB Raw Blame History