2025年にはどのリッチテキストエディタフレームワークを選ぶべきか？

xguru · 2025-02-10T10:21:01+09:00

最近のアプリに不可欠なリッチテキストエディタ（WYSIWYG）は、Linear、Notion、Google Docsのようなサービスで広く使われている Liveblocksは過去1年間にわたりさまざまな人気エディタを分析し、それぞれの長所と短所を把握して整理したエディタは大きく「コア型」と「機能込み型（Battery-included）」の2種類に分かれるシンプルなエディタ1つだけが必要なら軽量な選択肢を、複雑でコラボレーション機能の多いエディタを作るなら拡張性の高いものを検討すべき全体として最も無難な選択はTiptapで、機能が豊富でありながら過度に押し付けがましくないバランスを備えていると評価されているコラボレーション私たち（Liveblocks）はコラボレーション機能に注力してきており、ほとんどのエディタではYjsというCRDTライブラリを通じてリアルタイムコラボレーションを実装できる Yjsを使う場合、ドキュメントを保存しリアルタイム接続を維持するバックエンドサービスが必要になる LiveblocksはYjsをサポートする複数のエディタで利用できる汎用Yjsバックエンドを提供し、Tiptap・Lexical向けの統合ソリューションも提供している一部のエディタは独自のOT（Operational Transform）ベースのソリューションやクローズドソースのクラウドサービスを使用している場合もある始める前の注意点 Draft.jsのようにメンテナンスが終了したエディタや、小規模コミュニティしかないエディタ、あるいはプライベートソースのエディタ（Froalaなど）は除外したアクセシビリティ（a11y）は大半のエディタである程度の対応が必要であり、各エディタのドキュメントを参照する必要がある Tiptap ProseMirror上で動作するエディタで、ProseMirrorの複雑さを抽象化して開発体験を高めている大半はMITライセンスで提供されており、Tiptap CloudやLiveblocksなどでリアルタイムコラボレーション機能をすぐに利用できる機能は多いがツリーシェイキング可能な構造になっているため、コアのバンドルサイズはQuill・Slate・Lexicalより小さく保てる拡張 Tiptapはシンプルなノード、マーク、コマンド、拡張機能を追加しやすいよう設計されている必要に応じて既存の拡張の挙動をオーバーライドし、望む形にカスタマイズできる一部の「プロ」拡張機能は有料で提供される高度なカスタマイズ ProseMirrorの構造を直接扱う必要が生じることがあるコマンドチェーン（command chain）など、Tiptap独自の抽象化に慣れるまで少し時間がかかるデータモデルはスキーマ（schema）ベースで、ほとんどは自動生成されるが、高度な機能ではスキーマを直接扱うこともある制約（Drawbacks） ProseMirrorのドキュメントとTiptapのドキュメントを行き来して参照する必要があり、ガイドラインが混乱しやすいアクセシビリティ（a11y）に関する内容は実装者への依存度が高いトランザクション時にドキュメント状態を不要に走査すると、性能低下が発生する可能性があるサーバーサイド変更 Tiptap単体ではサーバー側でドキュメントを操作するのは簡単ではない ProseMirrorを直接活用して処理するか、JSONドキュメントを直接修正する方法を検討する必要がある LiveblocksはProseMirrorドキュメントの修正をより簡単にするライブラリを提供しているリアルタイムコラボレーション TiptapにはYjsでリアルタイムコラボレーション機能を提供する拡張がある Tiptap Cloud、Liveblocksなど複数のクラウドソリューションと連携できる Liveblocks Text Editorはリアルタイムコラボレーションに加え、カーソル表示、コメント、メンション、バージョン履歴など多様な機能も追加で提供する長所（Pros）優れたドキュメント優秀なリアルタイムコラボレーション機能フレームワーク非依存で、React専用パッケージも提供高い拡張性 LiveblocksまたはTiptap Cloudと統合可能短所（Cons）最適な使い方に従わないと性能が低下する可能性がある高度な機能開発のためにProseMirror内部構造の学習が必要デフォルトではサーバー側のヘッドレス編集機能が不足している BlockNote BlockNoteはTiptap・ProseMirrorを拡張したブロックベースのエディタで、Notionスタイルの機能を提供する主にReact中心で開発されているため、他のフレームワークではUIコンポーネントを活用しにくいという特徴がある Slashメニュー、フローティングツールバーなど必要な機能がすでに含まれており、手軽に使える制約 BlockNote自体はオープンソースだが、docx・PDFエクスポーターなど一部機能には有料サブスクリプションが必要リアルタイムコラボレーション Yjs・Liveblocksベースのコラボレーション機能をサポートするまもなく正式にLiveblocks連携を提供する予定長所安定性が実証されたTiptapとProseMirrorベース YjsとLiveblocksを活用したリアルタイムコラボレーション機能ブロックベース編集APIとUIコンポーネントを標準提供短所主にReact専用として設計されている基本的なエディタに比べてバンドルサイズが大きい Lexical Facebook（Meta）が支援するエディタとして大きな注目を集めている Liveblocksで数か月にわたりコメント・メンション・バージョン履歴・リアルタイムコラボレーションなどの拡張を開発した結果、まだ初期段階という印象を受ける現在は1.0未満のバージョンで、引き続き急速にアップデートされている制約「純粋デコレーション（pure decorations）」機能がないため、カーソル表示のような機能を実装するにはDOM要素をエディタ上に別途重ねる必要がある基本的なYjsコラボレーション対応は、現時点ではエッジケース処理に弱いルートノード名をハードコードしているため、文書内で複数のエディタを同時に使いにくいという問題があるリアルタイムコラボレーション Liveblocksパッケージを使わない限り、Lexicalのコラボレーション実装は難易度が高い StickyNotesの例などでは、ルートノードを複数作る際にそれぞれ別個のドキュメント・ソケット接続を使う方法で回避している開発スピードが速く、問題は継続的に解消されている Lexical拡張 Lexicalはノード階層構造を通じてデータを管理する 4種類のコアノードタイプを継承して独自ノードを作成できる React専用のLexicalComposerと@lexical/reactパッケージにより開発速度を高められるバックエンドでDOMなしにLexicalを動作させるために@lexical/headlessパッケージを利用できるサーバーサイド変更 Lexicalドキュメントをサーバー上で修正することが可能で、Liveblocksはそれを単純化するライブラリを提供している長所 Yjsを活用したリアルタイムコラボレーション機能をサポートフレームワーク非依存で、React専用パッケージも提供コメント、メンション、バージョン履歴と統合されたLiveblocksサポート Metaの支援を受ける非常に活発な開発と大規模コミュニティ短所 Yjsリアルタイムコラボレーション機能は、エッジケースを自力で処理しないと多少のバグが発生する可能性がある純粋デコレーション機能が不足しており、高度な機能のためにDOMでの回避策が必要 TiptapおよびSlateに比べてコアパッケージのサイズが大きい Slate Discord、Grafana、Sanity.io、Slite などで使われている、カスタマイズ可能なエディタフレームワーク Liveblocks は独自のコメントコンポーザーのデフォルトとして Slate を採用データ構造がシンプルで、全面的な制御が可能であり、React 以外でも汎用的に活用できる Slate の拡張さまざまなサンプルとドキュメントを通じて Slate を拡張できるプラグインエコシステムは限定的だが、自前実装が特別難しいわけではないより拡張された形として Plate というプロジェクトが存在する制限 Tiptap よりやや重いバンドルサイズを持つ標準搭載機能が少なく、自前で実装すべき部分が生じるリアルタイムコラボレーション slate-yjs、@liveblocks/yjs などを利用して Slate ドキュメントのリアルタイムコラボレーションを実装できる長所優れたドキュメント整備 Yjs を活用したリアルタイムコラボレーション機能をサポートフレームワーク非依存で、React 専用パッケージも提供高い拡張性短所 Tiptap に比べてやや大きいバンドルサイズ標準提供機能が不足 Quill Slack、LinkedIn、Figma、Zoom、Miro、Airtable などで使われてきた実績のあるエディタしばらく開発が停滞していたが、2024年4月にバージョン2をリリースし、TypeScript への再実装などによって再び活発になっている Parchment という独自のドキュメントモデルを使用しており、これは ProseMirror のスキーマに近い概念制限 Lexical のような純粋なデコレーション機能がないため、カラーハイライトや共同編集カーソルのような機能には別途 DOM 要素のオーバーレイが必要 Quill 2 向けプラグインはまだ更新されていないケースが多いコミュニティ活動は他のエディタに比べてやや少ない可能性があるリアルタイムコラボレーション Yjs と y-quill を組み合わせてリアルタイムコラボレーションを実装できる別途バックエンドとして Liveblocks などさまざまな方式を利用できる長所優れたドキュメント整備フレームワーク非依存で、React 専用パッケージも提供 Yjs を活用したリアルタイムコラボレーション機能をサポートシンプルな Delta フォーマットを使用短所標準提供機能が不足しており、プラグインもまだ Quill 2 に合わせて更新されていない純粋なデコレーション機能が不足開発の活発さが比較的低く、コミュニティも小さめ Tiptap または Slate に比べて2倍大きいバンドルサイズ ProseMirror Tiptap・Remirror・BlockNote など、複数のエディタの基盤となる中核フレームワークスキーマ、state、view、transform などの明確な構造により、安定した動作を保証する完全にゼロからコアライブラリだけでエディタを構築しようとすると、コード量は多くなりがち制限シンプルなエディタを作るだけでも相当量のコードが必要であることがドキュメントに明記されている Tiptap、Remirror、BlockNote のような上位レベルのラッパーを活用することが推奨されている学習コストはやや高いが、ドキュメントとコミュニティはよく整備されている長所活発なコミュニティと優れたドキュメント整備 Yjs を活用したリアルタイムコラボレーション機能をサポート短所基本的なサンプルの実装にも多くのコードが必要標準提供機能が不足比較的急な学習曲線 Plate Slate ベースで、AI 機能やメンション、コメントなど豊富なプラグインを提供する「全部入り」型プロジェクト必要な機能だけを選んで使えるため柔軟有料テンプレートも提供しており、React 専用に設計されている制限コラボレーションは現在 Hocuspocus のみを公式サポートしており、他の Yjs バックエンド（例: Liveblocks）と接続するには実装が必要 React 専用のため、他のフレームワークとの互換性は限定的になりうる機能が多いためバンドルサイズが大きくなりがち長所多様なプラグインライブラリを提供サーバーサイド編集機能をサポート迅速な立ち上げを助けるテンプレートを提供短所 React 専用に設計コラボレーション機能は Hocuspocus 経由でのみ利用可能基本的なエディタ群に比べてバンドルサイズが大きい Remirror ProseMirror ベースのエディタで、Tiptap に近いが、より「全部入り」なアプローチを志向している 30以上のプラグイン、React フック、国際化（i18n）、アクセシビリティ（a11y）機能などをサポート MIT ライセンスのオープンソースで、コラボレーション機能も提供する制限 Tiptap よりコミュニティ規模が小さく、更新が遅い場合がある React 専用機能が多く、他の環境では制約がある可能性があるバンドルサイズはやや大きめリアルタイムコラボレーション Remirror は YjsExtension を通じて Yjs と Liveblocks のコラボレーションをサポートする長所優れたドキュメント整備多様なプラグインライブラリを提供 Yjs と Liveblocks を活用したコラボレーション機能をサポート短所 React 専用に設計より大きいバンドルサイズ更新頻度が低く、コミュニティが小さい Editor.js ブロック単位の編集をサポートするリッチテキストエディタで、多様なプラグインと大きなコミュニティを持つブロック、インライン、チューン（tune）で構成されたデータ構造を持つフレームワークに依存せず、ツールチップなど複数の便利機能が組み込まれている制限リアルタイムコラボレーションの公式サポートはなく、一部試みられた PR はあるものの、保守状況は不透明基本パッケージだけでも容量が大きめリアルタイムコラボレーション公式にはサポートしていない長所多機能で充実したプラグインライブラリを提供複数の CMS やバックエンドフレームワークとのコミュニティ主導の統合をサポート短所より大きいバンドルサイズリアルタイムコラボレーション機能がない CKEditor 20年以上の歴史を持つエディタで、現行バージョン（5）はモダンな構造と豊富な機能を提供する Angular、React、Vue、Next など多様なフレームワークをサポート GPL-2 ライセンスで配布されており、特定の状況ではオープンソース化が求められ、商用利用には別途ライセンス購入が必要制限プラグインの多くが有料であり、コラボレーション機能も CKEditor のクラウドサービスでしか利用できない GPL-2 ライセンスとロードベース課金体系が多くのユーザーにとって障壁になりうるリアルタイムコラボレーション CKEditor の独自クラウドサービス以外のコラボレーションソリューションは提供されていない長所標準で非常に豊富な機能を提供多様なフレームワークと互換性がある短所コラボレーション機能が CKEditor のクラウドサービスに依存 GPL-2 ライセンスが一部ユーザーにとって制約になりうる一部機能は使用量ベースの料金体系で提供される TinyMCE CKEditor と同様に20年以上の歴史を持つエディタで、GPL-2 ライセンスに従う Angular、React、Vue など多様な環境で利用できるロード数ベースの課金方式を持つクラウドコラボレーションサービスが存在する制限 Markdown、メンション、コメント、高度なタイポグラフィなど主要機能が有料プラグインとして提供されるサーバー側でドキュメントを操作する方法に関するドキュメントが不足しているリアルタイムコラボレーション TinyMCE 独自のコラボレーションソリューション以外の方法は公開されていない長所標準で非常に豊富な機能を提供多様なフレームワークと互換性がある短所コラボレーション機能が Tiny Cloud サービスに依存 GPL-2 ライセンスが一部ユーザーにとって制約になりうる一部機能は使用量ベースの料金体系で提供されるエディタ比較の要約 ProseMirror Framework: Vanilla Collaboration: Yjs Comments: 提供なし（サンプルあり） Mentions: Suggestion プラグインを使用可能 Server-side editing: prosemirror-state および prosemirror-model により Node.js でドキュメントの編集が可能 License: MIT GitHub Stars: ⭐ 7.8k Tiptap Framework: Vanilla, React, Vue, Svelte Collaboration: Liveblocks, Tiptap Cloud, Yjs Comments: Liveblocks との統合により設定不要で利用可能、カスタマイズ可能 Mentions: Liveblocks との統合により設定不要で利用可能、カスタマイズ可能 Server-side editing: ProseMirror または Liveblocks の Node.js ProseMirror パッケージを通じて利用可能 License: MIT GitHub Stars: ⭐ 20k Remirror Framework: React Collaboration: Yjs Comments: 利用可能 Mentions: 利用可能 Server-side editing: ProseMirror または Liveblocks の Node.js ProseMirror パッケージを通じて利用可能 License: MIT GitHub Stars: ⭐ 2.8k BlockNote Framework: React Collaboration: Yjs Comments: Liveblocks またはカスタムサンプルを通じて利用可能 Mentions: 利用可能 Server-side editing: ProseMirror または Liveblocks の Node.js ProseMirror パッケージを通じて利用可能 License: MPL 2 GitHub Stars: ⭐ 7.1k Lexical Framework: Vanilla, React, iOS, その他 Collaboration: Liveblocks, Yjs Comments: Liveblocks と統合して設定不要で利用可能、カスタマイズ可能 Mentions: Liveblocks と統合して設定不要で利用可能、カスタマイズ可能 Server-side editing: Lexical または Liveblocks の Node.js Lexical パッケージを通じて利用可能 License: MIT GitHub Stars: ⭐ 20k Slate Framework: Vanilla, React Collaboration: Yjs Comments: 提供なし（サンプルあり） Mentions: サンプルあり Server-side editing: 提供なし License: MIT GitHub Stars: ⭐ 30k Plate Framework: React 専用 Collaboration: Hocuspocus (Yjs) Comments: 利用可能 Mentions: 利用可能 Server-side editing: 利用可能 License: MIT GitHub Stars: ⭐ 13k Quill Framework: Vanilla Collaboration: Yjs Comments: 提供なし（サンプルあり） Mentions: サードパーティライブラリを使用可能 Server-side editing: 提供なし License: BSD-3 GitHub Stars: ⭐ 45k Editor.js Framework: Vanilla Collaboration: 非対応（サードパーティのサンプルあり） Comments: 提供なし（サードパーティライブラリあり） Mentions: 提供なし（サンプルあり） Server-side editing: 提供なし License: Apache 2 GitHub Stars: ⭐ 28k CKEditor Framework: Vanilla, React, Vue, Angular Collaboration: CKEditor Cloud と統合 Comments: 利用可能 Mentions: 利用可能 Server-side editing: 利用可能 License: GPL-2+ GitHub Stars: ⭐ 8.8k TinyMCE Framework: Vanilla, React, Vue, Angular, その他 Collaboration: Tiny Cloud と統合 Comments: Tiny Cloud と統合 Mentions: 利用可能 Server-side editing: 提供なし License: GPL-2+ GitHub Stars: ⭐ 15k

