uSketch
リアルタイムコラボレーション対応のブラウザベース・ホワイトボードアプリケーション。
すべての機能（ツール・シェイプ・背景・AI・プレゼン等）を統一プラグイン API で実装する、拡張可能なアーキテクチャが特徴。
Quick start
# Node.js 22 + pnpm 10 が必要
pnpm install
pnpm dev
開発サーバー: http://localhost:4578
スクリプト
| コマンド | 説明 |
|---|
pnpm dev | 開発サーバー起動 |
pnpm build | 全パッケージのビルド |
pnpm test | 単体テスト実行（Vitest） |
pnpm test:e2e | E2E テスト（Playwright） |
pnpm typecheck | TypeScript 型チェック |
pnpm lint | Biome リント |
pnpm format | Biome フォーマット |
pnpm clean | ビルド成果物の削除 |
pnpm changeset | リリース用 changeset 作成 |
主な機能
描画・編集
- Shape plugins: rect, ellipse, text, sticky, freedraw, image, frame, connector, group, portal, counter, wireframe, community-region, board-portal
- Tool plugins: select（XState 駆動の移動・リサイズ・回転）, pan, map（RPG/ワールドマップの地形ペイント）
- Background: grid, dots
- Snap & smart guides、キーボードショートカット、Undo/Redo（コマンドパターン）
コラボレーション
- Realtime sync: Cloudflare Durable Objects + Yjs WebSocket（awareness 付き）
- Offline-first: y-indexeddb によるローカル永続化、再接続時の自動同期
- Presence: ライブカーソル、拡張アバター、follow-me、spatial chat、reactions、whistle
- Live sessions: サーバー権限の投票（途中参加・再接続猶予・ホスト移譲・秘密投票）。イベント型を足せるフレームワーク
- Link sharing: 公開 / 限定公開 + role 管理（owner / editor / viewer）
AI ネイティブ
- Copilot: ghost shape によるリアルタイム提案
- Chat / Voice / Image: LLM ブリッジ経由の NL2Canvas
- Smart actions: 選択シェイプに対するコンテキストメニュー
プレゼンテーション
- Frame ベースのスライド + edit / present モード
- Canvas が stage 矩形に縮退する "Canvas flavor" 設計
- スライドサムネイル（minimap 連動）
エクスポート
- PNG / SVG / JSON（Satori + Canvas）
プロジェクト構成
apps/
web/ — メイン Web アプリ（React 19 + Vite 7）
server/ — Edge API サーバー（Hono + Cloudflare Workers）
docs/ — ドキュメントサイト（Astro Starlight）
mcp-server/ — MCP サーバー（Claude Code 連携）
packages/
core/ — plugin API / レイヤーシステム / TransientRegistry
canvas-engine/ — ビューポート / 座標変換 / minimap
store/ — Zustand ベースのボードストア
sync/ — WebSocket provider（awareness + 再接続 + MSG_SESSION チャネル）
shared/ — 共有型 / shape data model / utilities
ui/ — 共通 UI コンポーネント
dom-renderer/ / gpu-renderer/ — 2 系統の描画バックエンド
server-core/ — サーバープラグイン基盤
session-protocol/ — ライブ・セッションの client↔server 共通型（型のみ）
session-voting/ — セッション型「投票」（server / client ペア）
plugins/
70+ plugin（詳細は docs/ を参照）。session（ライブ・セッション基盤）/ map（ワールドマップ）等
技術スタック
| カテゴリ | 技術 |
|---|
| フレームワーク | React 19 / TypeScript 5.9 |
| ビルド | Vite 7 / Turborepo / pnpm |
| リント | Biome |
| テスト | Vitest / Playwright |
| 状態マシン | XState 5 / @zag-js/core |
| CRDT | Yjs 13 / y-indexeddb |
| バックエンド | Hono / Cloudflare Workers / Durable Objects / D1 |
| 認証 | Better Auth |
| バージョニング | Changesets |
アーキテクチャ
- 統一プラグイン API — すべての機能が
UsketchPlugin インターフェース
- レイヤーベース描画 — plugin がレイヤーを登録、コアが描画順を制御
- コマンドパターン — Undo/Redo
- イベントバス — plugin 間の疎結合通信
- Edge-First — Cloudflare Workers + Durable Objects で低コスト運用
- Offline-First — Yjs CRDT でローカル動作 + オンライン同期
ドキュメント
コントリビューション
ファイル命名規則
すべての .ts / .tsx ファイルは kebab-case（例: text-editing-machine.ts）
コミットメッセージ
gitmoji を使用（例: ✨ feat:, 🐛 fix:, ♻️ refactor:）
リリース
変更を加えたら changeset を作成:
pnpm changeset
セキュリティ
脆弱性を発見した場合は SECURITY.md の手順に従って報告してください。
ライセンス
MIT
