tiptap/docs/installation.md

tableOfContents
true

Installation

Introduction

tiptap is framework-agnostic and even works with Vanilla JavaScript (if that’s your thing). The following integration guides help you integrating tiptap in your JavaScript project.

Integration guides

• CDN
• React
• Next.js
• Vue 3
• Vue 2
• Nuxt.js
• Svelte
• Alpine.js
• Livewire (Draft)
• Angular (community package)

Vanilla JavaScript

You’re using plain JavaScript or a framework that’s not listed here? No worries, we provide everything you need.

Requirements

• Node installed on your machine

1. Install the dependencies

For the following example you will need @tiptap/core (the actual editor) and @tiptap/starter-kit.

The StarterKit doesn’t include all, but the most common extensions.

# install with npm
npm install @tiptap/core @tiptap/starter-kit

# install with Yarn
yarn add @tiptap/core @tiptap/starter-kit

2. Add some markup

Add the following HTML where you want the editor to be mounted:

<div class="element"></div>

3. Initialize the editor

Everything is in place now, so let’s set up the actual editor now. Add the following code to your JavaScript:

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

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

Open your project in the browser to see tiptap in action. Good work! Time to give yourself a pat on the back.