(liveblocks.io)

65 ポイント投稿者 xguru 2025-02-10 | 14件のコメント | WhatsAppで共有

最近のアプリに不可欠なリッチテキストエディタ（WYSIWYG）は、Linear、Notion、Google Docsのようなサービスで広く使われている
Liveblocksは過去1年間にわたりさまざまな人気エディタを分析し、それぞれの長所と短所を把握して整理した
エディタは大きく「コア型」と「機能込み型（Battery-included）」の2種類に分かれる
シンプルなエディタ1つだけが必要なら軽量な選択肢を、複雑でコラボレーション機能の多いエディタを作るなら拡張性の高いものを検討すべき
全体として最も無難な選択はTiptapで、機能が豊富でありながら過度に押し付けがましくないバランスを備えていると評価されている
コラボレーション
- 私たち（Liveblocks）はコラボレーション機能に注力してきており、ほとんどのエディタではYjsというCRDTライブラリを通じてリアルタイムコラボレーションを実装できる
- Yjsを使う場合、ドキュメントを保存しリアルタイム接続を維持するバックエンドサービスが必要になる
- LiveblocksはYjsをサポートする複数のエディタで利用できる汎用Yjsバックエンドを提供し、Tiptap・Lexical向けの統合ソリューションも提供している
- 一部のエディタは独自のOT（Operational Transform）ベースのソリューションやクローズドソースのクラウドサービスを使用している場合もある
始める前の注意点
- Draft.jsのようにメンテナンスが終了したエディタや、小規模コミュニティしかないエディタ、あるいはプライベートソースのエディタ（Froalaなど）は除外した
- アクセシビリティ（a11y）は大半のエディタである程度の対応が必要であり、各エディタのドキュメントを参照する必要がある

