Quickstart

Get up and running with Tiptap in just a few minutes. This guide will walk you through creating a basic editor with common formatting options.

Make sure you’ve installed Tiptap before following this guide.

Basic Setup

Let’s create a simple editor with the starter kit. Choose your framework below:

React
Vue 3
Vanilla JS

Create the Editor

Here’s a minimal React example using Tiptap:

import { useEditor, EditorContent } from '@tiptap/react'
import StarterKit from '@tiptap/starter-kit'

export default function Editor() {
  const editor = useEditor({
    extensions: [StarterKit],
    content: '<p>Hello World! 🌎</p>',
  })

  return <EditorContent editor={editor} />
}

What’s Happening?

Import the necessary packages

useEditor - A React hook to create and manage the editor instance
EditorContent - A React component that renders the editor
StarterKit - A bundle of essential extensions

Initialize the editor with useEditor

The useEditor hook takes a configuration object with:

extensions - Array of extensions to enable
content - Initial HTML content for the editor

Render the editor

The EditorContent component takes the editor instance and renders the editing interface

Here’s a more complete example with a formatting toolbar (from demos/src/Examples/Default/React/index.tsx):

import { TextStyleKit } from '@tiptap/extension-text-style'
import { EditorContent, useEditor } from '@tiptap/react'
import StarterKit from '@tiptap/starter-kit'
import React from 'react'

const extensions = [TextStyleKit, StarterKit]

export default function Editor() {
  const editor = useEditor({
    extensions,
    content: `
      <h2>Hi there,</h2>
      <p>
        This is a <em>basic</em> example of <strong>Tiptap</strong>. 
        Sure, there are all kinds of basic text styles you'd probably 
        expect from a text editor. But wait until you see the lists:
      </p>
      <ul>
        <li>That's a bullet list with one …</li>
        <li>… or two list items.</li>
      </ul>
      <p>
        Isn't that great? And all of that is editable. But wait, 
        there's more. Let's try a code block:
      </p>
      <pre><code class="language-css">body {
  display: none;
}</code></pre>
      <blockquote>
        Wow, that's amazing. Good work! 👏
      </blockquote>
    `,
  })

  if (!editor) {
    return null
  }

  return (
    <div>
      <div className="toolbar">
        <button
          onClick={() => editor.chain().focus().toggleBold().run()}
          className={editor.isActive('bold') ? 'is-active' : ''}
        >
          Bold
        </button>
        <button
          onClick={() => editor.chain().focus().toggleItalic().run()}
          className={editor.isActive('italic') ? 'is-active' : ''}
        >
          Italic
        </button>
        <button
          onClick={() => editor.chain().focus().toggleHeading({ level: 2 }).run()}
          className={editor.isActive('heading', { level: 2 }) ? 'is-active' : ''}
        >
          H2
        </button>
        <button
          onClick={() => editor.chain().focus().toggleBulletList().run()}
          className={editor.isActive('bulletList') ? 'is-active' : ''}
        >
          Bullet List
        </button>
      </div>
      <EditorContent editor={editor} />
    </div>
  )
}

Cleanup

Always destroy the editor when the component unmounts to prevent memory leaks. The useEditor hook handles this automatically.

Create the Editor

Here’s a minimal Vue 3 example (from demos/src/Overview/Installation/Vue/index.vue):

<template>
  <editor-content :editor="editor" />
</template>

<script>
import StarterKit from '@tiptap/starter-kit'
import { Editor, EditorContent } from '@tiptap/vue-3'

export default {
  components: {
    EditorContent,
  },

  data() {
    return {
      editor: null,
    }
  },

  mounted() {
    this.editor = new Editor({
      content: '<p>Hello World! 🌎</p>',
      extensions: [StarterKit],
    })
  },

  beforeUnmount() {
    this.editor.destroy()
  },
}
</script>

What’s Happening?

Import the packages

Editor - The core editor class
EditorContent - Vue component that renders the editor
StarterKit - Essential extensions bundle

