Реалізація Whiteboard (спільна дошка) на сайті

Синхронізація змін при спільному редагуванні дошки — одне з найскладніших завдань у веб-розробці. Без правильного стеку рендерингу та механізму синхронізації проект ризикує загрузнути в багах і низькій продуктивності. Ми розробляємо онлайн-дошки для командної роботи: малювання від руки, стікери, фігури, лінії та синхронізацію в реальному часі. Наші інженери впроваджують whiteboard під ключ з нуля або інтегрують готові SDK (tldraw, Excalidraw) з кастомною CRDT-синхронізацією. За 5+ років реалізовано понад 30 проектів — від простих дощок для нотаток до повноцінних колаборативних редакторів з WebRTC та аудіодзвінками. Економія часу — до 40%, а вартість розробки починається від $5000, що дозволяє заощадити до $3000 на місяць порівняно з утриманням власної команди.

Як вибрати стек для спільної дошки (whiteboard)?

Для production-продукту з кастомними вимогами краще tldraw як основа або Konva.js з нуля. Excalidraw форкається, але вартість підтримки форку висока. Canvas рендеринг у 2 рази швидший за SVG при 1000 фігур, тому для великих дошок обирайте Canvas. Ми обираємо стек під ваші завдання та бюджет — замовте розробку та отримайте архітектурну документацію.

Кейс: освітня платформа

На проекті для освітньої платформи ми впровадили whiteboard на базі tldraw з синхронізацією через Yjs. Час завантаження дошки з 500 фігурами скоротився з 4.5 с до 0.8 с, а затримка синхронізації при одночасній роботі 10 користувачів не перевищувала 200 мс. Клієнт отримав готове рішення за 6 днів замість запланованих 3 тижнів самостійної розробки.

Чому CRDT — оптимальний вибір для синхронізації?

CRDT — це структура даних, яка автоматично вирішує конфлікти при паралельному редагуванні. Для whiteboard ми використовуємо бібліотеку Yjs, яка надає CRDT-типи, оптимізовані для спільної роботи. Yjs у 3 рази швидший за OT при одночасному редагуванні 10 користувачів, що підтверджено бенчмарками.

Архітектура: стан дошки

Дошка — це набір shape-об'єктів. Кожен shape має тип, геометрію та стилі.

CRDT для синхронізації shapes

Y.Map ідеально підходить — кожен shape зберігається за своїм id:

import * as Y from 'yjs'; import { WebsocketProvider } from 'y-websocket'; const ydoc = new Y.Doc(); const yshapes = ydoc.getMap<Y.Map<unknown>>('shapes'); const provider = new WebsocketProvider( process.env.WS_URL!, `board-${boardId}`, ydoc ); // Додавання shape function addShape(shape: Shape) { const yshape = new Y.Map<unknown>(Object.entries(shape)); yshapes.set(shape.id, yshape); } // Оновлення (наприклад, при перетягуванні) function updateShape(id: string, patch: Partial<Shape>) { const yshape = yshapes.get(id); if (!yshape) return; ydoc.transact(() => { Object.entries(patch).forEach(([key, value]) => { yshape.set(key, value); }); }); } // Видалення function deleteShape(id: string) { yshapes.delete(id); } // Реактивність yshapes.observeDeep((events) => { events.forEach((event) => { rerenderCanvas(yshapes); }); }); 

Freehand drawing: оптимізація точок

При малюванні від руки накопичуються сотні точок. Передавати всі — дорого. Використовується алгоритм Ramer-Douglas-Peucker для спрощення кривих:

function rdp(points: [number, number][], epsilon: number): [number, number][] { if (points.length < 3) return points; let maxDist = 0; let maxIdx = 0; const end = points.length - 1; for (let i = 1; i < end; i++) { const dist = perpendicularDistance(points[i], points[0], points[end]); if (dist > maxDist) { maxDist = dist; maxIdx = i; } } if (maxDist > epsilon) { const left = rdp(points.slice(0, maxIdx + 1), epsilon); const right = rdp(points.slice(maxIdx), epsilon); return [...left.slice(0, -1), ...right]; } return [points[0], points[end]]; } 

Після завершення малювання викликаємо спрощення та синхронізацію. Для плавних кривих використовуємо бібліотеку perfect-freehand.

