Repolode
投稿する
quickdrawjs

quickdrawjs/quickdraw

React、React Native、素のJavaScriptアプリ向けのMITライセンスの無限キャンバス型ホワイトボードSDK。tldrawの無料代替として利用できます。

代替できる製品:tldraw

GitHub で見る公式サイト
スター
555
フォーク
45
未解決の Issue
7
最終コミット
一昨日

これは何？

Quickdrawは、Webアプリやモバイルアプリに描画キャンバスを組み込めるホワイトボードSDKです。3つのパッケージを提供しています。フローティングツールバーを備えたフレームワーク非依存のコアエンジン、hooksを使えるReactコンポーネント、そして型付きブリッジを介してWebView内でエンジンを動かすReact Nativeコンポーネントです。コアには実行時依存がなく、ビルド不要で、最新のブラウザ上でプレーンなESMとして動作します。

ボードには、筆圧対応のフリーハンド描画、蛍光ペン、手描き風の図形、矢印、テキスト、付箋、画像、レーザーポインターが用意されています。範囲選択とキーボードによる微調整、無限キャンバスのパン・ズーム、スタイラス入力時のパームリジェクション、ジェスチャー単位でまとめられたUndo/Redo、ライト・ダークテーマ、複数のグリッド背景、PNGエクスポートにも対応しています。

ドキュメントの状態は不変レコードを格納したフラットなマップで管理され、変更のたびにJSONシリアライズ可能な差分が出力されます。この差分を使って、スナップショットの永続化、Undo履歴、任意の通信手段を介したリアルタイム同期を実現できます。公式のマルチプレイヤーサーバーは付属していません。

主な機能

  • 01筆圧対応のフリーハンド描画と蛍光ペンツール
  • 02図形、矢印、テキスト、付箋、画像の挿入
  • 03パン、ズーム、ピンチ操作に対応した無限キャンバス
  • 04ジェスチャー単位でまとめられたUndo/RedoとPNGエクスポート
  • 05永続化とリアルタイム同期に使えるJSONセーフな差分

ユースケース

  • ReactのWebアプリにホワイトボードやスケッチ機能を追加する
  • WebViewを介してExpoまたはReact Nativeアプリに描画キャンバスを組み込む
  • 独自サーバーでドキュメントの差分を同期する共同編集型の図解ツールを構築する
  • ビルド不要で、プレーンな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 とは？
React、React Native、素のJavaScriptアプリ向けのMITライセンスの無限キャンバス型ホワイトボードSDK。tldrawの無料代替として利用できます。 Quickdrawは、Webアプリやモバイルアプリに描画キャンバスを組み込めるホワイトボードSDKです。3つのパッケージを提供しています。フローティングツールバーを備えたフレームワーク非依存のコアエンジン、hooksを使えるReactコンポーネント、そして型付きブリッジを介してWebView内でエンジンを動かすReact Nativeコンポーネントです。コアには実行時依存がなく、ビルド不要で、最新のブラウザ上でプレーンなESMとして動作します。
quickdraw は無料で使えますか？ライセンスは？
quickdraw は MIT ライセンスのオープンソースです。商用製品で使う前にライセンス条件を確認してください。
quickdraw は今もメンテナンスされていますか？
活発にメンテナンス中。quickdraw の最終コミットは 2026年10月18日 です。
quickdraw は何に使えますか？
ReactのWebアプリにホワイトボードやスケッチ機能を追加する WebViewを介してExpoまたはReact Nativeアプリに描画キャンバスを組み込む 独自サーバーでドキュメントの差分を同期する共同編集型の図解ツールを構築する ビルド不要で、プレーンなHTMLページにそのまま使えるホワイトボードを組み込む
quickdraw のインストール方法は？
React パッケージをインストールします: npm install @quickdrawjs/react スタイルシートをインポートし、アプリで Quickdraw コンポーネントをレンダリングします
quickdraw はどこで入手できますか？
ソースコードとインストール手順は GitHub にあります：https://github.com/quickdrawjs/quickdraw

概要はプロジェクトの README をもとに AI が生成しています。GitHub の数値は毎日更新されます。

関連プロジェクト