Технологический стек

Ключевые технологии

Уровень	Технология	Почему
Рендеринг	Skia CanvasKit WASM	Тот же движок, что и у Figma — проверенная производительность, GPU-ускорение, пиксельная точность
UI-фреймворк	Vue 3 + VueUse	Реактивный Composition API, отличная поддержка TypeScript
Компоненты	Reka UI	Headless, доступные UI-примитивы (дерево, слайдер и т.д.)
Стилизация	Tailwind CSS 4	Утилитарный подход, быстрая итерация, тёмная тема
Макет	Yoga WASM	CSS flexbox движок от Meta, проверенный на React Native
Формат файлов	Kiwi binary + Zstd	Собственный формат Figma — компактный, быстрый парсинг, совместимость с .fig
Совместная работа	Trystero + Yjs	P2P WebRTC через MQTT, CRDT-синхронизация, сохранение в y-indexeddb
Цвет	culori	Конвертация цветовых пространств (HSV, RGB, hex)
ИИ/MCP	MCP SDK + Hono	90+ инструментов для ИИ-кодинга, транспорты stdio + HTTP
JSX-трансформ	Sucrase	201 КБ JSX → JS, синхронный, работает в браузере
События	nanoevents	108 байт, типизированный эмиттер событий для мутаций SceneGraph
JSX-трансформ	Sucrase	201 КБ JSX → JS, синхронный, работает в браузере
События	nanoevents	108 байт, типизированный эмиттер событий для мутаций SceneGraph
Десктоп	Tauri v2	~5 МБ нативное приложение (против ~100 МБ у Electron), бэкенд на Rust
Сборка	Vite 7	Быстрый HMR, нативные ES-модули
Тестирование	Playwright + bun:test	Визуальная регрессия (E2E) + быстрые модульные тесты
Линтинг	oxlint	На основе Rust, на порядки быстрее ESLint
Форматирование	oxfmt	Форматирование на основе Rust
Проверка типов	typescript-go (tsgo)	Нативная Go-реализация проверки типов TypeScript

Ключевые зависимости

{
  "canvaskit-wasm": "^0.40.0",
  "vue": "^3.5.29",
  "yoga-layout": "npm:@open-pencil/yoga-layout@3.3.0-grid.2",
  "nanoevents": "^9.1.0",
  "sucrase": "^3.35.1",
  "reka-ui": "^2.8.2",
  "tailwindcss": "^4.2.1",
  "culori": "^4.0.2",
  "fzstd": "^0.1.1",
  "fflate": "^0.8.2",
  "trystero": "^0.20.0",
  "yjs": "^13.6.24",
  "y-indexeddb": "^9.0.12"
}

Почему не...

Почему не SVG-рендеринг?

SVG медленный для сложных документов. Каждый узел — это элемент DOM — 10 000 узлов означают 10 000 DOM-элементов с расходами на макет, отрисовку и композитинг. CanvasKit отрисовывает всё на одну GPU-поверхность. (Penpot по-прежнему использует SVG-рендеринг по умолчанию, но разрабатывает опциональный Rust/Skia WASM рендерер.)

Почему не Electron (как десктоп Figma)?

Tauri v2 использует системный webview (~5 МБ) вместо включения Chromium (~100 МБ). Бэкенд на Rust обеспечивает нативную производительность для файлового ввода-вывода и системной интеграции.

Почему не React (как в первоначальном плане)?

Проект мигрировал с React на Vue 3 на ранней стадии разработки. Система реактивности Vue и композаблы VueUse оказались более эргономичными для управления состоянием редактора.

Почему не собственный движок макетов?

Yoga поддерживается Meta, проверен на миллиардах устройств с React Native и реализует спецификацию CSS flexbox. Создание собственного движка заняло бы месяцы работы для достижения того же уровня корректности.

Планируемые технологии

Технология	Назначение	Этап
CSS Grid в Yoga	Макет на основе сетки	✅ Включено через форк Yoga (`@open-pencil/yoga-layout`)

5.2 KiB Raw Blame History Unescape Escape