From 48b54d1186abe272583d72207ab07586daa5422e Mon Sep 17 00:00:00 2001 From: Hans Pagel Date: Fri, 29 Jan 2021 21:52:34 +0100 Subject: [PATCH] docs: update the installation page --- docs/src/docPages/overview/installation.md | 92 ++++++---------------- 1 file changed, 26 insertions(+), 66 deletions(-) diff --git a/docs/src/docPages/overview/installation.md b/docs/src/docPages/overview/installation.md index a6d24ad93..93868f52c 100644 --- a/docs/src/docPages/overview/installation.md +++ b/docs/src/docPages/overview/installation.md @@ -3,10 +3,20 @@ ## 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. +Depending on how your development setup looks like, there are a few different ways to install tiptap. We have put together integration guides for a few popular frameworks to get you started quickly. You can even use it without any front-end framework. Choose the way that fits your workflow and start building cool things! -## 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. +## Integration guides +* [Vue.js](/guide/getting-started/vue-cli) +* [Nuxt.js](/guide/getting-started/nuxtjs) +* [React](/guide/getting-started/react) (Draft) +* [Svelte](/guide/getting-started/svelte) (Draft) +* [Alpine.js](/guide/getting-started/alpinejs) (Draft) +* [Livewire](/guide/getting-started/livewire) (Draft) + +Don’t see your framework here? That shouldn’t stop you from installing tiptap. Just use the Vanilla JavaScript version, that should work fine, too. + +## Vanilla JavaScript +Use tiptap with vanilla JavaScript for a very lightweight and raw experience. If you feel like it, you can use that version to connect tiptap with other frameworks not mentioned here, too. ```bash # with npm @@ -16,7 +26,7 @@ npm install @tiptap/core @tiptap/starter-kit 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: +Great, that’s all you need for now. Here is the boilerplate code to start your first tiptap instance: ```js import { Editor } from '@tiptap/core' @@ -29,45 +39,8 @@ new Editor({ }) ``` -## 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. - - -## 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: +## 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 @@ -89,27 +62,14 @@ Skypack enables you to use ES modules, which should be supported in all modern b ``` -### ~~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: +## 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. -```html - - - - - - - -
- - - -``` + + +It’s also amazing for bug reports. Try to recreate a bug there and share it with us before you [file an issue on GitHub](https://github.com/ueberdosis/tiptap-next/issues/new/choose). That helps us to reproduce the bug easily, and release a fix faster.