Your content.
', -}) -``` - -When you open the project in your browser, you should now see tiptap in action. Time to give yourself a pat on the back. Let’s start to configure your editor in the next step. diff --git a/docs/src/docPages/installation.md b/docs/src/docPages/installation.md new file mode 100644 index 00000000..79144ba8 --- /dev/null +++ b/docs/src/docPages/installation.md @@ -0,0 +1,56 @@ +# Getting started + +## toc + +## Introduction +tiptap 2 is framework-agnostic and even works with plain JavaScript, if that’s your thing. We’re working on guides for all the different frameworks and workflows. The following steps should help you to integrate tiptap in your JavaScript project. + +## Integration guides +* [CDN](/installation/cdn) +* [CodeSandbox](/installation/codesandbox) +* [Vue 2](/installation/vue2) +* [Vue 3](/installation/vue) (Draft) +* [Nuxt.js](/installation/nuxt) +* [React](/installation/react) (Draft) +* [Svelte](/installation/svelte) (Draft) +* [Alpine.js](/installation/alpine) (Draft) +* [Livewire](/installation/livewire) (Draft) + +## Vanilla JavaScript + +### Requirements +* [Node](https://nodejs.org/en/download/) installed on your machine + +### 1. Install the dependencies +For the following example you will need `@tiptap/core` (the actual editor) and `@tiptap/starter-kit` which has everything to get started quickly, for example the most common extensions. + +```bash +# install with npm +npm install @tiptap/core @tiptap/starter-kit + +# install with Yarn +yarn add @tiptap/core @tiptap/starter-kit +``` + +### 2. Add a container +Add the following HTML where you want the editor to be mounted: + +```html + +``` + +### 3. Initialize the editor +Now, let’s initialize the editor in JavaScript: + +```js +import { Editor } from '@tiptap/core' +import { defaultExtensions } from '@tiptap/starter-kit' + +new Editor({ + element: document.querySelector('.element'), + extensions: defaultExtensions(), + content: 'Your content.
', +}) +``` + +When you open the project in your browser, you should now see tiptap in action. Time to give yourself a pat on the back. diff --git a/docs/src/docPages/guide/getting-started/alpine.md b/docs/src/docPages/installation/alpine.md similarity index 100% rename from docs/src/docPages/guide/getting-started/alpine.md rename to docs/src/docPages/installation/alpine.md diff --git a/docs/src/docPages/installation/cdn.md b/docs/src/docPages/installation/cdn.md new file mode 100644 index 00000000..502ccdbd --- /dev/null +++ b/docs/src/docPages/installation/cdn.md @@ -0,0 +1,22 @@ +# CDN +For testing purposes or demos, use our [Skypack](https://www.skypack.dev/) CDN builds. Here are the few lines of code you need to get started: + +```html + + + + + + + + +