Tiptap

ProseMirror上で動作するエディタで、ProseMirrorの複雑さを抽象化して開発体験を高めている
大半はMITライセンスで提供されており、Tiptap CloudやLiveblocksなどでリアルタイムコラボレーション機能をすぐに利用できる
機能は多いがツリーシェイキング可能な構造になっているため、コアのバンドルサイズはQuill・Slate・Lexicalより小さく保てる
拡張
- Tiptapはシンプルなノード、マーク、コマンド、拡張機能を追加しやすいよう設計されている
- 必要に応じて既存の拡張の挙動をオーバーライドし、望む形にカスタマイズできる
- 一部の「プロ」拡張機能は有料で提供される
高度なカスタマイズ
- ProseMirrorの構造を直接扱う必要が生じることがある
- コマンドチェーン（command chain）など、Tiptap独自の抽象化に慣れるまで少し時間がかかる
- データモデルはスキーマ（schema）ベースで、ほとんどは自動生成されるが、高度な機能ではスキーマを直接扱うこともある
制約（Drawbacks）
- ProseMirrorのドキュメントとTiptapのドキュメントを行き来して参照する必要があり、ガイドラインが混乱しやすい
- アクセシビリティ（a11y）に関する内容は実装者への依存度が高い
- トランザクション時にドキュメント状態を不要に走査すると、性能低下が発生する可能性がある
サーバーサイド変更
- Tiptap単体ではサーバー側でドキュメントを操作するのは簡単ではない
- ProseMirrorを直接活用して処理するか、JSONドキュメントを直接修正する方法を検討する必要がある
- LiveblocksはProseMirrorドキュメントの修正をより簡単にするライブラリを提供している
リアルタイムコラボレーション
- TiptapにはYjsでリアルタイムコラボレーション機能を提供する拡張がある
- Tiptap Cloud、Liveblocksなど複数のクラウドソリューションと連携できる
- Liveblocks Text Editorはリアルタイムコラボレーションに加え、カーソル表示、コメント、メンション、バージョン履歴など多様な機能も追加で提供する
長所（Pros）
- 優れたドキュメント
- 優秀なリアルタイムコラボレーション機能
- フレームワーク非依存で、React専用パッケージも提供
- 高い拡張性
- LiveblocksまたはTiptap Cloudと統合可能
短所（Cons）
- 最適な使い方に従わないと性能が低下する可能性がある
- 高度な機能開発のためにProseMirror内部構造の学習が必要
- デフォルトではサーバー側のヘッドレス編集機能が不足している

