Repolode
投稿する
toeverything

toeverything/blocksuite

ブロックエディターや共同編集アプリの構築に使える、Web Components UIとCRDTベースのデータレイヤーを備えたTypeScriptツールキット。

代替できる製品:Notion

GitHub で見る公式サイト
スター
6,085
フォーク
565
未解決の Issue
196
最終コミット
昨日

これは何？

BlockSuiteは、エディターや共同編集アプリを構築するためのツールキットです。ドキュメントの状態をモデル化するヘッドレスフレームワークに加え、ブロックベースのドキュメントエディター（PageEditor）や、グラフィックツール風のキャンバスエディター（EdgelessEditor）など、同じリッチテキスト機能を備えた編集コンポーネントを提供します。

データレイヤーはYjs CRDTライブラリを基盤としており、ドキュメントのリアルタイム共同編集とタイムトラベルに対応します。コンポーネントはネイティブのWeb Componentsなので、Reactなどのフレームワークから利用できます。開発者はカスタムブロックを定義したり、複数のエディターで1つのドキュメントを再利用したり、スナップショットやトランスフォーマーを通じてMarkdownやHTMLなどの形式とコンテンツを相互変換したりできます。

このプロジェクトはAFFiNEのナレッジベースから派生し、現在は独立したライブラリとしてメンテナンスされています。まだ初期段階にあり、コンポーネントAPIと拡張APIは引き続き改良されています。

主な機能

  • 01ブロックベースのページエディターと、キャンバス風のエディターの2種類を提供。
  • 02Yjs CRDTを基盤としたリアルタイム共同編集とドキュメント履歴。
  • 03カスタムブロックとインライン埋め込みの定義。
  • 04Reactなど複数のフレームワークから利用できるネイティブWeb Components。
  • 05スナップショットとトランスフォーマーによるMarkdown・HTMLの変換。

ユースケース

  • Webアプリケーション内にNotion風のブロックエディターを構築する。
  • 既存のプロダクトに共同編集可能なリッチテキスト編集機能を追加する。
  • BlockSuiteのバニラフレームワークとコンポーネントを再利用して、独自のエディターを作成する。
  • 複数のエディター画面で1つのドキュメントを共有する。

クイックスタート

  1. 1

    BlockSuite パッケージのインストール方法について、クイックスタートガイドを読む

  2. 2

    presets パッケージに含まれるプリセットエディターから始める

使う前に知っておきたいこと

  • README によると、BlockSuite はまだ初期段階にあるため、コンポーネントや拡張 API は今後変更される可能性があります。
  • ソースからビルドするには、別途 BUILDING.md のガイドに従う必要があります。
  • ライセンスは MPL 2.0 です。弱いコピーレフトライセンスのため、変更した MPL ライセンス対象ファイルの変更内容を共有する必要があります。

収録されている特集

プライバシー重視・ローカルファーストのツール

トピック

#block-editor#rich-text-editor#collaboration#crdt#web-components#yjs#typescript#local-first#block#components

よくある質問

blocksuite とは？
ブロックエディターや共同編集アプリの構築に使える、Web Components UIとCRDTベースのデータレイヤーを備えたTypeScriptツールキット。 BlockSuiteは、エディターや共同編集アプリを構築するためのツールキットです。ドキュメントの状態をモデル化するヘッドレスフレームワークに加え、ブロックベースのドキュメントエディター（PageEditor）や、グラフィックツール風のキャンバスエディター（EdgelessEditor）など、同じリッチテキスト機能を備えた編集コンポーネントを提供します。
blocksuite は無料で使えますか？ライセンスは？
blocksuite は MPL-2.0 ライセンスのオープンソースです。商用製品で使う前にライセンス条件を確認してください。
blocksuite は今もメンテナンスされていますか？
活発にメンテナンス中。blocksuite の最終コミットは 2026年11月6日 です。
blocksuite は何に使えますか？
Webアプリケーション内にNotion風のブロックエディターを構築する。 既存のプロダクトに共同編集可能なリッチテキスト編集機能を追加する。 BlockSuiteのバニラフレームワークとコンポーネントを再利用して、独自のエディターを作成する。 複数のエディター画面で1つのドキュメントを共有する。
blocksuite のインストール方法は？
BlockSuite パッケージのインストール方法について、クイックスタートガイドを読む presets パッケージに含まれるプリセットエディターから始める
blocksuite はどこで入手できますか？
ソースコードとインストール手順は GitHub にあります：https://github.com/toeverything/blocksuite

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

関連プロジェクト