diff --git a/docs/src/demos/Examples/CollaborativeEditing/index.vue b/docs/src/demos/Examples/CollaborativeEditing/index.vue
index db76709f..a52ec0d1 100644
--- a/docs/src/demos/Examples/CollaborativeEditing/index.vue
+++ b/docs/src/demos/Examples/CollaborativeEditing/index.vue
@@ -1,10 +1,13 @@
 <template>
   <div>
     <button @click="setName">
-      set username
+      Set Name
+    </button>
+    <button @click="changeName">
+      Random Name
     </button>
     <button @click="changeColor">
-      change color
+      Random Color
     </button>
 
     <div class="collaboration-status">
@@ -89,7 +92,16 @@ export default {
 
   methods: {
     setName() {
-      this.name = window.prompt('Name')
+      const name = window.prompt('Name')
+
+      if (name) {
+        this.name = name
+        return this.updateUser()
+      }
+    },
+
+    changeName() {
+      this.name = this.getRandomName()
       this.updateUser()
     },
 
@@ -108,28 +120,26 @@ export default {
     },
 
     getRandomColor() {
-      const colors = [
-        '#f03e3e',
-        '#d6336c',
-        '#ae3ec9',
-        '#7048e8',
-        '#4263eb',
-        '#1c7ed6',
-        '#1098ad',
-        '#0ca678',
-        '#37b24d',
-        '#74b816',
-        '#f59f00',
-        '#f76707',
-      ]
-
-      return colors[Math.floor(Math.random() * colors.length)]
+      return this.getRandomElement([
+        '#616161',
+        '#A975FF',
+        '#FB5151',
+        '#fd9170',
+        '#FFCB6B',
+        '#68CEF8',
+        '#80cbc4',
+        '#9DEF8F',
+      ])
     },
 
     getRandomName() {
-      const names = ['🙈', '🙉', '🙊', '💥', '💫', '💦', '💨', '🐵', '🐒', '🦍', '🦧', '🐶', '🐕', '🦮', '🐕‍🦺', '🐩', '🐺', '🦊', '🦝', '🐱', '🐈', '🦁', '🐯', '🐅', '🐆', '🐴', '🐎', '🦄', '🦓', '🦌', '🐮', '🐂', '🐃', '🐄', '🐷', '🐖', '🐗', '🐽', '🐏', '🐑', '🐐', '🐪', '🐫', '🦙', '🦒', '🐘', '🦏', '🦛', '🐭', '🐁', '🐀', '🐹', '🐰', '🐇', '🐿', '🦔', '🦇', '🐻', '🐨', '🐼', '🦥', '🦦', '🦨', '🦘', '🦡', '🐾', '🦃', '🐔', '🐓', '🐣', '🐤', '🐥', '🐦', '🐧', '🕊', '🦅', '🦆', '🦢', '🦉', '🦩', '🦚', '🦜', '🐸', '🐊', '🐢', '🦎', '🐍', '🐲', '🐉', '🦕', '🦖', '🐳', '🐋', '🐬', '🐟', '🐠', '🐡', '🦈', '🐙', '🐚', '🐌', '🦋', '🐛', '🐜', '🐝', '🐞', '🦗', '🕷', '🕸', '🦂', '🦟', '🦠']
+      return this.getRandomElement([
+        'Lea Thompson', 'Cyndi Lauper', 'Tom Cruise', 'Madonna', 'Jerry Hall', 'Joan Collins', 'Winona Ryder', 'Christina Applegate', 'Alyssa Milano', 'Molly Ringwald', 'Ally Sheedy', 'Debbie Harry', 'Olivia Newton-John', 'Elton John', 'Michael J. Fox', 'Axl Rose', 'Emilio Estevez', 'Ralph Macchio', 'Rob Lowe', 'Jennifer Grey', 'Mickey Rourke', 'John Cusack', 'Matthew Broderick', 'Justine Bateman', 'Lisa Bonet',
+      ])
+    },
 
-      return names[Math.floor(Math.random() * names.length)]
+    getRandomElement(list) {
+      return list[Math.floor(Math.random() * list.length)]
     },
 
     updateState() {
@@ -151,7 +161,8 @@ export default {
 }
 </script>
 
-<style lang="scss">
+<style lang="scss" scoped>
+/* A list of all available users */
 .collaboration-users {
   margin-top: 0.5rem;
 
@@ -165,6 +176,7 @@ export default {
   }
 }
 
+/* Some information about the status */
 .collaboration-status {
   background: #eee;
   color: #666;
@@ -183,7 +195,7 @@ export default {
   }
 }
 
-/* This gives the remote user caret */
+/* Give a remote user a caret */
 .collaboration-cursor__caret {
   position: relative;
   margin-left: -1px;
@@ -194,7 +206,7 @@ export default {
   pointer-events: none;
 }
 
-/* This renders the username above the caret */
+/* Render the username above the caret */
 .collaboration-cursor__label {
   position: absolute;
   top: -1.4em;
diff --git a/docs/src/demos/Examples/ExportHtmlOrJson/index.vue b/docs/src/demos/Examples/ExportHtmlOrJson/index.vue
index b20e1907..e318805d 100644
--- a/docs/src/demos/Examples/ExportHtmlOrJson/index.vue
+++ b/docs/src/demos/Examples/ExportHtmlOrJson/index.vue
@@ -7,6 +7,12 @@
       <button class="button" @click="clearContent">
         Clear Content
       </button>
+      <button @click="editor.chain().focus().bold().run()" :class="{ 'is-active': editor.isActive('bold') }">
+        Bold
+      </button>
+      <button @click="editor.chain().focus().italic().run()" :class="{ 'is-active': editor.isActive('italic') }">
+        Italic
+      </button>
     </div>
 
     <editor-content :editor="editor" />
@@ -70,7 +76,7 @@ export default {
           content: [
             {
               type: 'text',
-              text: 'This is some inserted text. 👋',
+              text: 'It’s 19871. You can’t turn on a radio, or go to a mall without hearing Olivia Newton-John’s hit song, Physical.',
             },
           ],
         }],
@@ -95,11 +101,14 @@ export default {
 }
 </script>
 
-<style lang="scss">
+<style lang="scss" scoped>
 .export {
+  padding: 1rem 0 0;
+
   h3 {
-    margin: 0.5rem 0;
+    margin: 1rem 0 0.5rem;
   }
+
   pre {
     border-radius: 5px;
     color: #333;
@@ -109,7 +118,9 @@ export default {
     display: block;
     white-space: pre-wrap;
     font-size: 0.8rem;
-    padding: 1rem;
+    padding: 0.75rem 1rem;
+    background-color:#e9ecef;
+    color: #495057;
   }
 }
 </style>
diff --git a/docs/src/demos/Examples/Focus/index.vue b/docs/src/demos/Examples/Focus/index.vue
index b7a2408c..5f719358 100644
--- a/docs/src/demos/Examples/Focus/index.vue
+++ b/docs/src/demos/Examples/Focus/index.vue
@@ -58,7 +58,7 @@ export default {
 }
 </script>
 
-<style lang="scss">
+<style lang="scss" scoped>
 .has-focus {
   border-radius: 3px;
   box-shadow: 0 0 0 3px #3ea4ffe6;
diff --git a/docs/src/demos/Examples/ReadOnly/index.vue b/docs/src/demos/Examples/ReadOnly/index.vue
index 08e61ba5..d1c13760 100644
--- a/docs/src/demos/Examples/ReadOnly/index.vue
+++ b/docs/src/demos/Examples/ReadOnly/index.vue
@@ -52,7 +52,7 @@ export default {
 }
 </script>
 
-<style lang="scss">
+<style lang="scss" scoped>
 .checkbox {
   margin-bottom: 1rem;
 
diff --git a/docs/src/demos/Extensions/CollaborationCursor/index.vue b/docs/src/demos/Extensions/CollaborationCursor/index.vue
index bf290cb1..86e0d442 100644
--- a/docs/src/demos/Extensions/CollaborationCursor/index.vue
+++ b/docs/src/demos/Extensions/CollaborationCursor/index.vue
@@ -61,8 +61,8 @@ export default {
 }
 </script>
 
-<style lang="scss">
-/* This gives the remote user caret */
+<style lang="scss" scoped>
+/* Give a remote user a caret */
 .collaboration-cursor__caret {
   position: relative;
   margin-left: -1px;
@@ -73,7 +73,7 @@ export default {
   pointer-events: none;
 }
 
-/* This renders the username above the caret */
+/* Render the username above the caret */
 .collaboration-cursor__label {
   position: absolute;
   top: -1.4em;
diff --git a/docs/src/demos/Overview/Installation/index.vue b/docs/src/demos/Overview/Installation/index.vue
index 06e4677f..9e344727 100644
--- a/docs/src/demos/Overview/Installation/index.vue
+++ b/docs/src/demos/Overview/Installation/index.vue
@@ -18,7 +18,7 @@ export default {
 
   mounted() {
     this.editor = new Editor({
-      content: '<p>Hello, I’m tiptap running in Vue.js! 👋</p>',
+      content: '<p>Hello, here is tiptap! 👋</p>',
       extensions: defaultExtensions(),
     })
   },
diff --git a/docs/src/docPages/api/extensions/blockquote.md b/docs/src/docPages/api/extensions/blockquote.md
index 533c1a0a..dbd5038e 100644
--- a/docs/src/docPages/api/extensions/blockquote.md
+++ b/docs/src/docPages/api/extensions/blockquote.md
@@ -6,10 +6,10 @@ Type <code>>&nbsp;</code> at the beginning of a new line and it will magically t
 
 ## Installation
 ```bash
-# With npm
+# with npm
 npm install @tiptap/extension-blockquote
 
-# Or: With Yarn
+# with Yarn
 yarn add @tiptap/extension-blockquote
 ```
 
diff --git a/docs/src/docPages/api/extensions/bold.md b/docs/src/docPages/api/extensions/bold.md
index 9cecd744..d9b14f65 100644
--- a/docs/src/docPages/api/extensions/bold.md
+++ b/docs/src/docPages/api/extensions/bold.md
@@ -9,10 +9,10 @@ The extension will generate the corresponding `<strong>` HTML tags when reading
 
 ## Installation
 ```bash
-# With npm
+# with npm
 npm install @tiptap/extension-bold
 
-# Or: With Yarn
+# with Yarn
 yarn add @tiptap/extension-bold
 ```
 
diff --git a/docs/src/docPages/api/extensions/bullet-list.md b/docs/src/docPages/api/extensions/bullet-list.md
index 91cbdb76..2535a9c1 100644
--- a/docs/src/docPages/api/extensions/bullet-list.md
+++ b/docs/src/docPages/api/extensions/bullet-list.md
@@ -9,10 +9,10 @@ The `BulletList` extension is intended to be used with the [`ListItem`](/api/ext
 :::
 
 ```bash
-# With npm
+# with npm
 npm install @tiptap/extension-bullet-list @tiptap/extension-list-item
 
-# Or: With Yarn
+# with Yarn
 yarn add @tiptap/extension-bullet-list @tiptap/extension-list-item
 ```
 
diff --git a/docs/src/docPages/api/extensions/code-block.md b/docs/src/docPages/api/extensions/code-block.md
index e8a45b6d..67d95523 100644
--- a/docs/src/docPages/api/extensions/code-block.md
+++ b/docs/src/docPages/api/extensions/code-block.md
@@ -9,10 +9,10 @@ The CodeBlock extension doesn’t come with styling and has no syntax highlighti
 
 ## Installation
 ```bash
-# With npm
+# with npm
 npm install @tiptap/extension-code-block
 
-# Or: With Yarn
+# with Yarn
 yarn add @tiptap/extension-code-block
 ```
 
diff --git a/docs/src/docPages/api/extensions/code.md b/docs/src/docPages/api/extensions/code.md
index 2c00086c..ac5b1148 100644
--- a/docs/src/docPages/api/extensions/code.md
+++ b/docs/src/docPages/api/extensions/code.md
@@ -5,10 +5,10 @@ Type something with <code>\`back-ticks around\`</code> and it will magically tra
 
 ## Installation
 ```bash
-# With npm
+# with npm
 npm install @tiptap/extension-code
 
-# Or: With Yarn
+# with Yarn
 yarn add @tiptap/extension-code
 ```
 
diff --git a/docs/src/docPages/api/extensions/collaboration-cursor.md b/docs/src/docPages/api/extensions/collaboration-cursor.md
index 29f25782..05fe4c05 100644
--- a/docs/src/docPages/api/extensions/collaboration-cursor.md
+++ b/docs/src/docPages/api/extensions/collaboration-cursor.md
@@ -6,10 +6,10 @@ Using this in production requires a **tiptap pro** license. [Read more](/sponsor
 
 ## Installation
 ```bash
-# With npm
+# with npm
 npm install @tiptap/extension-collaboration-cursor
 
-# Or: With Yarn
+# with Yarn
 yarn add @tiptap/extension-collaboration-cursor
 ```
 
diff --git a/docs/src/docPages/api/extensions/collaboration.md b/docs/src/docPages/api/extensions/collaboration.md
index d7f2cd0f..1815948b 100644
--- a/docs/src/docPages/api/extensions/collaboration.md
+++ b/docs/src/docPages/api/extensions/collaboration.md
@@ -7,10 +7,10 @@ Using this in production requires a **tiptap pro** license. [Read more](/sponsor
 
 ## Installation
 ```bash
-# With npm
+# with npm
 npm install @tiptap/extension-collaboration yjs y-webrtc
 
-# Or: With Yarn
+# with Yarn
 yarn add @tiptap/extension-collaboration yjs y-webrtc
 ```
 
diff --git a/docs/src/docPages/api/extensions/document.md b/docs/src/docPages/api/extensions/document.md
index 246932a8..6199533d 100644
--- a/docs/src/docPages/api/extensions/document.md
+++ b/docs/src/docPages/api/extensions/document.md
@@ -9,10 +9,10 @@ Tiptap 1 tried to hide that node from you, but it has always been there. A tiny,
 
 ## Installation
 ```bash
-# With npm
+# with npm
 npm install @tiptap/extension-document
 
-# Or: With Yarn
+# with Yarn
 yarn add @tiptap/extension-document
 ```
 
@@ -20,4 +20,4 @@ yarn add @tiptap/extension-document
 [packages/extension-document/](https://github.com/ueberdosis/tiptap-next/blob/main/packages/extension-document/)
 
 ## Usage
-<demo name="Extensions/Document" highlight="10,28" />
\ No newline at end of file
+<demo name="Extensions/Document" highlight="10,28" />
diff --git a/docs/src/docPages/api/extensions/hard-break.md b/docs/src/docPages/api/extensions/hard-break.md
index ae6687f4..0f38111c 100644
--- a/docs/src/docPages/api/extensions/hard-break.md
+++ b/docs/src/docPages/api/extensions/hard-break.md
@@ -3,10 +3,10 @@ The HardBreak extensions adds support for the `<br>` HTML tag, which forces a li
 
 ## Installation
 ```bash
-# With npm
+# with npm
 npm install @tiptap/extension-hard-break
 
-# Or: With Yarn
+# with Yarn
 yarn add @tiptap/extension-hard-break
 ```
 
diff --git a/docs/src/docPages/api/extensions/heading.md b/docs/src/docPages/api/extensions/heading.md
index fefd6835..efca2149 100644
--- a/docs/src/docPages/api/extensions/heading.md
+++ b/docs/src/docPages/api/extensions/heading.md
@@ -5,10 +5,10 @@ Type <code>#&nbsp;</code> at the beginning of a new line and it will magically t
 
 ## Installation
 ```bash
-# With npm
+# with npm
 npm install @tiptap/extension-heading
 
-# Or: With Yarn
+# with Yarn
 yarn add @tiptap/extension-heading
 ```
 
diff --git a/docs/src/docPages/api/extensions/history.md b/docs/src/docPages/api/extensions/history.md
index 6d41c532..c60438fd 100644
--- a/docs/src/docPages/api/extensions/history.md
+++ b/docs/src/docPages/api/extensions/history.md
@@ -3,10 +3,10 @@ This extension provides history support. All changes to the document will be tra
 
 ## Installation
 ```bash
-# With npm
+# with npm
 npm install @tiptap/extension-history
 
-# Or: With Yarn
+# with Yarn
 yarn add @tiptap/extension-history
 ```
 
diff --git a/docs/src/docPages/api/extensions/horizontal-rule.md b/docs/src/docPages/api/extensions/horizontal-rule.md
index 2363e8b5..1de9d59d 100644
--- a/docs/src/docPages/api/extensions/horizontal-rule.md
+++ b/docs/src/docPages/api/extensions/horizontal-rule.md
@@ -5,10 +5,10 @@ Type three dashes (<code>---</code>) or three underscores and a space (<code>___
 
 ## Installation
 ```bash
-# With npm
+# with npm
 npm install @tiptap/extension-horizontal-rule
 
-# Or: With Yarn
+# with Yarn
 yarn add @tiptap/extension-horizontal-rule
 ```
 
diff --git a/docs/src/docPages/api/extensions/image.md b/docs/src/docPages/api/extensions/image.md
index e811d826..3c463ea5 100644
--- a/docs/src/docPages/api/extensions/image.md
+++ b/docs/src/docPages/api/extensions/image.md
@@ -2,10 +2,10 @@
 
 ## Installation
 ```bash
-# With npm
+# with npm
 npm install @tiptap/extension-image
 
-# Or: With Yarn
+# with Yarn
 yarn add @tiptap/extension-image
 ```
 
diff --git a/docs/src/docPages/api/extensions/italic.md b/docs/src/docPages/api/extensions/italic.md
index b917844d..d9e55867 100644
--- a/docs/src/docPages/api/extensions/italic.md
+++ b/docs/src/docPages/api/extensions/italic.md
@@ -9,10 +9,10 @@ The extension will generate the corresponding `<em>` HTML tags when reading cont
 
 ## Installation
 ```bash
-# With npm
+# with npm
 npm install @tiptap/extension-italic
 
-# Or: With Yarn
+# with Yarn
 yarn add @tiptap/extension-italic
 ```
 
diff --git a/docs/src/docPages/api/extensions/link.md b/docs/src/docPages/api/extensions/link.md
index 0eb0c14f..779a6377 100644
--- a/docs/src/docPages/api/extensions/link.md
+++ b/docs/src/docPages/api/extensions/link.md
@@ -7,10 +7,10 @@ Pasted URLs will be linked automatically.
 
 ## Installation
 ```bash
-# With npm
+# with npm
 npm install @tiptap/extension-link
 
-# Or: With Yarn
+# with Yarn
 yarn add @tiptap/extension-link
 ```
 
diff --git a/docs/src/docPages/api/extensions/list-item.md b/docs/src/docPages/api/extensions/list-item.md
index 8a81fb38..37e9b071 100644
--- a/docs/src/docPages/api/extensions/list-item.md
+++ b/docs/src/docPages/api/extensions/list-item.md
@@ -7,10 +7,10 @@ This extensions is intended to be used with the [`BulletList`](/api/extensions/b
 :::
 
 ```bash
-# With npm
+# with npm
 npm install @tiptap/extension-list-item
 
-# Or: With Yarn
+# with Yarn
 yarn add @tiptap/extension-list-item
 ```
 
diff --git a/docs/src/docPages/api/extensions/ordered-list.md b/docs/src/docPages/api/extensions/ordered-list.md
index 3e9c2fd8..c6235978 100644
--- a/docs/src/docPages/api/extensions/ordered-list.md
+++ b/docs/src/docPages/api/extensions/ordered-list.md
@@ -9,10 +9,10 @@ The `OrderedList` extension is intended to be used with the [`ListItem`](/api/ex
 :::
 
 ```bash
-# With npm
+# with npm
 npm install @tiptap/extension-ordered-list @tiptap/extension-list-item
 
-# Or: With Yarn
+# with Yarn
 yarn add @tiptap/extension-ordered-list @tiptap/extension-list-item
 ```
 
diff --git a/docs/src/docPages/api/extensions/paragraph.md b/docs/src/docPages/api/extensions/paragraph.md
index feac7701..621c6108 100644
--- a/docs/src/docPages/api/extensions/paragraph.md
+++ b/docs/src/docPages/api/extensions/paragraph.md
@@ -7,10 +7,10 @@ Tiptap 1 tried to hide that node from you, but it has always been there. You hav
 
 ## Installation
 ```bash
-# With npm
+# with npm
 npm install @tiptap/extension-paragraph
 
-# Or: With Yarn
+# with Yarn
 yarn add @tiptap/extension-paragraph
 ```
 
diff --git a/docs/src/docPages/api/extensions/strike.md b/docs/src/docPages/api/extensions/strike.md
index 4cff00dd..bb6660db 100644
--- a/docs/src/docPages/api/extensions/strike.md
+++ b/docs/src/docPages/api/extensions/strike.md
@@ -9,10 +9,10 @@ The extension will generate the corresponding `<s>` HTML tags when reading conte
 
 ## Installation
 ```bash
-# With npm
+# with npm
 npm install @tiptap/extension-strike
 
-# Or: With Yarn
+# with Yarn
 yarn add @tiptap/extension-strike
 ```
 
diff --git a/docs/src/docPages/api/extensions/text-align.md b/docs/src/docPages/api/extensions/text-align.md
index 4ebd9d23..dad00adf 100644
--- a/docs/src/docPages/api/extensions/text-align.md
+++ b/docs/src/docPages/api/extensions/text-align.md
@@ -2,10 +2,10 @@
 
 ## Installation
 ```bash
-# With npm
+# with npm
 npm install @tiptap/extension-text-align
 
-# Or: With Yarn
+# with Yarn
 yarn add @tiptap/extension-text-align
 ```
 
diff --git a/docs/src/docPages/api/extensions/text.md b/docs/src/docPages/api/extensions/text.md
index d6664a5f..158c515d 100644
--- a/docs/src/docPages/api/extensions/text.md
+++ b/docs/src/docPages/api/extensions/text.md
@@ -7,10 +7,10 @@ Tiptap 1 tried to hide that node from you, but it has always been there. You hav
 
 ## Installation
 ```bash
-# With npm
+# with npm
 npm install @tiptap/extension-text
 
-# Or: With Yarn
+# with Yarn
 yarn add @tiptap/extension-text
 ```
 
@@ -18,4 +18,4 @@ yarn add @tiptap/extension-text
 [packages/extension-text/](https://github.com/ueberdosis/tiptap-next/blob/main/packages/extension-text/)
 
 ## Usage
-<demo name="Extensions/Text" highlight="12,30" />
\ No newline at end of file
+<demo name="Extensions/Text" highlight="12,30" />
diff --git a/docs/src/docPages/api/extensions/underline.md b/docs/src/docPages/api/extensions/underline.md
index 08b4616c..fb478db3 100644
--- a/docs/src/docPages/api/extensions/underline.md
+++ b/docs/src/docPages/api/extensions/underline.md
@@ -9,10 +9,10 @@ The extension will generate the corresponding `<u>` HTML tags when reading conte
 
 ## Installation
 ```bash
-# With npm
+# with npm
 npm install @tiptap/extension-underline
 
-# Or: With Yarn
+# with Yarn
 yarn add @tiptap/extension-underline
 ```
 
diff --git a/docs/src/docPages/examples.md b/docs/src/docPages/examples.md
index 555e143e..4b61ec78 100644
--- a/docs/src/docPages/examples.md
+++ b/docs/src/docPages/examples.md
@@ -1,9 +1,3 @@
 # Examples
 
-We put together a few examples to show the capabilities of tiptap, but keep in mind: tiptap is renderless and highly customizable. Everything you see can be changed, modified, combined or remixed. Feel free to copy the code to your project and change it to your liking.
-
-A few examples show what you’d probably expect from a text editor anyway: [Basic](/examples/basic), [Links](/examples/links), [History](/examples/history), [Read-only](/examples/read-only), [Export HTML or JSON](/examples/export-html-or-json).
-
-Some examples show how you can improve the user experience: [Markdown shortcuts](/examples/markdown-shortcuts).
-
-Or they show advanced use cases, like the [Collaborative editing](/examples/collaborative-editing) example, which is basically tiptap in multiplayer mode.
+TODO: This page should redirect to [/examples/basic](/examples/basic).
diff --git a/docs/src/docPages/examples/basic.md b/docs/src/docPages/examples/basic.md
index 91004db3..c33b8158 100644
--- a/docs/src/docPages/examples/basic.md
+++ b/docs/src/docPages/examples/basic.md
@@ -1,4 +1,3 @@
 # Basic
-BUG: Headings can’t be transformed to a bullet or ordered list.
 
 <demo name="Examples/Basic" />
diff --git a/docs/src/docPages/examples/read-only.md b/docs/src/docPages/examples/read-only.md
index fea24ee5..048465a7 100644
--- a/docs/src/docPages/examples/read-only.md
+++ b/docs/src/docPages/examples/read-only.md
@@ -1,3 +1,3 @@
 # Read-only
 
-<demo name="Examples/ReadOnly" highlight="3-6,22,28,40-46" />
+<demo name="Examples/ReadOnly" highlight="3-6,22,28,41-47" />
diff --git a/docs/src/docPages/guide/build-custom-extensions.md b/docs/src/docPages/guide/build-custom-extensions.md
index aaa5d3b0..c41d63c2 100644
--- a/docs/src/docPages/guide/build-custom-extensions.md
+++ b/docs/src/docPages/guide/build-custom-extensions.md
@@ -40,7 +40,6 @@ The extension name is used in a whole lot of places and changing it isn’t too
 The extension name is also part of the JSON. If you [store your content as JSON](http://localhost:3000/guide/store-content#option-1-json), you need to change the name in there too.
 
 ### Settings
-
 All settings can be overwritten through the extension anyway, but if you want to change the defaults, for example to provide a library on top of tiptap for other developers, you can do it like that:
 
 ```js
@@ -54,7 +53,6 @@ const CustomHeading = Heading.extend({
 ```
 
 ### Schema
-
 Tiptap works with a [strict schema](/api/schema), which configures how the content can be structured, nested, how it behaves and many more things. You can change all aspects of the schema for existing extensions. Let’s walk through a few common use cases.
 
 The default `Blockquote` extension can wrap other nodes, like headings. If you want to allow nothing but paragraphs in your blockquotes, this is how you could achieve it:
@@ -95,6 +93,9 @@ const CustomParagraph = Paragraph.extend({
 })
 ```
 
+### Attributes
+
+
 ### Keyboard shortcuts
 Most core extensions come with sensible keyboard shortcut defaults. Depending on what you want to build, you’ll likely want to change them though. With the `addKeyboardShortcuts()` method you can overwrite the predefined shortcut map:
 
diff --git a/docs/src/docPages/guide/store-content.md b/docs/src/docPages/guide/store-content.md
index 72c8b077..7e42b9cd 100644
--- a/docs/src/docPages/guide/store-content.md
+++ b/docs/src/docPages/guide/store-content.md
@@ -85,6 +85,6 @@ Unfortunately, **tiptap doesn’t support Markdown as an input or output format*
 
 You should really consider to work with HTML or JSON to store your content, they are perfectly fine for most use cases.
 
-If you still think you need Markdown, [Nextcloud Text](https://github.com/nextcloud/text) uses tiptap to work with Markdown. Their code is open source, so maybe you can learn from them.
+If you still think you need Markdown, [Nextcloud Text](https://github.com/nextcloud/text) uses tiptap 1 to work with Markdown. Their code is open source, so maybe you can learn from them.
 
 That said, tiptap **does** support Markdown shortcuts to format your content. Try typing `**two asterisks**` to make your text bold for example.
diff --git a/docs/src/docPages/introduction.md b/docs/src/docPages/introduction.md
index 5c6afa8b..b69aaaaf 100644
--- a/docs/src/docPages/introduction.md
+++ b/docs/src/docPages/introduction.md
@@ -1,15 +1,17 @@
-:::warning Don’t try this at home
-This version of tiptap is not production-ready, don’t use it anywhere.
+:::error Don’t try this at home
+Nothing here is production-ready, don’t use it anywhere.
 :::
 
 # Introduction
 
-[![Version](https://img.shields.io/npm/v/@tiptap/core.svg?label=version)](https://www.npmjs.com/package/@tiptap/core)
-[![Downloads](https://img.shields.io/npm/dm/@tiptap/core.svg)](https://npmcharts.com/compare/@tiptap/core?minimal=true)
-[![License](https://img.shields.io/npm/l/@tiptap/core.svg)](https://www.npmjs.com/package/@tiptap/core)
+<!-- [![Version](https://img.shields.io/npm/v/@tiptap/core.svg?label=version)](https://www.npmjs.com/package/@tiptap/core) -->
+<!-- [![Downloads](https://img.shields.io/npm/dm/@tiptap/core.svg)](https://npmcharts.com/compare/@tiptap/core?minimal=true) -->
+<!-- [![License](https://img.shields.io/npm/l/@tiptap/core.svg)](https://www.npmjs.com/package/@tiptap/core) -->
+<!-- [![Filesize](https://img.badgesize.io/https://unpkg.com/tiptap/dist/tiptap.min.js?compression=gzip&label=size&colorB=000000)](https://www.npmjs.com/package/tiptap) -->
+<!-- [![Build Status](https://github.com/ueberdosis/tiptap-next/workflows/build/badge.svg)](https://github.com/ueberdosis/tiptap-next/actions) -->
 [![Sponsor](https://img.shields.io/static/v1?label=Sponsor&message=%E2%9D%A4&logo=GitHub)](https://github.com/sponsors/ueberdosis)
 
-tiptap is a renderless wrapper around [ProseMirror](https://ProseMirror.net) – a toolkit for building rich-text editors that is already in use at many well-known companies such as *New York Times*, *The Guardian* or *Atlassian*.
+tiptap is a renderless wrapper around [ProseMirror](https://ProseMirror.net) – a toolkit for building rich-text WYSIWYG editors, which is already in use at many well-known companies such as *New York Times*, *The Guardian* or *Atlassian*.
 
 Although tiptap tries to hide most of the complexity of ProseMirror, it’s built on top of its APIs and we recommend you to read through the [ProseMirror Guide](https://ProseMirror.net/docs/guide/) for advanced usage. You’ll have a better understanding of how everything works under the hood and get more familiar with many terms and jargon used by tiptap.
 
@@ -29,3 +31,6 @@ Although tiptap tries to hide most of the complexity of ProseMirror, it’s buil
 - [Directus CMS](https://directus.io)
 - [Nextcloud](https://apps.nextcloud.com/apps/text)
 - [and many more →](https://github.com/ueberdosis/tiptap/network/dependents?package_id=UGFja2FnZS0xMzE5OTg0ODc%3D)
+
+## License
+Tiptap is licensed under MIT, so you’re free to whatever you want. Anyway, we kindly ask you to [become a sponsor](https://github.com/sponsors/ueberdosis) on GitHub to fund the development, maintenance and support of tiptap.
diff --git a/docs/src/docPages/overview/contributing.md b/docs/src/docPages/overview/contributing.md
index e5225397..3f66a6d2 100644
--- a/docs/src/docPages/overview/contributing.md
+++ b/docs/src/docPages/overview/contributing.md
@@ -6,8 +6,9 @@
 Tiptap would be nothing without its lively community. Contributions have always been and will always be welcome. Here is a little bit you should know, before you send your contribution:
 
 ## Welcome examples
-* Improve the documentation, e. g. fix a typo, add a section
-* New features for existing extensions, e. g. a new option
+* Failing regression tests as bug reports
+* Documentation improvements, e. g. fix a typo, add a section
+* New features for existing extensions, e. g. a new configureable option
 * New extensions, which don’t require changes to the core or other core extensions
 * Well explained, non-breaking changes to the core
 
diff --git a/docs/src/docPages/overview/installation.md b/docs/src/docPages/overview/installation.md
index b3331e6c..2324a3f8 100644
--- a/docs/src/docPages/overview/installation.md
+++ b/docs/src/docPages/overview/installation.md
@@ -9,10 +9,10 @@ You’re free to use tiptap with the framework of your choice. Depending on what
 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
+# with npm
 npm install @tiptap/core @tiptap/starter-kit
 
-# Or: With Yarn
+# with Yarn
 yarn add @tiptap/core @tiptap/starter-kit
 ```
 
@@ -33,10 +33,10 @@ new Editor({
 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
+# with npm
 npm install @tiptap/core @tiptap/vue @tiptap/vue-starter-kit
 
-# Or: With Yarn
+# with Yarn
 yarn add @tiptap/core @tiptap/vue @tiptap/vue-starter-kit
 ```
 
@@ -44,9 +44,10 @@ Create a new component and add the following content to get a basic version of t
 
 <demo name="Overview/Installation" />
 
-::: warning Nuxt.js
-If you use Nuxt.js, note that tiptap needs to run in the client, not on the server. It’s required to wrap the editor in a `<client-only>` tag.
-:::
+### Nuxt.js
+Note that tiptap needs to run in the client, not on the server. It’s required to wrap the editor in a `<client-only>` tag.
+
+[Read more](https://nuxtjs.org/api/components-client-only)
 
 <!-- ## Option 3: CodeSandbox