Initialize in mounted()

Create the editor instance in the mounted lifecycle hook

Clean up in beforeUnmount()

Always destroy the editor to prevent memory leaks

Complete Example with Composition API

<template>
  <div>
    <div class="toolbar" v-if="editor">
      <button
        @click="editor.chain().focus().toggleBold().run()"
        :class="{ 'is-active': editor.isActive('bold') }"
      >
        Bold
      </button>
      <button
        @click="editor.chain().focus().toggleItalic().run()"
        :class="{ 'is-active': editor.isActive('italic') }"
      >
        Italic
      </button>
      <button
        @click="editor.chain().focus().toggleHeading({ level: 2 }).run()"
        :class="{ 'is-active': editor.isActive('heading', { level: 2 }) }"
      >
        H2
      </button>
    </div>
    <editor-content :editor="editor" />
  </div>
</template>

<script setup>
import { useEditor, EditorContent } from '@tiptap/vue-3'
import StarterKit from '@tiptap/starter-kit'

const editor = useEditor({
  content: '<p>Hello World! 🌎</p>',
  extensions: [StarterKit],
})
</script>

Create the Editor

Here’s how to use Tiptap with vanilla JavaScript:

import { Editor } from '@tiptap/core'
import StarterKit from '@tiptap/starter-kit'

const editor = new Editor({
  element: document.querySelector('.editor'),
  extensions: [StarterKit],
  content: '<p>Hello World! 🌎</p>',
})

What’s Happening?

Import the packages

Import Editor from @tiptap/core and the extensions you need

Create the editor instance

Pass a configuration object with:

element - DOM element to mount the editor
extensions - Array of extensions
content - Initial HTML content

The editor is ready

You can now interact with the editor using its API

<!DOCTYPE html>
<html>
<head>
  <style>
    .toolbar button.is-active {
      background: #333;
      color: white;
    }
    
    .tiptap {
      padding: 1rem;
      border: 1px solid #ccc;
      min-height: 200px;
    }
  </style>
</head>
<body>
  <div class="toolbar">
    <button id="bold">Bold</button>
    <button id="italic">Italic</button>
    <button id="heading">H2</button>
  </div>
  <div class="editor"></div>

  <script type="module">
    import { Editor } from '@tiptap/core'
    import StarterKit from '@tiptap/starter-kit'

    const editor = new Editor({
      element: document.querySelector('.editor'),
      extensions: [StarterKit],
      content: '<p>Hello World! 🌎</p>',
    })

    // Add toolbar functionality
    document.getElementById('bold').addEventListener('click', () => {
      editor.chain().focus().toggleBold().run()
    })

    document.getElementById('italic').addEventListener('click', () => {
      editor.chain().focus().toggleItalic().run()
    })

    document.getElementById('heading').addEventListener('click', () => {
      editor.chain().focus().toggleHeading({ level: 2 }).run()
    })

    // Update button states
    editor.on('transaction', () => {
      document.getElementById('bold').classList.toggle(
        'is-active',
        editor.isActive('bold')
      )
      document.getElementById('italic').classList.toggle(
        'is-active',
        editor.isActive('italic')
      )
      document.getElementById('heading').classList.toggle(
        'is-active',
        editor.isActive('heading', { level: 2 })
      )
    })
  </script>
</body>
</html>

Understanding Commands

Tiptap uses a chainable command API to modify the editor content:

// Chain multiple commands together
editor
  .chain()      // Start a command chain
  .focus()      // Focus the editor
  .toggleBold() // Toggle bold formatting
  .run()        // Execute the chain

Common Commands

Command	Description
`toggleBold()`	Toggle bold formatting
`toggleItalic()`	Toggle italic formatting
`toggleStrike()`	Toggle strikethrough
`toggleCode()`	Toggle inline code
`toggleHeading({ level })`	Toggle heading (1-6)
`toggleBulletList()`	Toggle bullet list
`toggleOrderedList()`	Toggle ordered list
`toggleCodeBlock()`	Toggle code block
`toggleBlockquote()`	Toggle blockquote
`setHardBreak()`	Insert line break
`undo()`	Undo last change
`redo()`	Redo last undone change