BlockNote

BlockNoteはTiptap・ProseMirrorを拡張したブロックベースのエディタで、Notionスタイルの機能を提供する
主にReact中心で開発されているため、他のフレームワークではUIコンポーネントを活用しにくいという特徴がある
Slashメニュー、フローティングツールバーなど必要な機能がすでに含まれており、手軽に使える
制約
- BlockNote自体はオープンソースだが、docx・PDFエクスポーターなど一部機能には有料サブスクリプションが必要
リアルタイムコラボレーション
- Yjs・Liveblocksベースのコラボレーション機能をサポートする
- まもなく正式にLiveblocks連携を提供する予定
長所
- 安定性が実証されたTiptapとProseMirrorベース
- YjsとLiveblocksを活用したリアルタイムコラボレーション機能
- ブロックベース編集APIとUIコンポーネントを標準提供
短所
- 主にReact専用として設計されている
- 基本的なエディタに比べてバンドルサイズが大きい

Lexical

Facebook（Meta）が支援するエディタとして大きな注目を集めている
Liveblocksで数か月にわたりコメント・メンション・バージョン履歴・リアルタイムコラボレーションなどの拡張を開発した結果、まだ初期段階という印象を受ける
現在は1.0未満のバージョンで、引き続き急速にアップデートされている
制約
- 「純粋デコレーション（pure decorations）」機能がないため、カーソル表示のような機能を実装するにはDOM要素をエディタ上に別途重ねる必要がある
- 基本的なYjsコラボレーション対応は、現時点ではエッジケース処理に弱い
- ルートノード名をハードコードしているため、文書内で複数のエディタを同時に使いにくいという問題がある
リアルタイムコラボレーション
- Liveblocksパッケージを使わない限り、Lexicalのコラボレーション実装は難易度が高い
- StickyNotesの例などでは、ルートノードを複数作る際にそれぞれ別個のドキュメント・ソケット接続を使う方法で回避している
- 開発スピードが速く、問題は継続的に解消されている
Lexical拡張
- Lexicalはノード階層構造を通じてデータを管理する
- 4種類のコアノードタイプを継承して独自ノードを作成できる
- React専用のLexicalComposerと@lexical/reactパッケージにより開発速度を高められる
- バックエンドでDOMなしにLexicalを動作させるために@lexical/headlessパッケージを利用できる
サーバーサイド変更
- Lexicalドキュメントをサーバー上で修正することが可能で、Liveblocksはそれを単純化するライブラリを提供している
長所
- Yjsを活用したリアルタイムコラボレーション機能をサポート
- フレームワーク非依存で、React専用パッケージも提供
- コメント、メンション、バージョン履歴と統合されたLiveblocksサポート
- Metaの支援を受ける非常に活発な開発と大規模コミュニティ
短所
- Yjsリアルタイムコラボレーション機能は、エッジケースを自力で処理しないと多少のバグが発生する可能性がある
- 純粋デコレーション機能が不足しており、高度な機能のためにDOMでの回避策が必要
- TiptapおよびSlateに比べてコアパッケージのサイズが大きい

