Vanilla JavaScript

Are you building without a frontend framework like React or Vue? No problem, you can use Tiptap directly in plain JavaScript.

Hint

"Vanilla JavaScript" here means no frontend framework, but still using modern JavaScript with ES module imports (e.g. through Vite, Rollup, or Webpack).

If you’re not using a build tool, check out the CDN example below for an example that runs directly in the browser.

Install dependencies

You’ll need the core Tiptap packages to get started:

@tiptap/core – the main editor API
@tiptap/pm – ProseMirror, the engine behind Tiptap
@tiptap/starter-kit – a convenient bundle of common extensions

npm install @tiptap/core @tiptap/pm @tiptap/starter-kit

Add markup

Add a simple container in your HTML where you want the editor to appear:

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

Initialize the editor

Create a JavaScript file (for example src/main.js) and add the following code:

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

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

Now run your dev server (for example with Vite: npm run dev) and open the page in your browser. You should see a working Tiptap editor.

A quick note about styling

Tiptap doesn’t include visual styles by default. The editor only outputs semantic HTML. You can style it however you like with your own CSS or a framework such as Tailwind or Bootstrap.

If you’re using the StarterKit, it includes minimal defaults that make the text render like a basic document. Learn more in the Styling guide.

Using a CDN (no build step)

If you’d rather skip the build tool, here’s a working example using CDN imports:

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

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

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

Next steps

PreviouslyInstall

Next upReact