Case 04 / 17 · Collaborative online whiteboard · 2026

Lumo

A self-hosted Miro alternative: an infinite board where a team draws, writes sticky notes and builds diagrams together. A custom PixiJS rendering engine, real-time collaboration on Yjs that also works offline, templates, mind maps and kanban, comments, voting and presentations, PNG/SVG/PDF export, and a public API with tokens and webhooks. Open-source dependencies only, no Docker — one pnpm build and PM2.

https://lumo.lkxa.ru

  • Development time: 14 days
  • Lines of code: 32,000+
  • Objects at 60 FPS: 10,000
  • Tests: 59

Challenge

Teams need a board for retros, brainstorms and diagrams, but popular services are paid, keep the data on their side and cap the number of boards and members. Existing open-source options either run on someone else’s engine with a commercial licence or can’t handle real collaboration and offline work.

Solution

A pnpm monorepo: a custom canvas engine on PixiJS v8 (independent of React), a React 19 + Vite frontend, a Fastify API, a separate Hocuspocus sync server and a worker for background jobs. The board document is Yjs: edits merge without conflicts, and y-indexeddb keeps a copy in the browser so the board works without a connection. Data lives in SQLite (WAL) via Drizzle, everything is strict TypeScript with shared zod schemas. Permissions are checked in both the API and the sync server; webhooks go out of an outbox with HMAC signatures and retries.

Highlights

Custom PixiJS engine · Yjs: together and offline · 10,000 objects at 60 FPS · API, tokens, webhooks

What was built

  • An infinite canvas on a custom engine (PixiJS v8): renders only what is visible, a simplified mode when zoomed out, smooth with 10,000 objects
  • Sticky notes, shapes, rich text, pen and highlighter, eraser, frames, images, task cards, tables, mind maps, stamps and YouTube, Figma, Google Docs embeds
  • Connectors: straight, curved and orthogonal, routing around obstacles, with labels and anchoring to shape sides
  • Align and distribute, smart guides with equal spacing, grouping, layers, locking
  • Real-time collaboration: cursors, selections, follow a participant, summon everyone, laser pointer
  • Works offline: edits are kept in the browser and merge with teammates’ changes without conflicts
  • Comments on objects or anywhere on the board, mentions, reactions, resolved threads and notifications
  • Dot voting (including anonymous), a shared timer, presentation mode by frames, version history with restore
  • 11 built-in templates plus team templates saved from any board or frame
  • Workspaces, projects, board and workspace roles, invites, links with a password and expiry, public boards and iframe embedding
  • Export to PNG and SVG (vector rendering without a browser), PDF per frame, JSON and import back
  • Board previews are generated by the worker with the same engine renderer as the SVG export
  • A public REST API /api/v1 with personal tokens, scopes, cursor pagination and OpenAPI docs
  • Webhooks: HMAC-SHA256 signatures, up to 8 retries with growing delays, a delivery log, test events and auto-disable
  • Command palette Ctrl/⌘+K and shortcuts that also work in a Cyrillic keyboard layout
  • Tablet-friendly: pinch-zoom, pen and touch; light and dark themes; Russian UI with a dictionary for translations
  • Security: CSRF, httpOnly sessions, rate limits, permission checks in the API and the sync server, SSRF protection for link previews and webhooks
  • Deployment without Docker: pnpm build and PM2, SQLite in WAL mode, hot backups, a detailed nginx and HTTPS guide

Stages

  1. Foundation (1 day) — pnpm monorepo, strict TypeScript, design tokens, themes, PM2 and environment
  2. Canvas engine (2 days) — Camera, PixiJS rendering, Yjs store, tools, selection and transforms, undo
  3. Collaboration (2 days) — Hocuspocus sync server, presence and cursors, offline mode, permission checks
  4. Objects (2 days) — Obstacle-avoiding connectors, frames, images, pen, cross-board clipboard, minimap, search
  5. Accounts and access (2 days) — Sign-up and OAuth, workspaces and roles, dashboard, sharing, public boards and embedding
  6. Team features (1 day) — Comments, mentions, notifications, voting, timer, presentation, version history
  7. Templates and object types (2 days) — Templates, mind maps, card-based kanban, tables, embeds, stamps, laser pointer
  8. Export and API (1 day) — PNG, SVG, PDF and JSON, board previews, public API, tokens, webhooks, OpenAPI
  9. Polish (1 day) — Landing page, command palette, performance at 10,000 objects, e2e tests, deployment guide

Next project: Veylix