Tiptap (Free Core)

Headless rich text editor built on ProseMirror. Best developer experience with an extensive extension library.

Enhanced Demo
Full toolbar, markdown shortcuts, plus HTML/JSON/Markdown output views. Try keyboard shortcuts or markdown input rules.
 
Markdown Input Rules
 
Tiptap supports markdown-style shortcuts as you type:
 
Type thisTo get
# + spaceHeading 1
## + spaceHeading 2
- or *Bullet list
1.Ordered list
>Blockquote
``` + EnterCode block
---Horizontal rule
**text**Bold
*text*Italic
~~text~~Strikethrough
`text`Inline code
 
Setup
 
typescript 
 
import { Editor } from '@tiptap/core';
import StarterKit from '@tiptap/starter-kit';

const editor = new Editor({
  element: document.getElementById('editor'),
  extensions: [StarterKit],
  content: '<p>Hello World</p>',
  onUpdate: ({ editor }) => {
    console.log(editor.getHTML());   // HTML output
    console.log(editor.getJSON());   // JSON output
  }
});

// Chainable commands API
editor.chain()
  .focus()
  .toggleBold()
  .run();
 
Custom Extensions
 
Build your own extensions with Tiptap's clean API:
 
typescript 
 
import { Extension } from '@tiptap/core';

// Custom extension: character counter
const CharacterCount = Extension.create({
  name: 'characterCount',
  
  addStorage() {
    return { characters: 0, words: 0 };
  },
  
  onUpdate() {
    const text = this.editor.state.doc.textContent;
    this.storage.characters = text.length;
    this.storage.words = text.split(/\s+/).filter(Boolean).length;
  }
});

// Use: editor.storage.characterCount.words
 
Extension Ecosystem
 
StarterKit
 
Bold, italic, headings, lists, code blocks, blockquotes, history — the essentials.
 Free
 
Table
 
Full table editing with row/column operations, resize, and header toggling.
 Free
 
Mention
 
@-mentions with autocomplete and custom rendering.
 Free
 
Collaboration
 
Real-time collaboration via Yjs. Cursor awareness and conflict resolution.
 Pro
 
AI Extension
 
AI-powered text generation, completion, and transformation.
 Pro
 
File Handler
 
Drag-and-drop file handling with custom upload logic.
 Pro
 
Strengths
 
  • Best DX of any ProseMirror wrapper
    •  
  • 150+ extensions available
    •  
  • Framework support (React, Vue, Svelte)
    •  
  • Chainable commands API
    •  
  • Headless — bring your own UI
    •  
  • Active development and community
 
Weaknesses
 
  • Not markdown-native (HTML/JSON internally)
    •  
  • Pro extensions require paid plan
    •  
  • React gets more attention than Svelte
    •  
  • Vendor risk (commercial backing)