Кейс 04 / 17 · Онлайн-доска для совместной работы · 2026

Lumo

Self-hosted аналог Miro: бесконечная доска, на которой команда одновременно рисует, пишет стикеры и строит схемы. Свой графический движок на PixiJS, совместное редактирование на Yjs с работой офлайн, шаблоны, mind map и канбан, комментарии, голосование и презентации, экспорт в PNG/SVG/PDF, публичный API с токенами и вебхуками. Только открытые зависимости, без Docker — один pnpm build и PM2.

https://lumo.lkxa.ru

  • Время разработки: 14 дней
  • Строк кода: 32 000+
  • Объектов при 60 FPS: 10 000
  • Тестов: 59

Задача

Командам нужна доска для ретро, брейнштормов и схем, но популярные сервисы платные, хранят данные у себя и ограничивают число досок и участников. Готовые open-source решения либо построены на чужом движке с коммерческой лицензией, либо не умеют нормально работать вместе и офлайн.

Решение

Монорепо на pnpm: собственный движок холста на PixiJS v8 (независимый от React), фронтенд на React 19 + Vite, API на Fastify, отдельный sync-сервер на Hocuspocus и worker для фоновых задач. Документ доски — Yjs: правки сливаются без конфликтов, а y-indexeddb держит копию в браузере, поэтому доска работает без сети. Данные — в SQLite (WAL) через Drizzle, всё на TypeScript strict с общими zod-схемами. Права проверяются и в API, и в sync-сервере, вебхуки уходят из outbox с HMAC-подписью и повторами.

Ключевое

Свой движок на PixiJS · Yjs: вместе и офлайн · 10 000 объектов — 60 FPS · API, токены, вебхуки

Что сделано

  • Бесконечный холст на собственном движке (PixiJS v8): отрисовка только видимого, упрощённый режим на мелком масштабе, плавная работа с 10 000 объектов
  • Стикеры, фигуры, текст с форматированием, перо и маркер, ластик, фреймы, картинки, карточки задач, таблицы, mind map, штампы и встраивания YouTube, Figma, Google Docs
  • Коннекторы: прямые, кривые и ортогональные, с обходом препятствий, подписями и привязкой к сторонам фигур
  • Выравнивание и распределение, магнитные направляющие с равными отступами, группировка, слои, блокировка
  • Совместное редактирование в реальном времени: курсоры, выделения, «следовать за участником», вызов всех к себе, лазерная указка
  • Работа без сети: правки сохраняются в браузере и сливаются с изменениями коллег без конфликтов
  • Комментарии на объектах и в любой точке, упоминания, реакции, решённые треды и уведомления
  • Голосование точками (в том числе анонимное), таймер для команды, режим презентации по фреймам, история версий с откатом
  • 11 встроенных шаблонов и собственные шаблоны команды из любой доски или фрейма
  • Воркспейсы, проекты, роли на доске и в воркспейсе, приглашения, ссылка с паролем и сроком, публичные доски и встраивание в iframe
  • Экспорт в PNG и SVG (векторный рендер без браузера), PDF по фреймам, JSON и импорт обратно
  • Превью досок генерирует worker тем же рендером движка, что и SVG-экспорт
  • Публичный REST API /api/v1 с персональными токенами, скоупами, курсорной пагинацией и документацией OpenAPI
  • Вебхуки: подпись HMAC-SHA256, до 8 повторов с растущей паузой, журнал доставок, тестовое событие и автоотключение
  • Палитра команд Ctrl/⌘+K и шорткаты, которые работают и в русской раскладке
  • Работа на планшетах: pinch-zoom, перо и тач; светлая и тёмная тема; интерфейс на русском со словарём для переводов
  • Защита: CSRF, httpOnly-сессии, лимиты запросов, проверка прав в API и sync-сервере, защита от SSRF в превью ссылок и вебхуках
  • Деплой без Docker: pnpm build и PM2, SQLite в режиме WAL, горячие бэкапы, подробная инструкция для nginx и HTTPS

Этапы

  1. Каркас (1 день) — Монорепо pnpm, TypeScript strict, токены дизайна, темы, PM2 и окружение
  2. Движок холста (2 дня) — Камера, рендер на PixiJS, хранилище на Yjs, инструменты, выделение и трансформации, отмена действий
  3. Совместная работа (2 дня) — Sync-сервер на Hocuspocus, присутствие и курсоры, офлайн-режим, проверка прав
  4. Объекты (2 дня) — Коннекторы с обходом препятствий, фреймы, картинки, перо, буфер обмена между досками, миникарта, поиск
  5. Аккаунты и доступ (2 дня) — Регистрация и OAuth, воркспейсы и роли, дашборд, шаринг, публичные доски и встраивание
  6. Командные функции (1 день) — Комментарии, упоминания, уведомления, голосование, таймер, презентация, история версий
  7. Шаблоны и типы объектов (2 дня) — Шаблоны, mind map, канбан на карточках, таблицы, встраивания, штампы, лазерная указка
  8. Экспорт и API (1 день) — PNG, SVG, PDF и JSON, превью досок, публичный API, токены, вебхуки, OpenAPI
  9. Полировка (1 день) — Главная страница, палитра команд, производительность на 10 000 объектов, e2e-тесты, инструкция по деплою

Следующий проект: Veylix