Explore all available commands in the Commands documentation.

Checking Active States

Use isActive() to check if a formatting option is currently active:

editor.isActive('bold')                      // true or false
editor.isActive('heading', { level: 2 })     // Check heading level
editor.isActive('link', { href: 'https://...' }) // Check link href

Getting and Setting Content

Get Content

// Get HTML
const html = editor.getHTML()

// Get JSON
const json = editor.getJSON()

// Get plain text
const text = editor.getText()

Set Content

// Set HTML content
editor.commands.setContent('<p>New content</p>')

// Set JSON content
editor.commands.setContent({
  type: 'doc',
  content: [{
    type: 'paragraph',
    content: [{ type: 'text', text: 'New content' }]
  }]
})

Styling the Editor

Tiptap doesn’t include default styles. Add your own CSS to style the editor:

/* Basic editor styles */
.tiptap {
  padding: 1rem;
  border: 1px solid #ccc;
  border-radius: 4px;
  min-height: 200px;
}

.tiptap:focus {
  outline: none;
  border-color: #0066ff;
}

/* Heading styles */
.tiptap h1 { font-size: 2em; }
.tiptap h2 { font-size: 1.5em; }
.tiptap h3 { font-size: 1.25em; }

/* List styles */
.tiptap ul,
.tiptap ol {
  padding-left: 1.5rem;
  margin: 1rem 0;
}

/* Code block styles */
.tiptap pre {
  background: #1e1e1e;
  color: #fff;
  padding: 1rem;
  border-radius: 4px;
  overflow-x: auto;
}

.tiptap code {
  background: #f0f0f0;
  padding: 0.2em 0.4em;
  border-radius: 3px;
  font-size: 0.9em;
}

/* Blockquote styles */
.tiptap blockquote {
  border-left: 3px solid #ccc;
  padding-left: 1rem;
  margin: 1rem 0;
  font-style: italic;
}

Next Steps

Now that you have a working editor, explore more features:

Add More Extensions

Browse and add more extensions like images, tables, and mentions

Create Custom Extensions

Learn how to build your own custom extensions

Add Collaboration

Enable real-time collaborative editing with Yjs

Explore Examples

See Tiptap in action with interactive examples

Need help? Join the Discord community or check out GitHub Discussions.

Getting Started

Core Concepts

Framework Integration

Guides

Quickstart

Quickstart

Basic Setup

Create the Editor

What’s Happening?

Cleanup

Create the Editor

What’s Happening?

Complete Example with Composition API

Create the Editor

What’s Happening?

Understanding Commands

Common Commands

Checking Active States

Getting and Setting Content

Get Content

Set Content

Styling the Editor

Next Steps

Add More Extensions

Create Custom Extensions

Add Collaboration

Explore Examples

Getting Started

Core Concepts

Framework Integration

Guides

​Quickstart

​Basic Setup

​Create the Editor

​What’s Happening?

​Complete Example with Toolbar

​Cleanup

​Create the Editor

​What’s Happening?

​Complete Example with Composition API

​Create the Editor

​What’s Happening?

​Complete Example with Toolbar

​Understanding Commands

​Common Commands

​Checking Active States

​Getting and Setting Content

​Get Content

​Set Content

​Styling the Editor

​Next Steps

Add More Extensions

Create Custom Extensions

Add Collaboration

Explore Examples

Quickstart

Basic Setup

Create the Editor

What’s Happening?

Complete Example with Toolbar

Cleanup

Create the Editor

What’s Happening?

Complete Example with Composition API

Create the Editor

What’s Happening?

Complete Example with Toolbar

Understanding Commands

Common Commands

Checking Active States

Getting and Setting Content

Get Content

Set Content

Styling the Editor

Next Steps