diff --git a/README.md b/README.md
index df9216c02..c57324c12 100644
--- a/README.md
+++ b/README.md
@@ -4,6 +4,7 @@
[](https://www.npmjs.com/package/@tiptap/core)
[](https://github.com/ueberdosis/tiptap-next/actions)
[](https://github.com/sponsors/ueberdosis)
+[](https://discord.gg/WtJ49jGshW)
A headless and extendable rich text editor, based on [ProseMirror](https://github.com/ProseMirror/prosemirror), which is already in use at many well-known companies such as *New York Times*, *The Guardian* or *Atlassian*.
diff --git a/docs/src/docPages/api/extensions/text-align.md b/docs/src/docPages/api/extensions/text-align.md
index 2ea2f2e92..bc0b4f84d 100644
--- a/docs/src/docPages/api/extensions/text-align.md
+++ b/docs/src/docPages/api/extensions/text-align.md
@@ -4,6 +4,10 @@
This extension adds a text align attribute to a specified list of nodes. The attribute is used to align the text.
+:::warning Firefox bug
+`text-align: justify` doesn't work together with `white-space: pre-wrap` in Firefox, [that’s a known issue](https://bugzilla.mozilla.org/show_bug.cgi?id=1253840).
+:::
+
## Installation
```bash
# with npm
diff --git a/docs/src/docPages/installation/alpine.md b/docs/src/docPages/installation/alpine.md
index bf6ed83b0..f40e4a2e4 100644
--- a/docs/src/docPages/installation/alpine.md
+++ b/docs/src/docPages/installation/alpine.md
@@ -9,107 +9,112 @@ title: Alpine WYSIWYG
## Introduction
The following guide describes how to integrate tiptap with your [Alpine.js](https://github.com/alpinejs/alpine) project.
-TODO
+For the sake of this guide we’ll use [Vite](https://vitejs.dev/) to quickly set up a project, but you can use whatever you’re used to. Vite is just really fast and we love it.
-## CodeSandbox
-https://codesandbox.io/s/alpine-tiptap-2ro5e?file=/index.html:0-1419
+## Requirements
+* [Node](https://nodejs.org/en/download/) installed on your machine
+* Experience with [Alpine.js](https://github.com/alpinejs/alpine)
-## index.html
-```html
-
-
-
- Parcel Sandbox
-
-
-
-
+## 1. Create a project (optional)
+If you already have an existing Alpine.js project, that’s fine too. Just skip this step and proceed with the next step.
-
-
-
-
-
-
-
- (view console for editor output)
-
+For the sake of this guide, let’s start with a fresh [Vite](https://vitejs.dev/) project called `tiptap-example`. Vite sets up everything we need, just select the Vanilla JavaScript template.
-
-
-
+```bash
+npm init @vitejs/app tiptap-example
+cd tiptap-example
+npm install
```
-## index.js
+## 2. Install the dependencies
+Okay, enough of the boring boilerplate work. Let’s finally install tiptap! For the following example you’ll need `alpinejs`, the `@tiptap/core` package and the `@tiptap/starter-kit` which has the most common extensions to get started quickly.
+
+```bash
+# install with npm
+npm install alpinejs @tiptap/core @tiptap/starter-kit
+
+# install with Yarn
+yarn add alpinejs @tiptap/core @tiptap/starter-kit
+```
+
+If you followed step 1, you can now start your project with `npm run dev` or `yarn dev`, and open [http://localhost:3000](http://localhost:3000) in your favorite browser. This might be different, if you’re working with an existing project.
+
+## 3. Add a JavaScript file
+To actually start using tiptap, you’ll need to write a little bit of JavaScript. Let’s put the following example code in a file called `main.js`.
+
+This is the fastest way to get tiptap up and running with Alpine.js. It will give you a very basic version of tiptap. No worries, you will be able to add more functionality soon.
+
```js
-import { Editor as TipTap } from "@tiptap/core"
-import { defaultExtensions } from "@tiptap/starter-kit"
+import alpinejs from 'alpinejs'
+import { Editor } from '@tiptap/core'
+import { defaultExtensions } from '@tiptap/starter-kit'
-window.setupEditor = function (content) {
+window.setupEditor = function(content) {
return {
- content: content,
- inFocus: false,
- // updatedAt is to force Alpine to
- // rerender on selection change
- updatedAt: Date.now(),
editor: null,
-
- init(el) {
- let editor = new TipTap({
- element: el,
+ content: content,
+ init(element) {
+ this.editor = new Editor({
+ element: element,
extensions: defaultExtensions(),
content: this.content,
- editorProps: {
- attributes: {
- class: "prose-sm py-4 focus:outline-none"
- }
- }
+ onUpdate: ({ editor }) => {
+ this.content = editor.getHTML()
+ },
})
-
- editor.on("update", () => {
- this.content = this.editor.getHTML()
- })
-
- editor.on("focus", () => {
- this.inFocus = true
- })
-
- editor.on("selection", () => {
- this.updatedAt = Date.now()
- })
-
- this.editor = editor
- }
+ },
}
}
```
+
+## 4. Add it to your app
+Now, let’s replace the content of the `index.html` with the following example code to use the editor in our app.
+
+```html
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+```
+
+You should now see tiptap in your browser. Time to give yourself a pat on the back! :)
diff --git a/docs/src/docPages/installation/cdn.md b/docs/src/docPages/installation/cdn.md
index 1f2348023..3e7d16d64 100644
--- a/docs/src/docPages/installation/cdn.md
+++ b/docs/src/docPages/installation/cdn.md
@@ -20,3 +20,5 @@ For testing purposes or demos, use our [Skypack](https://www.skypack.dev/) CDN b