Installation

Introduction

tiptap is framework-agnostic and even works with Vanilla JavaScript, if that’s your thing. The following integration guides should help you to integrate tiptap in your JavaScript project.

Integration guides

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

Vanilla JavaScript

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 which has the most common extensions to get started quickly.

# 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

Let’s initialize the editor in JavaScript now:

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.

1.6 KiB Raw Blame History Unescape Escape