ProseMirrorをベースにした、拡張機能が豊富なヘッドレスかつフレームワーク非依存のリッチテキストエディター。
ianstormtaylor/slate
React上に、プラグイン優先かつスキーマレスなコアを備えたリッチテキストエディタを構築するための、カスタマイズ可能なTypeScriptフレームワーク。
- スター
- 31,743
- フォーク
- 3,304
- 未解決の Issue
- 6
- 最終コミット
- 6 時間前
これは何?
Slateは、ブラウザ上でリッチテキストエディタを構築するためのフレームワークです。Reactでレンダリングする、contenteditable上のプラグイン可能なレイヤーとして設計されています。コアはドキュメントの構造をほとんど仮定しないため、固定スキーマに合わせるのではなく、コメント、埋め込みコンテンツ、メンション、テーブルなど、独自のブロック型やインライン型を定義できます。
ドキュメントはDOMに似たネスト構造のツリーとしてモデル化され、高水準のコマンドや操作を通じて変更します。データモデルは、後から共同編集機能を重ねて追加できるように設計されています。Undo/redo、HTML形式のシリアライズ、JSXによるドキュメント作成は、それぞれ別のパッケージで提供されます。
プロジェクトは複数のパッケージからなるモノレポ構成です。コアモデルのslate、レンダリング用のslate-react、Undo/redo用のslate-history、JSXでドキュメントを書くためのslate-hyperscriptがあります。現在はベータ版で、一部のAPIは今後変更される可能性があります。
主な機能
- 01プラグインベースのアーキテクチャにより、プラグインを通じて編集動作をカスタマイズできます。
- 02スキーマレスなコアにより、独自のブロック型やインライン型のノードを定義できます。
- 03DOMを参考にしたネスト構造のドキュメントツリーで、テーブルや入れ子の引用などを表現できます。
- 04slate-reactを使ってエディタをレンダリングするReactコンポーネント。
- 05Undo/redoの履歴機能をslate-historyプラグインで利用できます。
- 06slate-hyperscriptを使ってJSXでドキュメントを作成できます。
ユースケース
- 埋め込みコンテンツやコメントなどの独自ブロックを備えた、MediumやGoogle Docsのようなエディタを構築する。
- ユーザーの入力に応じて変換を行う、Markdownショートカット対応のエディタを作る。
- テキスト編集画面に@メンションやインラインのデータノードを追加する。
- フラットではないドキュメントモデルを持つリッチテキスト入力が必要なReactアプリケーションを構築する。
クイックスタート
- 1
公式ドキュメントで「Getting Started」のインストール手順を開く
使う前に知っておきたいこと
- Slateはベータ版のため、一部のAPIはまだ確定しておらず、互換性を損なう変更が加わる可能性があります。
- 大企業ではなくボランティアのコントリビューターによってメンテナンスされているため、修正を自分で提供する必要がある場合があります。
トピック
よくある質問
- slate とは?
- React上に、プラグイン優先かつスキーマレスなコアを備えたリッチテキストエディタを構築するための、カスタマイズ可能なTypeScriptフレームワーク。 Slateは、ブラウザ上でリッチテキストエディタを構築するためのフレームワークです。Reactでレンダリングする、contenteditable上のプラグイン可能なレイヤーとして設計されています。コアはドキュメントの構造をほとんど仮定しないため、固定スキーマに合わせるのではなく、コメント、埋め込みコンテンツ、メンション、テーブルなど、独自のブロック型やインライン型を定義できます。
- slate は無料で使えますか?ライセンスは?
- slate は MIT ライセンスのオープンソースです。商用製品で使う前にライセンス条件を確認してください。
- slate は今もメンテナンスされていますか?
- 活発にメンテナンス中。slate の最終コミットは 2026年10月21日 です。
- slate は何に使えますか?
- 埋め込みコンテンツやコメントなどの独自ブロックを備えた、MediumやGoogle Docsのようなエディタを構築する。 ユーザーの入力に応じて変換を行う、Markdownショートカット対応のエディタを作る。 テキスト編集画面に@メンションやインラインのデータノードを追加する。 フラットではないドキュメントモデルを持つリッチテキスト入力が必要なReactアプリケーションを構築する。
- slate のインストール方法は?
- 公式ドキュメントで「Getting Started」のインストール手順を開く
- slate はどこで入手できますか?
- ソースコードとインストール手順は GitHub にあります:https://github.com/ianstormtaylor/slate
概要はプロジェクトの README をもとに AI が生成しています。GitHub の数値は毎日更新されます。
関連プロジェクト
プラグインツールで拡張でき、HTMLではなくクリーンなJSONとしてコンテンツを保存するWeb向けブロック型テキストエディター。
Metaが開発する拡張可能なテキストエディターフレームワーク。フレームワークに依存しないコアと公式Reactバインディングを備えています。
Rustベースのツールでビルドを高速化する、フルスタックWebアプリケーション構築向けのReactフレームワーク。
動画のタイムラインやアニメーションの唯一の情報源をコードとする、Reactベースのプログラム生成動画フレームワーク。
Reactなどのビューライブラリと併用できる、予測可能で保守しやすいグローバル状態管理のためのJavaScriptライブラリ。