Slate

Discord、Grafana、Sanity.io、Slite などで使われている、カスタマイズ可能なエディタフレームワーク
Liveblocks は独自のコメントコンポーザーのデフォルトとして Slate を採用
データ構造がシンプルで、全面的な制御が可能であり、React 以外でも汎用的に活用できる
Slate の拡張
- さまざまなサンプルとドキュメントを通じて Slate を拡張できる
- プラグインエコシステムは限定的だが、自前実装が特別難しいわけではない
- より拡張された形として Plate というプロジェクトが存在する
制限
- Tiptap よりやや重いバンドルサイズを持つ
- 標準搭載機能が少なく、自前で実装すべき部分が生じる
リアルタイムコラボレーション
- slate-yjs、@liveblocks/yjs などを利用して Slate ドキュメントのリアルタイムコラボレーションを実装できる
長所
- 優れたドキュメント整備
- Yjs を活用したリアルタイムコラボレーション機能をサポート
- フレームワーク非依存で、React 専用パッケージも提供
- 高い拡張性
短所
- Tiptap に比べてやや大きいバンドルサイズ
- 標準提供機能が不足

Quill

Slack、LinkedIn、Figma、Zoom、Miro、Airtable などで使われてきた実績のあるエディタ
しばらく開発が停滞していたが、2024年4月にバージョン2をリリースし、TypeScript への再実装などによって再び活発になっている
Parchment という独自のドキュメントモデルを使用しており、これは ProseMirror のスキーマに近い概念
制限
- Lexical のような純粋なデコレーション機能がないため、カラーハイライトや共同編集カーソルのような機能には別途 DOM 要素のオーバーレイが必要
- Quill 2 向けプラグインはまだ更新されていないケースが多い
- コミュニティ活動は他のエディタに比べてやや少ない可能性がある
リアルタイムコラボレーション
- Yjs と y-quill を組み合わせてリアルタイムコラボレーションを実装できる
- 別途バックエンドとして Liveblocks などさまざまな方式を利用できる
長所
- 優れたドキュメント整備
- フレームワーク非依存で、React 専用パッケージも提供
- Yjs を活用したリアルタイムコラボレーション機能をサポート
- シンプルな Delta フォーマットを使用
短所
- 標準提供機能が不足しており、プラグインもまだ Quill 2 に合わせて更新されていない
- 純粋なデコレーション機能が不足
- 開発の活発さが比較的低く、コミュニティも小さめ
- Tiptap または Slate に比べて2倍大きいバンドルサイズ

