Installation

Introduction

You’re free to use tiptap with the framework of your choice. Depending on what you want to do, there are a few different ways to install tiptap in your project. Choose the way that fits your workflow.

Option 1: Vanilla JavaScript

Use tiptap with vanilla JavaScript for a very lightweight and raw experience. If you feel like it, you can even use it to connect tiptap with other frameworks not mentioned here.

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

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

Great, that should be enough to start. Here is the most essential code you need to get a running instance of tiptap:

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

new Editor({
  element: document.querySelector('.element'),
  extensions: defaultExtensions(),
  content: '<p>Your content.</p>',
})

Option 2: Vue.js

To use tiptap with Vue.js (and tools that are based on Vue.js) install tiptap together with the Vue.js adapter in your project. We even prepared a Vue.js starter kit, which gives you a good headstart.

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

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

Create a new component and add the following content to get a basic version of tiptap:

Nuxt.js

Note that tiptap needs to run in the client, not on the server. It’s required to wrap the editor in a <client-only> tag.

Option 3: CodeSandbox

CodeSandbox is an online coding environment. It’s great to fiddle around without setting up a local project and to share your code with others.

It’s also amazing for bug reports. Try to recreate a bug there and share it with us before when you file an issue on GitHub. That helps us to reproduce the bug quickly, and fix them faster.

Vue.js/tiptap on CodeSandbox

Option 4: CDN

To pull in tiptap for quick demos or just giving it a spin, grab the latest build via CDN:

<!doctype html>
<head>
  <meta charset="utf-8">
  <script src="https://www.unpkg.com/@tiptap/core@latest"></script>
  <script src="https://www.unpkg.com/@tiptap/starter-kit@latest"></script>
</head>
<body>
  <div class="element"></div>
  <script>
    const { Editor } = window['@tiptap/core']
    const { defaultExtensions } = window['@tiptap/starter-kit']
    const editor = new Editor({
      element: document.querySelector('.element'),
      extensions: defaultExtensions(),
      content: '<p>Your content.</p>',
    })
  </script>
</body>
</html>

2.8 KiB Raw Blame History Unescape Escape