BlockNote

TypeCell 傘下のオープンソース — Notion 風ブロック編集を React に載せる

1 — 概要
位置づけ

BlockNote は、ブロック指向の React 向けリッチテキストエディタだ。内部は ProseMirror と Tiptap を土台にし、拡張可能なスキーマとモダンな編集体験（スラッシュメニュー、ネスト、D&D など）をまとめて提供する。公式サイト・ドキュメント・例は blocknotejs.org。

0.48npm 版（例: core）
pnpmNx モノレポ
MPLコア既定ライセンス
Vitest+ Playwright E2E

リポジトリ直下の package.json では pnpm start がビルド後の playground/dist を配信し、pnpm dev は例エディタの開発サーバを指す。コントリビューション手順は CONTRIBUTING.md に集約されている。

2 — パッケージ構成
依存の骨格

@blocknote/core がドキュメントモデルと編集コアを持ち、@blocknote/react がフックとビュー層を載せる。UI の見た目は @blocknote/mantine、@blocknote/shadcn、@blocknote/ariakit などのテーマパッケージから選ぶ。付随して @blocknote/code-block や @blocknote/server-util、法人向けの @blocknote/xl-* 系列がある。

flowchart TD CORE["@blocknote/core"] REACT["@blocknote/react"] MANTINE["@blocknote/mantine"] SHADCN["@blocknote/shadcn"] ARIAKIT["@blocknote/ariakit"] XL["@blocknote/xl-*"] CORE --> REACT REACT --> MANTINE REACT --> SHADCN REACT --> ARIAKIT CORE -. optional .-> XL

主要パッケージ一覧

パッケージ役割（要約）ライセンス
@blocknote/coreProseMirror / Tiptap ベースのスキーマ・編集ロジックMPL-2.0
@blocknote/reactReact 向けフック・BlockNoteView 等MPL-2.0
@blocknote/mantineMantine スタイルの完成 UIMPL-2.0
@blocknote/shadcnshadcn 系 UI 統合MPL-2.0
@blocknote/ariakitAriakit ベース UIMPL-2.0
@blocknote/code-blockコードブロック周辺の補助パッケージMPL-2.0
@blocknote/server-utilサーバ用途ユーティリティMPL-2.0
@blocknote/xl-*AI・エクスポート等多列機能（例: xl-ai, xl-pdf-exporter）GPL-3.0
3 — React への組み込み
最小例

README に載っているクイックスタートは、エディタ生成フックとテーマ付きビューを 1 コンポーネントに束ねる形だ。@blocknote/react はスタイルなしの基盤、@blocknote/mantine は CSS と Mantine 連携を提供する。

import { useCreateBlockNote } from "@blocknote/react";
import { BlockNoteView } from "@blocknote/mantine";
import "@blocknote/core/fonts/inter.css";
import "@blocknote/mantine/style.css";

function App() {
  const editor = useCreateBlockNote();
  return <BlockNoteView editor={editor} />;
}
フォント: 上記は公式 README の import のまま。@blocknote/core/fonts/inter.css は BlockNote 同梱の Inter 用スタイルで、アプリ側のタイポグラフィ方針に合わせて差し替え可能。
4 — UX 機能（README ベース）
利用者向けの見え方
  • アニメーション — ブロック操作時の視覚的フィードバック
  • プレースホルダ — 空ブロックでのガイド表示
  • ドラッグ&ドロップ — ブロック並べ替え
  • ネスト / Tab — インデントと階層構造
  • スラッシュ (/) メニュー — ブロック種別のインライン挿入
  • フォーマットメニュー — 選択範囲向けの整形 UI
  • リアルタイム協調編集 — 共同編集シナリオ向け（Yjs 等のスタックに依存）

GIF デモは上流 README の .resources/*.gif を参照。本ページではオフライン自給のため埋め込みは省略している。

5 — ライセンス分界
MPL と XL

README の表記によれば、大部分は MPL-2.0。ソースを改変した場合は変更ファイルの公開が期待される一方、商用クローズドソースで利用しやすい位置づけだ。

packages/xl-* 配下と npm の @blocknote/xl-* は GPL-3.0。GPL に適合できない場合は商用ライセンスの検討が必要で、詳細は公式の Pricing ページが案内になる。

範囲ライセンスメモ
コア・react・mantine 等MPL-2.0ファイル改変時はコミュニティ還元が期待される
xl-* パッケージGPL-3.0配布形態によっては別途商用ライセンス
クレジット

BlockNote は ProseMirror（Marijn Haverbeke）と Tiptap の上に構築されている。プロジェクトは TypeCell の一部で、NLNet などのスポンサー支援の記載がある。

公式