ProseMirror

Tiptap・Remirror・BlockNote など、複数のエディタの基盤となる中核フレームワーク
スキーマ、state、view、transform などの明確な構造により、安定した動作を保証する
完全にゼロからコアライブラリだけでエディタを構築しようとすると、コード量は多くなりがち
制限
- シンプルなエディタを作るだけでも相当量のコードが必要であることがドキュメントに明記されている
- Tiptap、Remirror、BlockNote のような上位レベルのラッパーを活用することが推奨されている
- 学習コストはやや高いが、ドキュメントとコミュニティはよく整備されている
長所
- 活発なコミュニティと優れたドキュメント整備
- Yjs を活用したリアルタイムコラボレーション機能をサポート
短所
- 基本的なサンプルの実装にも多くのコードが必要
- 標準提供機能が不足
- 比較的急な学習曲線

Plate

Slate ベースで、AI 機能やメンション、コメントなど豊富なプラグインを提供する「全部入り」型プロジェクト
必要な機能だけを選んで使えるため柔軟
有料テンプレートも提供しており、React 専用に設計されている
制限
- コラボレーションは現在 Hocuspocus のみを公式サポートしており、他の Yjs バックエンド（例: Liveblocks）と接続するには実装が必要
- React 専用のため、他のフレームワークとの互換性は限定的になりうる
- 機能が多いためバンドルサイズが大きくなりがち
長所
- 多様なプラグインライブラリを提供
- サーバーサイド編集機能をサポート
- 迅速な立ち上げを助けるテンプレートを提供
短所
- React 専用に設計
- コラボレーション機能は Hocuspocus 経由でのみ利用可能
- 基本的なエディタ群に比べてバンドルサイズが大きい

Remirror

ProseMirror ベースのエディタで、Tiptap に近いが、より「全部入り」なアプローチを志向している
30以上のプラグイン、React フック、国際化（i18n）、アクセシビリティ（a11y）機能などをサポート
MIT ライセンスのオープンソースで、コラボレーション機能も提供する
制限
- Tiptap よりコミュニティ規模が小さく、更新が遅い場合がある
- React 専用機能が多く、他の環境では制約がある可能性がある
- バンドルサイズはやや大きめ
リアルタイムコラボレーション
- Remirror は YjsExtension を通じて Yjs と Liveblocks のコラボレーションをサポートする
長所
- 優れたドキュメント整備
- 多様なプラグインライブラリを提供
- Yjs と Liveblocks を活用したコラボレーション機能をサポート
短所
- React 専用に設計
- より大きいバンドルサイズ
- 更新頻度が低く、コミュニティが小さい

