Vanilla JavaScript
Are you using plain JavaScript or a framework that isn't listed? No worries, we provide everything you need.
Hint
If you don't use a bundler like Webpack or Rollup, please follow the CDN guide instead. Since Tiptap is built in a modular way, you will need to use <script type="module">
in your HTML to get our CDN imports working.
Install dependencies
For the following example, you will need @tiptap/core
(the actual editor), @tiptap/pm
(the ProseMirror library), and @tiptap/starter-kit
. The StarterKit doesn't include all extensions, only the most common ones.
npm install @tiptap/core @tiptap/pm @tiptap/starter-kit
Add markup
Add the following HTML where you'd like to mount the editor:
<div class="element"></div>
Initialize the editor
Everything is in place, so let's set up the editor. 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!