Tiptap Has a Free Rich Text Editor — Here's How to Use It

Building a rich text editor from scratch takes months. CKEditor is bloated. Tiptap gives you a headless, extensible editor framework built on ProseMirror — works with React, Vue, and vanilla JS. What Is Tiptap? Tiptap is a headless rich text editor framework for the web. It's built on ProseMirror — the same engine behind the New York Times and Atlassian editors. Quick Start npm install @tiptap/react @tiptap/starter-kit import { useEditor , EditorContent } from ' @tiptap/react ' ; import StarterKit from ' @tiptap/starter-kit ' ; function Editor () { const editor = useEditor ({ extensions : [ StarterKit ], content : ' <p>Start writing...</p> ' , }); return ( < div > < MenuBar editor = { editor } /> < EditorContent editor = { editor } /> </ div > ); } function MenuBar ({ editor }) { if ( ! editor ) return null ; return ( < div > < button onClick = { () => editor . chain (). focus (). toggleBold (). run () } className = { editor . isActive ( ' bold ' ) ? ' active ' : '' } > Bold </ button