Помните те онлайн-доски, которые стали так популярны во время удалёнки? Когда нужно быстро набросать схему, поделиться идеей или провести мозговой штурм с командой. Теперь такие доски можно легко встроить в любое React-приложение благодаря tldraw — библиотеке с открытым исходным кодом, которая уже собрала более 42 тысяч звёзд на GitHub.
Что такое tldraw?
Tldraw — это больше чем просто библиотека для рисования. Это полноценный SDK для создания интерактивных досок с поддержкой:
Рисования фигур и текста
Выделения и трансформации объектов
Отмены и повтора действий
Мультиплеерного режима (да-да, несколько пользователей могут работать одновременно!)
При этом библиотека весит всего около 30 КБ в сжатом виде — практически не влияет на производительность вашего приложения.
5 причин попробовать tldraw
Минималистичный API
— для старта достаточно одного компонента:
import
{ Tldraw }
from
'tldraw'
import
'tldraw/tldraw.css'
export
default
function
App
() {
return
(
<
div xss=clean>
<
Tldraw>
div>
)
}
Гибкая кастомизация
— можно менять инструменты, темы, горячие клавиши
Встроенная коллаборация
— синхронизация между клиентами через любой бэкенд
Бесконечный холст
— пользователи могут масштабировать и перемещаться без ограничений
Поддержка SVG и экспорта
— готовые фигуры можно сохранять в разных форматах
Как это работает под капотом?
Tldraw построен на:
React для интерфейса
Zustand для управления состоянием
Perfect-freehand для сглаживания линий
Компактном бинарном формате для хранения данных
Архитектура библиотеки позволяет легко интегрировать её с разными бэкендами — от Firebase до собственных WebSocket-серверов.
Где применить?
Образовательные платформы
— интерактивные задания и объяснения
Планировщики задач
— визуальное представление проектов
Прототипирование интерфейсов
— быстрые наброски экранов
Геймдев
— редакторы уровней прямо в браузере
Начните за 5 минут
Установите пакет:
npm
i
tldraw
Импортируйте компонент (не забудьте стили!)
Добавьте
в ваше приложение
Наслаждайтесь готовой доской с инструментами рисования
Для коммерческих проектов потребуется лицензия (от $20/месяц), но для некоммерческих можно использовать бесплатную версию с небольшим водяным знаком.
Tldraw — один из тех редких инструментов, которые сочетают простоту интеграции с мощными возможностями. Если вам нужно добавить интерактивное рисование в приложение — попробуйте начать именно с него. А для более глубокого изучения загляните в
документацию
или
исходный код
.
Кстати, разработчики предусмотрели даже специальные CONTEXT.md файлы для ИИ-ассистентов — видно, что проект создан с любовью к сообществу.