tldraw — бесконечный холст для вашего React-приложения

Помните те онлайн-доски, которые стали так популярны во время удалёнки? Когда нужно быстро набросать схему, поделиться идеей или провести мозговой штурм с командой. Теперь такие доски можно легко встроить в любое React-приложение благодаря tldraw — библиотеке с открытым исходным кодом, которая уже собрала более 42 тысяч звёзд на GitHub.

Что такое tldraw?

Tldraw — это больше чем просто библиотека для рисования. Это полноценный SDK для создания интерактивных досок с поддержкой:

• Рисования фигур и текста
• Выделения и трансформации объектов
• Отмены и повтора действий
• Мультиплеерного режима (да-да, несколько пользователей могут работать одновременно!)

При этом библиотека весит всего около 30 КБ в сжатом виде — практически не влияет на производительность вашего приложения.

5 причин попробовать tldraw

1. Минималистичный API — для старта достаточно одного компонента:

import { Tldraw } from 'tldraw'
import 'tldraw/tldraw.css'

export default function App() {
  return (
    <div style={{ position: 'fixed', inset: 0 }}>
      <Tldraw />
    </div>
  )
}

2. Гибкая кастомизация — можно менять инструменты, темы, горячие клавиши
3. Встроенная коллаборация — синхронизация между клиентами через любой бэкенд
4. Бесконечный холст — пользователи могут масштабировать и перемещаться без ограничений
5. Поддержка SVG и экспорта — готовые фигуры можно сохранять в разных форматах

Как это работает под капотом?

Tldraw построен на:

• React для интерфейса
• Zustand для управления состоянием
• Perfect-freehand для сглаживания линий
• Компактном бинарном формате для хранения данных

Архитектура библиотеки позволяет легко интегрировать её с разными бэкендами — от Firebase до собственных WebSocket-серверов.

Где применить?

• Образовательные платформы — интерактивные задания и объяснения
• Планировщики задач — визуальное представление проектов
• Прототипирование интерфейсов — быстрые наброски экранов
• Геймдев — редакторы уровней прямо в браузере

Начните за 5 минут

1. Установите пакет:

npm i tldraw

2. Импортируйте компонент (не забудьте стили!)
3. Добавьте <Tldraw /> в ваше приложение
4. Наслаждайтесь готовой доской с инструментами рисования

Для коммерческих проектов потребуется лицензия (от $20/месяц), но для некоммерческих можно использовать бесплатную версию с небольшим водяным знаком.

Tldraw — один из тех редких инструментов, которые сочетают простоту интеграции с мощными возможностями. Если вам нужно добавить интерактивное рисование в приложение — попробуйте начать именно с него. А для более глубокого изучения загляните в документацию или исходный код.

Кстати, разработчики предусмотрели даже специальные CONTEXT.md файлы для ИИ-ассистентов — видно, что проект создан с любовью к сообществу.