ueberdosis/tiptap

これは何？

主な機能

• 01組み込みUIのないヘッドレス設計で、スタイルを自由に制御できる
• 02フレームワーク非依存で、Vue、React、プレーンなJavaScriptから利用可能
• 03100種類を超える拡張機能を備えた拡張システム
• 04独自のコンテンツモデルに合わせたカスタム拡張機能やノードを作成可能
• 05ProseMirrorをベースに構築

ユースケース

• 独自のデザインでWebアプリにリッチテキスト編集欄を追加する
• ReactまたはVueでNotion風のブロックエディターを構築する
• HocuspocusとYjsを使って共同編集機能を実現する

クイックスタート

1. 1

   プロジェクトにTiptap agent skillをインストールします

   npx skills add ueberdosis/tiptap --skill tiptap
2. 2

   Tiptapのドキュメントにあるインストールガイドに従います

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

• !ヘッドレスエディターのため、ユーザーインターフェースは付属していません。独自のUIを構築する必要があります。
• !Pro Extensionsを利用するには、有効なサブスクリプションが必要です。

トピック

よくある質問

tiptap とは？

ProseMirrorをベースにした、拡張機能が豊富なヘッドレスかつフレームワーク非依存のリッチテキストエディター。 Tiptapはヘッドレスのリッチテキストエディターです。UIを標準で備えていないため、開発者はエディターの見た目やレイアウトを自由に決められ、ドキュメントの状態管理、書式設定、編集動作はフレームワークが担います。ProseMirrorライブラリをベースに構築されており、Vue、React、プレーンなJavaScriptで利用できます。

tiptap は無料で使えますか？ライセンスは？

tiptap は MIT ライセンスのオープンソースです。商用製品で使う前にライセンス条件を確認してください。

tiptap は今もメンテナンスされていますか？

活発にメンテナンス中。tiptap の最終コミットは 2026年10月20日 です。

tiptap は何に使えますか？

独自のデザインでWebアプリにリッチテキスト編集欄を追加する ReactまたはVueでNotion風のブロックエディターを構築する HocuspocusとYjsを使って共同編集機能を実現する

tiptap のインストール方法は？

プロジェクトにTiptap agent skillをインストールします: npx skills add ueberdosis/tiptap --skill tiptap Tiptapのドキュメントにあるインストールガイドに従います

tiptap はどこで入手できますか？

ソースコードとインストール手順は GitHub にあります：https://github.com/ueberdosis/tiptap