--- title: "Vanilla JavaScript" description: "Learn how to set up the Tiptap Editor with Vanilla JavaScript, install dependencies and initialize the editor in the docs!" canonical_url: "https://tiptap.dev/docs/editor/getting-started/install/vanilla-javascript" --- # Vanilla JavaScript Learn how to set up the Tiptap Editor with Vanilla JavaScript, install dependencies and initialize the editor in the docs! 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 you are still using **modern JavaScript with ES module imports** (e.g. through Vite, Rollup, or Webpack). > > If you'd rather skip build tools entirely, check the [CDN section below](#without-a-build-tool-cdn) for a setup that runs directly in the browser. ## With a build tool (Vite, Webpack, Rollup) This approach is recommended if you're already using a bundler or just want the standard npm workflow. ### 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 ```bash 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: ```html
``` ### Initialize the editor Create a JavaScript file (for example `src/main.js`) and add the following code: ```js import { Editor } from '@tiptap/core' import StarterKit from '@tiptap/starter-kit' new Editor({ element: document.querySelector('.element'), extensions: [StarterKit], content: '

Hello World!

', }) ``` 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. --- ## Without a build tool (CDN) If you'd rather skip npm and build tools entirely, you can load Tiptap directly from a CDN using ES module imports. This works in all modern browsers. > **Note:** > > Your `
``` ### Complete HTML file with toolbar Here's a copy-paste ready example that includes a toolbar with formatting buttons: ```html Tiptap Editor
``` Save this as `index.html` and open it in any modern browser — no server required. ### Live demo You can see a similar working example on CodeSandbox: [https://codesandbox.io/s/throbbing-smoke-now37q](https://codesandbox.io/s/throbbing-smoke-now37q?file=/index.html) --- ## Wiring a toolbar (plain JS) Tiptap is headless, so it doesn't ship with a built-in toolbar. You need to wire up your own UI buttons. Here is the pattern in plain JavaScript: ```js import { Editor } from '@tiptap/core' import StarterKit from '@tiptap/starter-kit' const editor = new Editor({ element: document.querySelector('#editor'), extensions: [StarterKit], content: '

Hello World!

', }) // Listen for clicks and call editor commands document.querySelector('#bold-button').addEventListener('click', () => { editor.chain().focus().toggleBold().run() }) // Check if a mark or node is active to style the button const isBold = editor.isActive('bold') const isHeading1 = editor.isActive('heading', { level: 1 }) const isBulletList = editor.isActive('bulletList') // Update button active state on selection change editor.on('selectionUpdate', () => { document.querySelector('#bold-button').classList.toggle('is-active', editor.isActive('bold')) }) ``` ### Common editor commands | Command | Code | | ------------- | ---------------------------------------------------------- | | Bold | `editor.chain().focus().toggleBold().run()` | | Italic | `editor.chain().focus().toggleItalic().run()` | | Strike | `editor.chain().focus().toggleStrike().run()` | | Code (inline) | `editor.chain().focus().toggleCode().run()` | | Heading 1 | `editor.chain().focus().toggleHeading({ level: 1 }).run()` | | Heading 2 | `editor.chain().focus().toggleHeading({ level: 2 }).run()` | | Bullet List | `editor.chain().focus().toggleBulletList().run()` | | Ordered List | `editor.chain().focus().toggleOrderedList().run()` | | Blockquote | `editor.chain().focus().toggleBlockquote().run()` | | Code Block | `editor.chain().focus().toggleCodeBlock().run()` | | Undo | `editor.chain().focus().undo().run()` | | Redo | `editor.chain().focus().redo().run()` | Refer to the individual extension docs for available commands. --- ## Styling Tiptap doesn't include visual styles by default — it only outputs semantic HTML. You can style it however you like with your own CSS or a framework such as Tailwind or Bootstrap. The StarterKit includes minimal default styles that make the text render like a basic document. Learn more in the [Styling guide](https://tiptap.dev/docs/editor/getting-started/style-editor.md). ## Next steps - [Configure your editor](https://tiptap.dev/docs/editor/getting-started/configure.md) - [Add styles to your editor](https://tiptap.dev/docs/editor/getting-started/style-editor.md) - [Learn more about Tiptaps concepts](https://tiptap.dev/docs/editor/core-concepts/introduction.md) - [Learn how to persist the editor state](https://tiptap.dev/docs/editor/core-concepts/persistence.md) - [Start building your own extensions](https://tiptap.dev/docs/editor/extensions/custom-extensions.md)