Search

The headless editor framework for web artisans.

tiptap gives you full control about every single aspect of your text editor experience. It’s customizable, comes with a ton of extensions, is open source and has an extensive documentation. Join our welcoming community and start building cool things!

Headless

It’s headless and comes without any CSS. You are in full control over markup, styling and behaviour.

Framework-agnostic

Out of the box, tiptap works with Vanilla JavaScript and Vue.js, but it’s also possible to use it in React, Svelte and others.

TypeScript

TypeScript helps to find bugs early and gives you a nice autocomplete for the API on top of the extensive human written documentation.

Collaborative

Real-time collaboration, syncing between different devices and working offline isn’t hard anymore. Keep everything in sync with the magic of Y.js.

Community

There’s so much content shared, so many people helping out in issues and a ton of community extensions, you’ll be surprised how much that all can help.

Quickstart

For quick demos or to give it just a spin, grab the latest build from a CDN. Here is an example to get you started with tiptap:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
</head>
<body>
  <div class="element"></div>

  <script type="module">
    import { Editor } from 'https://cdn.skypack.dev/@tiptap/core?min'
    import StarterKit from 'https://cdn.skypack.dev/@tiptap/starter-kit?min'

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

License

tiptap is licensed under MIT, so you are free to do whatever you want. If you are using it commercially, become one of our wonderful sponsors to fund the maintenance, support and development of tiptap now and in the future.