Editor.js

ブロック単位の編集をサポートするリッチテキストエディタで、多様なプラグインと大きなコミュニティを持つ
ブロック、インライン、チューン（tune）で構成されたデータ構造を持つ
フレームワークに依存せず、ツールチップなど複数の便利機能が組み込まれている
制限
- リアルタイムコラボレーションの公式サポートはなく、一部試みられた PR はあるものの、保守状況は不透明
- 基本パッケージだけでも容量が大きめ
リアルタイムコラボレーション
- 公式にはサポートしていない
長所
- 多機能で充実したプラグインライブラリを提供
- 複数の CMS やバックエンドフレームワークとのコミュニティ主導の統合をサポート
短所
- より大きいバンドルサイズ
- リアルタイムコラボレーション機能がない

CKEditor

20年以上の歴史を持つエディタで、現行バージョン（5）はモダンな構造と豊富な機能を提供する
Angular、React、Vue、Next など多様なフレームワークをサポート
GPL-2 ライセンスで配布されており、特定の状況ではオープンソース化が求められ、商用利用には別途ライセンス購入が必要
制限
- プラグインの多くが有料であり、コラボレーション機能も CKEditor のクラウドサービスでしか利用できない
- GPL-2 ライセンスとロードベース課金体系が多くのユーザーにとって障壁になりうる
リアルタイムコラボレーション
- CKEditor の独自クラウドサービス以外のコラボレーションソリューションは提供されていない
長所
- 標準で非常に豊富な機能を提供
- 多様なフレームワークと互換性がある
短所
- コラボレーション機能が CKEditor のクラウドサービスに依存
- GPL-2 ライセンスが一部ユーザーにとって制約になりうる
- 一部機能は使用量ベースの料金体系で提供される

TinyMCE

CKEditor と同様に20年以上の歴史を持つエディタで、GPL-2 ライセンスに従う
Angular、React、Vue など多様な環境で利用できる
ロード数ベースの課金方式を持つクラウドコラボレーションサービスが存在する
制限
- Markdown、メンション、コメント、高度なタイポグラフィなど主要機能が有料プラグインとして提供される
- サーバー側でドキュメントを操作する方法に関するドキュメントが不足している
リアルタイムコラボレーション
- TinyMCE 独自のコラボレーションソリューション以外の方法は公開されていない
長所
- 標準で非常に豊富な機能を提供
- 多様なフレームワークと互換性がある
短所
- コラボレーション機能が Tiny Cloud サービスに依存
- GPL-2 ライセンスが一部ユーザーにとって制約になりうる
- 一部機能は使用量ベースの料金体系で提供される

エディタ比較の要約

ProseMirror
- Framework: Vanilla
- Collaboration: Yjs
- Comments: 提供なし（サンプルあり）
- Mentions: Suggestion プラグインを使用可能
- Server-side editing: prosemirror-state および prosemirror-model により Node.js でドキュメントの編集が可能
- License: MIT
- GitHub Stars: ⭐ 7.8k
Tiptap
- Framework: Vanilla, React, Vue, Svelte
- Collaboration: Liveblocks, Tiptap Cloud, Yjs
- Comments: Liveblocks との統合により設定不要で利用可能、カスタマイズ可能
- Mentions: Liveblocks との統合により設定不要で利用可能、カスタマイズ可能
- Server-side editing: ProseMirror または Liveblocks の Node.js ProseMirror パッケージを通じて利用可能
- License: MIT
- GitHub Stars: ⭐ 20k
Remirror
- Framework: React
- Collaboration: Yjs
- Comments: 利用可能
- Mentions: 利用可能
- Server-side editing: ProseMirror または Liveblocks の Node.js ProseMirror パッケージを通じて利用可能
- License: MIT
- GitHub Stars: ⭐ 2.8k
BlockNote
- Framework: React
- Collaboration: Yjs
- Comments: Liveblocks またはカスタムサンプルを通じて利用可能
- Mentions: 利用可能
- Server-side editing: ProseMirror または Liveblocks の Node.js ProseMirror パッケージを通じて利用可能
- License: MPL 2
- GitHub Stars: ⭐ 7.1k
Lexical
- Framework: Vanilla, React, iOS, その他
- Collaboration: Liveblocks, Yjs
- Comments: Liveblocks と統合して設定不要で利用可能、カスタマイズ可能
- Mentions: Liveblocks と統合して設定不要で利用可能、カスタマイズ可能
- Server-side editing: Lexical または Liveblocks の Node.js Lexical パッケージを通じて利用可能
- License: MIT
- GitHub Stars: ⭐ 20k
Slate
- Framework: Vanilla, React
- Collaboration: Yjs
- Comments: 提供なし（サンプルあり）
- Mentions: サンプルあり
- Server-side editing: 提供なし
- License: MIT
- GitHub Stars: ⭐ 30k
Plate
- Framework: React 専用
- Collaboration: Hocuspocus (Yjs)
- Comments: 利用可能
- Mentions: 利用可能
- Server-side editing: 利用可能
- License: MIT
- GitHub Stars: ⭐ 13k
Quill
- Framework: Vanilla
- Collaboration: Yjs
- Comments: 提供なし（サンプルあり）
- Mentions: サードパーティライブラリを使用可能
- Server-side editing: 提供なし
- License: BSD-3
- GitHub Stars: ⭐ 45k
Editor.js
- Framework: Vanilla
- Collaboration: 非対応（サードパーティのサンプルあり）
- Comments: 提供なし（サードパーティライブラリあり）
- Mentions: 提供なし（サンプルあり）
- Server-side editing: 提供なし
- License: Apache 2
- GitHub Stars: ⭐ 28k
CKEditor
- Framework: Vanilla, React, Vue, Angular
- Collaboration: CKEditor Cloud と統合
- Comments: 利用可能
- Mentions: 利用可能
- Server-side editing: 利用可能
- License: GPL-2+
- GitHub Stars: ⭐ 8.8k
TinyMCE
- Framework: Vanilla, React, Vue, Angular, その他
- Collaboration: Tiny Cloud と統合
- Comments: Tiny Cloud と統合
- Mentions: 利用可能
- Server-side editing: 提供なし
- License: GPL-2+
- GitHub Stars: ⭐ 15k