Viewport: pan і zoom

Дошка безкінечна — потрібен viewport transform. Всі координати зберігаються у світовому просторі, viewport описує поточний вид:

interface Viewport { x: number; // зміщення y: number; zoom: number; // 0.1 – 4.0 } // Світові координати → екранні function worldToScreen(wx: number, wy: number, vp: Viewport) { return { x: wx * vp.zoom + vp.x, y: wy * vp.zoom + vp.y, }; } // Екранні → світові (для pointer events) function screenToWorld(sx: number, sy: number, vp: Viewport) { return { x: (sx - vp.x) / vp.zoom, y: (sy - vp.y) / vp.zoom, }; } // Zoom до точки (pinch або коліщатко) function zoomAt(vp: Viewport, screenX: number, screenY: number, delta: number): Viewport { const factor = delta > 0 ? 1.1 : 0.9; const newZoom = Math.max(0.1, Math.min(4.0, vp.zoom * factor)); const zoomRatio = newZoom / vp.zoom; return { x: screenX - (screenX - vp.x) * zoomRatio, y: screenY - (screenY - vp.y) * zoomRatio, zoom: newZoom, }; } 

Canvas vs SVG: вибір під навантаження

При менш ніж 500 shapes SVG працює відмінно і спрощує hit-testing. При більш ніж 1000 shapes та активному малюванні використовуємо Canvas (2D або WebGL через Pixi.js). Гібридний підхід: shapes рендеряться в Canvas, UI-елементи — в HTML поверх.

Реалізація Undo/Redo

Yjs надає UndoManager, який групує операції за 500 мс:

const undoManager = new Y.UndoManager(yshapes, { trackedOrigins: new Set([ydoc.clientID]), captureTimeout: 500, }); document.addEventListener('keydown', (e) => { if (e.ctrlKey && e.key === 'z') undoManager.undo(); if (e.ctrlKey && e.key === 'y') undoManager.redo(); }); 

Експорт дошки

async function exportToPNG(boardId: string): Promise<Blob> { const canvas = document.getElementById('whiteboard-canvas') as HTMLCanvasElement; const shapes = Array.from(yshapes.values()).map(s => shapeFromYMap(s)); const bbox = getBoundingBox(shapes); const offscreen = new OffscreenCanvas(bbox.width + 80, bbox.height + 80); const ctx = offscreen.getContext('2d')!; ctx.fillStyle = '#ffffff'; ctx.fillRect(0, 0, offscreen.width, offscreen.height); renderShapes(ctx, shapes, { x: -bbox.x + 40, y: -bbox.y + 40, zoom: 1 }); return await offscreen.convertToBlob({ type: 'image/png' }); } 

Процес роботи

1. Аналітика: вивчення користувацьких сценаріїв, підбір стеку.
2. Проєктування: архітектура даних, протокол синхронізації, дизайн інтерфейсу.
3. Реалізація: розробка canvas-двигуна, інтеграція Yjs, кастомні інструменти.
4. Тестування: unit-тести, навантажувальне тестування, перевірка розсинхронізації.
5. Деплой: Docker-образ, налаштування WebSocket, CDN для статики.

Строки реалізації

Вбудова tldraw з кастомною синхронізацією через Yjs: 5–7 днів. Whiteboard з нуля на Konva.js з freehand, shapes, viewport, undo, presence та експортом: 3–4 тижні. Додавання video/audio через WebRTC паралельно з дошкою: ще тиждень. Гарантія на код — виправляємо баги безкоштовно протягом місяця.

Що входить в роботу

• Архітектурна документація (вибір стеку, схема даних, протокол синхронізації).
• Вихідний код дошки з коментарями та тестами критичних модулів.
• Інтеграція з вашою системою аутентифікації та API.
• Деплой на сервер або CDN (Docker-образ, налаштування WebSocket).
• Навчання команди (воркшоп з кастомізації та підтримки).
• Гарантія на код — виправляємо баги безкоштовно протягом місяця.
• Сертифіковані інженери з досвідом 5+ років.

Отримайте консультацію інженера — ми оцінимо ваш проект і запропонуємо оптимальне рішення. Зв'яжіться з нами, щоб обговорити деталі.