Repolode
Предложить
quickdrawjs

quickdrawjs/quickdraw

Лицензированный по MIT SDK бесконечной холстовой доски для React, React Native и приложений на чистом JavaScript — бесплатная альтернатива tldraw.

Open source альтернатива:tldraw

Открыть на GitHubСайт
Звёзды
555
Форки
45
Открытые issues
7
Последний коммит
позавчера

Что это?

Quickdraw — это SDK для доски, который позволяет встраивать холст для рисования в веб- и мобильные приложения. Он поставляется в виде трёх пакетов: не зависящее от фреймворков ядро со всплывающей панелью инструментов, компонент React с хуками и компонент React Native, который оборачивает ядро в WebView и взаимодействует с ним через типизированный мост. У ядра нет runtime-зависимостей, и в современных браузерах оно работает как обычный ESM без этапа сборки.

На доске доступны рисование от руки с учётом силы нажатия, маркер, фигуры с рисованным стилем, стрелки, текст, стикеры, изображения и лазерная указка. Также есть выделение рамкой и смещение объектов клавишами, панорамирование и масштабирование бесконечного холста, отбрасывание касаний ладонью при работе со стилусом, отмена и повтор действий с группировкой по жестам, светлая и тёмная темы, несколько вариантов сетки и экспорт в PNG.

Состояние документа хранится в виде плоской карты неизменяемых записей, а каждое изменение выдаёт diff в формате JSON. Эти diff используются для сохранения снимков состояния, истории отмены и синхронизации в реальном времени через любой выбранный вами транспорт. Собственный сервер для многопользовательской работы в комплект не входит.

Ключевые возможности

  • 01Рисование от руки с учётом силы нажатия и инструмент-маркер
  • 02Фигуры, стрелки, текст, стикеры и добавление изображений
  • 03Бесконечный холст с панорамированием, масштабированием и жестами pinch
  • 04Отмена и повтор действий с группировкой по жестам и экспорт в PNG
  • 05Diff в формате JSON для сохранения данных и синхронизации в реальном времени

Сценарии использования

  • Добавление доски или рисования в веб-приложение на React
  • Встраивание холста для рисования в приложение на Expo или React Native через WebView
  • Создание совместного инструмента для построения диаграмм с синхронизацией diff документа через собственный сервер
  • Встраивание готовой доски в обычную HTML-страницу без этапа сборки

Быстрый старт

  1. 1

    Установите пакет React

    npm install @quickdrawjs/react
  2. 2

    Импортируйте таблицу стилей и отобразите компонент Quickdraw в приложении

Что важно знать

  • В README сказано, что проект находится на ранней стадии и в нём нет собственного многопользовательского сервера, слоёв, кадров и форматированного текста.
  • По умолчанию отображается водяной знак «Made with Quickdraw». Чтобы отключить его, укажите watermark={false}.

Темы

#whiteboard#canvas#drawing#react#react-native#javascript#sdk#collaboration#collaborative-whiteboard#diagram

Частые вопросы

Что такое quickdraw?
Лицензированный по MIT SDK бесконечной холстовой доски для React, React Native и приложений на чистом JavaScript — бесплатная альтернатива tldraw. Quickdraw — это SDK для доски, который позволяет встраивать холст для рисования в веб- и мобильные приложения. Он поставляется в виде трёх пакетов: не зависящее от фреймворков ядро со всплывающей панелью инструментов, компонент React с хуками и компонент React Native, который оборачивает ядро в WebView и взаимодействует с ним через типизированный мост. У ядра нет runtime-зависимостей, и в современных браузерах оно работает как обычный ESM без этапа сборки.
quickdraw можно использовать бесплатно? Какая у него лицензия?
quickdraw распространяется с открытым исходным кодом под лицензией MIT. Перед использованием в коммерческих продуктах проверьте условия лицензии.
quickdraw всё ещё поддерживается?
Активно поддерживается. Последний коммит в quickdraw — 18 окт. 2026 г..
Для чего можно использовать quickdraw?
Добавление доски или рисования в веб-приложение на React Встраивание холста для рисования в приложение на Expo или React Native через WebView Создание совместного инструмента для построения диаграмм с синхронизацией diff документа через собственный сервер Встраивание готовой доски в обычную HTML-страницу без этапа сборки
Как установить quickdraw?
Установите пакет React: npm install @quickdrawjs/react Импортируйте таблицу стилей и отобразите компонент Quickdraw в приложении
Где скачать quickdraw?
Исходный код и инструкции по установке — на GitHub: https://github.com/quickdrawjs/quickdraw

Описание создано ИИ на основе README проекта. Статистика GitHub обновляется ежедневно.

Похожие проекты