14件のコメント

bingo992000 2025-03-15

SvelteKit プロジェクトに QuillJS を適用するのはかなり不便でした。React はライブラリがあるので、その分まだ楽でした。

firea32 2025-02-17

Reactのカスタムコンポーネント開発がしやすいので、tiptapがいちばん良かったです。

vb6ko 2025-02-11

私も最近調べていたのですが、よく整理してくださってありがとうございます。

韓国語のハングル入力では、特定のエディタにモバイルでの入力まわりの細かなバグがあります。
<Donghaemulgwa> と入力すると <d o ng h ae m u l g oa> になったり、
<Donghaemulgwa> と入力すると <DongDonghaehaemulmulgwagwa> になったりします。
（参考: https://github.com/ckeditor/ckeditor5/issues/13693）

私は react や vue などの framework を使っておらず、エディタのライセンス購入にも抵抗があったので、選択肢はかなり限られていました。

そこで本文以外に、以下の4つも追加で見てみました。

https://trix-editor.org/
Ruby on Rails の DHH が率いる 37signals が作ったエディタです。純粋な JavaScript（React などを使っていないという意味）で作られていて、カスタマイズもそれほど難しくありませんでした。（YouTube リンクを貼り付けたときに YouTube 埋め込みへ自動変換する、など）

https://ui.toast.com/tui-editor
NHN Cloud が作ったツールです。

https://naver.github.io/smarteditor2/demo/
NAVER SmartEditor 2 です。クラシックではありますが、韓国人向けサービスでは親しまれる使い慣れた存在になりそうだと思いました。

https://summernote.org/
韓国人が開発している Summernote です。私はこれを選びました。テーマを適用すると洗練された見た目になりますし、韓国人が必要だと考える機能がビルトインされていて便利です。（上記の YouTube リンクの埋め込み変換など）ただ、Tailwind の prose で整えようとしたところ、独自の typography スタイルがあって少し手を入れる必要がありました。

teddy418 2025-02-11

2番目のツールについて訂正したい点があります。tui editor は Toss ではなく、NHN Cloud がオープンソースとして開発しているプロジェクトです。

vb6ko 2025-02-12

そうですね、訂正します（どこで修正するのかわかりませんね..）

moderator 2025-02-16

nhncloud に修正しました。

carnoxen 2025-02-14

もともとこのサイトでは修正できません。管理者が修正するしかありません。

carnoxen 2025-02-10

ここにはありませんが、WordPress Gutenbergが独立したライブラリとして公開されてほしいと思っています。

imjlk 2025-02-11

https://github.com/Automattic/isolated-block-editor
記載はありますが、本文で紹介されたものと比べると活用事例は著しく少ないです

carnoxen 2025-02-11

おお！ Automattic社が別の名前で保管していたんですね。会社でWordPressを使っていた当時、いちばん気に入っていた機能です。

winterjung 2025-02-10

リンクは liveblocks.io のブログですが、プレビュー URL が (github.com/US-Artificial-Intelligence) と表示されていますね？

xguru 2025-02-10

投稿時に前の記事のURLをそのまま使ってしまい、修正の際に問題がありました。修正しました。

tsboard 2025-02-10

私は初めてのプロジェクトで tiptap を導入して使ってみたのですが、ほかの従来型エディタと比べて、ドキュメントも機能も実装もどれも優れていて、満足しながら使っています。必要なものだけを的確に持ってきて、自分好みに UI を実装して使える感覚がとても良かったのですが、ひとつ少し大変だったのは、その“自分好み”に作り込むための作業量が並大抵ではなかったことです……！

babadudu 2026-03-30

TinyMCEは良いです