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

#editor #richtext #react #webdev

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>
      <button onClick={() => editor.chain().focus().toggleItalic().run()}>
        Italic
      </button>
      <button onClick={() => editor.chain().focus().toggleHeading({ level: 2 }).run()}>
        H2
      </button>
      <button onClick={() => editor.chain().focus().toggleBulletList().run()}>
        List
      </button>
    </div>
  );
}

Extensions

import StarterKit from '@tiptap/starter-kit';
import Link from '@tiptap/extension-link';
import Image from '@tiptap/extension-image';
import Placeholder from '@tiptap/extension-placeholder';
import CodeBlockLowlight from '@tiptap/extension-code-block-lowlight';
import TaskList from '@tiptap/extension-task-list';
import TaskItem from '@tiptap/extension-task-item';

const editor = useEditor({
  extensions: [
    StarterKit,
    Link.configure({ openOnClick: false }),
    Image,
    Placeholder.configure({ placeholder: 'Start writing...' }),
    CodeBlockLowlight.configure({ lowlight }),
    TaskList,
    TaskItem.configure({ nested: true }),
  ],
});

Key Features

Headless — bring your own UI
100+ extensions — links, images, tables, mentions, collaboration
Real-time collaboration — Yjs integration
Custom extensions — build your own
Markdown — import/export
Framework support — React, Vue, Svelte, vanilla

Why Tiptap

Feature	Tiptap	CKEditor	Quill
Headless	Yes	No	No
Extensions	100+	Plugins	Limited
Collaboration	Yes (Yjs)	Premium	No
React/Vue	Native	Wrapper	Wrapper
Bundle size	Modular	Heavy	Medium
Customization	Full	Theme	Limited