# Installation ## toc ## 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. ```bash # 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: ```js import { Editor } from '@tiptap/core' import { defaultExtensions } from '@tiptap/starter-kit' new Editor({ element: document.querySelector('.element'), extensions: defaultExtensions(), content: '

Your content.

', }) ``` ## 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. ```bash # 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 `` tag. [Read more](https://nuxtjs.org/api/components-client-only) ## 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](https://github.com/ueberdosis/tiptap-next/issues/new/choose). That helps us to reproduce the bug quickly, and fix them faster. * [Vue.js/tiptap on CodeSandbox](https://codesandbox.io/s/tiptap-issue-template-b83rr?file=/src/components/Tiptap.vue) ## Option 4: CDN (Draft) To pull in tiptap for quick demos or just giving it a spin, grab the latest build via CDN. We use two different provides: ### Skypack (ES Modules) Skypack enables you to use ES modules, which should be supported in all modern browsers. The packages are smaller, that’s great, too. So here is how to use it: ```html
``` ### Unpkg (UMD, deprecated) We also have an UMD build on unpkg. Those UMD builds are larger, but should work even in older browsers. As tiptap doesn’t work in older browsers anyway, we tend to remove those builds. What do you think? Anyway, here‘s how you can use it: ```html
```