From aba6657d7026cf59a41b9532b767c8e3058b1b03 Mon Sep 17 00:00:00 2001
From: Sven Adlung <sven.adlung@ueber.io>
Date: Wed, 12 Jun 2024 11:52:54 +0200
Subject: [PATCH] docs: demos styling

---
 demos/setup/style.scss                        | 320 +++++++++++-
 demos/src/Commands/Cut/React/index.jsx        |  16 +-
 demos/src/Commands/Cut/React/index.spec.js    |  64 +--
 demos/src/Commands/Cut/React/styles.scss      | 107 ++--
 .../Commands/InsertContent/React/index.jsx    |  24 +-
 .../Commands/InsertContent/React/styles.scss  | 107 ++--
 .../React/index.jsx                           | 284 ++++++-----
 .../React/styles.scss                         | 107 ++--
 .../AutolinkValidation/React/index.jsx        |  36 +-
 .../AutolinkValidation/React/styles.scss      | 121 +++--
 demos/src/Examples/Book/React/index.jsx       | 226 ++++-----
 demos/src/Examples/Book/React/styles.scss     | 111 +++--
 demos/src/Examples/Book/Vue/index.vue         | 209 ++++----
 demos/src/Examples/CSSModules/React/index.jsx |  48 +-
 .../src/Examples/CSSModules/React/styles.scss | 107 ++--
 demos/src/Examples/CSSModules/Vue/index.vue   | 113 +++--
 .../React/CodeBlockComponent.scss             |  20 +-
 .../CodeBlockLanguage/React/index.jsx         |  14 +-
 .../CodeBlockLanguage/React/styles.scss       |  18 +-
 .../Vue/CodeBlockComponent.vue                |  16 +-
 .../Examples/CodeBlockLanguage/Vue/index.vue  |  40 +-
 .../CollaborativeEditing/React/MenuBar.jsx    |  14 +-
 .../CollaborativeEditing/Vue/MenuBar.vue      |  14 +-
 .../Examples/Community/React/MentionList.jsx  |   4 +-
 .../Examples/Community/React/MentionList.scss |  49 +-
 demos/src/Examples/Community/React/index.jsx  |   9 +-
 .../Examples/Community/React/index.spec.js    |  14 +-
 .../src/Examples/Community/React/styles.scss  |  48 +-
 .../Examples/Community/Vue/MentionList.vue    |  52 +-
 .../src/Examples/Community/Vue/index.spec.js  |  14 +-
 demos/src/Examples/Community/Vue/index.vue    |  49 +-
 .../Examples/CustomDocument/React/styles.scss | 125 ++++-
 .../src/Examples/CustomDocument/Vue/index.vue | 125 ++++-
 .../CustomParagraph/React/styles.scss         | 107 +++-
 demos/src/Examples/Default/React/index.jsx    | 330 ++++++-------
 .../src/Examples/Default/React/index.spec.js  |  64 +--
 demos/src/Examples/Default/React/styles.scss  | 107 ++--
 .../src/Examples/Default/Svelte/index.spec.js |  52 +-
 .../src/Examples/Default/Svelte/index.svelte  |  67 +--
 demos/src/Examples/Default/Svelte/styles.scss | 107 ++--
 demos/src/Examples/Default/Vue/index.spec.js  |  52 +-
 demos/src/Examples/Default/Vue/index.vue      | 213 ++++----
 demos/src/Examples/Drawing/Vue/Component.vue  |  48 +-
 demos/src/Examples/Formatting/React/index.jsx |  82 ++--
 .../Examples/Formatting/React/index.spec.js   |  10 +-
 .../src/Examples/Formatting/React/styles.scss |  86 +++-
 .../src/Examples/Formatting/Vue/index.spec.js |  10 +-
 demos/src/Examples/Formatting/Vue/index.vue   | 154 +++---
 demos/src/Examples/Images/React/index.jsx     |  10 +-
 demos/src/Examples/Images/React/index.spec.js |   2 +-
 demos/src/Examples/Images/React/styles.scss   |  10 +-
 demos/src/Examples/Images/Vue/index.spec.js   |   2 +-
 demos/src/Examples/Images/Vue/index.vue       |  20 +-
 .../React/Component.jsx                       |   2 +-
 .../InteractivityComponent/React/styles.scss  | 141 ++++--
 .../InteractivityComponent/Vue/Component.vue  |  48 +-
 .../InteractivityComponent/Vue/index.vue      |  89 +++-
 .../React/Component.jsx                       |   6 +-
 .../React/index.spec.js                       |  12 +-
 .../React/styles.scss                         | 145 ++++--
 .../Vue/Component.vue                         |  59 +--
 .../Vue/index.vue                             |  89 +++-
 .../MarkdownShortcuts/React/index.jsx         |   2 +-
 .../MarkdownShortcuts/React/styles.scss       | 119 +++--
 .../Examples/MarkdownShortcuts/Vue/index.vue  |  82 +++-
 demos/src/Examples/Menus/React/index.jsx      |   2 +-
 demos/src/Examples/Menus/React/styles.scss    | 139 +++++-
 demos/src/Examples/Menus/Vue/index.vue        | 135 +++++-
 demos/src/Examples/Minimal/React/index.jsx    |   2 +-
 demos/src/Examples/Minimal/React/styles.scss  |   4 +-
 demos/src/Examples/Minimal/Vue/index.vue      |   6 +-
 demos/src/Examples/NodePos/React/index.jsx    |  68 +--
 .../src/Examples/NodePos/React/index.spec.js  |  12 +-
 demos/src/Examples/NodePos/React/styles.scss  | 102 +++-
 demos/src/Examples/Savvy/React/index.jsx      |   2 +-
 demos/src/Examples/Savvy/React/styles.scss    |  57 +--
 demos/src/Examples/Savvy/Vue/index.vue        |  53 +-
 demos/src/Examples/Tables/React/index.jsx     | 154 +++---
 demos/src/Examples/Tables/React/index.spec.js |  32 +-
 demos/src/Examples/Tables/React/styles.scss   | 154 +++---
 demos/src/Examples/Tables/Vue/index.spec.js   |  32 +-
 demos/src/Examples/Tables/Vue/index.vue       | 286 ++++++-----
 demos/src/Examples/Tasks/React/styles.scss    |  53 +-
 demos/src/Examples/Tasks/Vue/index.vue        |  53 +-
 demos/src/Experiments/All/Vue/index.vue       | 456 ++++++++++++------
 .../CollaborationAnnotation/Vue/index.spec.js |  10 +-
 .../CollaborationAnnotation/Vue/index.vue     |  89 +++-
 .../Experiments/Commands/Vue/CommandsList.vue |  54 ++-
 .../Experiments/Commands/Vue/index.spec.js    |  14 +-
 demos/src/Experiments/Commands/Vue/index.vue  |  97 +++-
 .../Experiments/Commands/Vue/suggestion.js    |   8 +-
 .../DestroyingEditor/Vue/index.vue            | 102 +++-
 demos/src/Experiments/Embeds/Vue/index.vue    |  13 +-
 .../ExtensionStorage/React/index.jsx          |   6 +-
 .../ExtensionStorage/React/styles.scss        |   6 +-
 .../ExtensionStorage/Vue/index.vue            |  14 +-
 demos/src/Experiments/Figure/Vue/index.vue    | 182 +++++--
 .../Experiments/GenericFigure/Vue/index.vue   | 248 +++++++---
 .../GlobalDragHandle/Vue/index.vue            |  12 +-
 .../IsolatingClear/React/index.jsx            | 330 ++++++-------
 .../IsolatingClear/React/index.spec.js        |  64 +--
 .../IsolatingClear/React/styles.scss          | 111 +++--
 demos/src/Experiments/Linter/Vue/index.vue    | 100 ++--
 .../Experiments/MultipleEditors/Vue/index.vue | 154 +++---
 .../OnUpdateRerender/React/index.jsx          |  12 +-
 .../OnUpdateRerender/React/styles.scss        |   4 +-
 .../OnUpdateRerender/Vue/TiptapComponent.vue  |   2 +-
 .../OnUpdateRerender/Vue/index.vue            |  19 +-
 demos/src/Experiments/Tailwind/JS/index.html  |   2 +-
 .../Experiments/TrailingNode/Vue/index.vue    |  87 +++-
 .../src/Extensions/BubbleMenu/React/index.jsx |  48 +-
 .../Extensions/BubbleMenu/React/styles.scss   | 116 ++++-
 demos/src/Extensions/BubbleMenu/Vue/index.vue | 147 +++++-
 .../Extensions/CharacterCount/React/index.jsx |  41 +-
 .../CharacterCount/React/styles.scss          |  22 +-
 .../Extensions/CharacterCount/Vue/index.vue   |  63 ++-
 .../Collaboration/React/styles.scss           |  24 +-
 .../Extensions/Collaboration/Vue/index.vue    |  24 +-
 .../CollaborationCursor/React/styles.scss     |  80 +--
 .../CollaborationCursor/Vue/index.vue         |  80 +--
 demos/src/Extensions/Color/React/index.jsx    | 132 ++---
 .../Color}/React/styles.scss                  |   4 +-
 demos/src/Extensions/Color/Vue/index.vue      |  74 +--
 .../src/Extensions/Dropcursor/React/index.jsx |   2 +-
 .../Extensions/Dropcursor/React/styles.scss   |  10 +-
 demos/src/Extensions/Dropcursor/Vue/index.vue |  14 +-
 .../Extensions/FloatingMenu/React/index.jsx   |  46 +-
 .../Extensions/FloatingMenu/React/styles.scss | 114 ++++-
 .../src/Extensions/FloatingMenu/Vue/index.vue | 141 +++++-
 demos/src/Extensions/Focus/React/styles.scss  |  41 +-
 demos/src/Extensions/Focus/Vue/index.vue      |  39 +-
 .../src/Extensions/FontFamily/React/index.jsx | 121 ++---
 .../Extensions/FontFamily/React/styles.scss   |  17 +-
 demos/src/Extensions/FontFamily/Vue/index.vue |  52 +-
 .../src/Extensions/Gapcursor/React/index.jsx  |   2 +-
 .../Extensions/Gapcursor/React/styles.scss    |  10 +-
 demos/src/Extensions/Gapcursor/Vue/index.vue  |  14 +-
 demos/src/Extensions/History/React/index.jsx  |  22 +-
 .../src/Extensions/History/React/styles.scss  |   6 +
 demos/src/Extensions/History/Vue/index.vue    |  40 +-
 .../src/Extensions/ListKeymap/React/index.jsx |  52 +-
 .../Extensions/ListKeymap/React/styles.scss   |  13 +-
 .../Extensions/Placeholder/React/styles.scss  | 123 ++++-
 .../src/Extensions/Placeholder/Vue/index.vue  | 123 ++++-
 .../src/Extensions/TextAlign/React/index.jsx  |  60 +--
 .../Extensions/TextAlign/React/styles.scss    |  42 ++
 demos/src/Extensions/TextAlign/Vue/index.vue  |  81 +++-
 .../src/Extensions/Typography/React/index.jsx |   2 +
 .../Extensions/Typography/React/styles.scss   |   6 +
 demos/src/Extensions/Typography/Vue/index.vue |   9 +
 .../GuideContent/ExportHTML/React/index.jsx   |  44 +-
 .../GuideContent/ExportHTML/React/styles.scss | 104 ++--
 .../src/GuideContent/ExportHTML/Vue/index.vue | 132 ++---
 .../GuideContent/ExportJSON/React/index.jsx   |  44 +-
 .../GuideContent/ExportJSON/React/styles.scss | 104 ++--
 .../src/GuideContent/ExportJSON/Vue/index.vue | 132 ++---
 .../src/GuideContent/ReadOnly/React/index.jsx |  18 +-
 .../GuideContent/ReadOnly/React/styles.scss   | 108 ++++-
 demos/src/GuideContent/ReadOnly/Vue/index.vue | 109 ++++-
 .../GuideGettingStarted/VModel/Vue/Editor.vue |  94 ++++
 .../GuideGettingStarted/VModel/Vue/index.vue  |  44 +-
 .../GuideNodeViews/DragHandle/Vue/index.vue   |  94 ++++
 .../JavaScript/Vue/Extension.js               |   3 +-
 .../GuideNodeViews/JavaScript/Vue/index.vue   | 141 ++++--
 .../JavaScriptContent/Vue/Extension.js        |   4 +-
 .../JavaScriptContent/Vue/index.vue           | 150 ++++--
 .../ReactComponent/React/Component.jsx        |   2 +-
 .../ReactComponent/React/styles.scss          | 141 ++++--
 .../ReactComponentContent/React/Component.jsx |   6 +-
 .../ReactComponentContent/React/styles.scss   | 145 ++++--
 .../TableOfContents/React/Component.jsx       |  65 ---
 .../TableOfContents/React/Component.scss      |  43 --
 .../TableOfContents/React/TableOfContents.js  |  41 --
 .../TableOfContents/React/index.html          |   0
 .../TableOfContents/React/index.jsx           |  32 --
 .../TableOfContents/Vue/Component.vue         | 127 -----
 .../TableOfContents/Vue/TableOfContents.js    |  43 --
 .../TableOfContents/Vue/index.html            |   0
 .../TableOfContents/Vue/index.vue             |  50 --
 .../VueComponent/Vue/Component.vue            |  48 +-
 .../GuideNodeViews/VueComponent/Vue/index.vue |  89 +++-
 .../VueComponentContent/Vue/Component.vue     |  59 +--
 .../VueComponentContent/Vue/index.vue         |  89 +++-
 demos/src/Marks/Bold/React/index.jsx          |  43 +-
 demos/src/Marks/Bold/React/styles.scss        |   6 +
 demos/src/Marks/Bold/Vue/index.vue            |  34 +-
 demos/src/Marks/Code/React/index.jsx          |  41 +-
 demos/src/Marks/Code/React/styles.scss        |  16 +-
 demos/src/Marks/Code/Vue/index.vue            |  41 +-
 demos/src/Marks/Highlight/React/index.jsx     | 100 ++--
 demos/src/Marks/Highlight/React/styles.scss   |  17 +-
 demos/src/Marks/Highlight/Vue/index.vue       |  78 +--
 demos/src/Marks/Italic/React/index.jsx        |  43 +-
 demos/src/Marks/Italic/React/styles.scss      |   6 +
 demos/src/Marks/Italic/Vue/index.vue          |  34 +-
 demos/src/Marks/Link/React/index.jsx          |  26 +-
 demos/src/Marks/Link/React/styles.scss        |  30 +-
 demos/src/Marks/Link/Vue/index.vue            |  48 +-
 demos/src/Marks/Strike/React/index.jsx        |  43 +-
 demos/src/Marks/Strike/React/styles.scss      |   6 +
 demos/src/Marks/Strike/Vue/index.vue          |  25 +-
 demos/src/Marks/Subscript/React/index.jsx     |  42 +-
 demos/src/Marks/Subscript/React/styles.scss   |   6 +
 demos/src/Marks/Subscript/Vue/index.vue       |  34 +-
 demos/src/Marks/Superscript/React/index.jsx   |  42 +-
 demos/src/Marks/Superscript/React/styles.scss |   6 +
 demos/src/Marks/Superscript/Vue/index.vue     |  34 +-
 demos/src/Marks/TextStyle/React/index.jsx     |   2 +
 demos/src/Marks/TextStyle/React/styles.scss   |   6 +
 demos/src/Marks/TextStyle/Vue/index.vue       |   9 +
 demos/src/Marks/Underline/React/index.jsx     |  42 +-
 demos/src/Marks/Underline/React/styles.scss   |   6 +
 demos/src/Marks/Underline/Vue/index.vue       |  34 +-
 demos/src/Nodes/Blockquote/React/index.jsx    |  44 +-
 demos/src/Nodes/Blockquote/React/styles.scss  |   7 +-
 demos/src/Nodes/Blockquote/Vue/index.vue      |  32 +-
 demos/src/Nodes/BulletList/React/index.jsx    |  52 +-
 demos/src/Nodes/BulletList/React/styles.scss  |  13 +-
 demos/src/Nodes/BulletList/Vue/index.vue      |  42 +-
 demos/src/Nodes/CodeBlock/React/index.jsx     |  28 +-
 demos/src/Nodes/CodeBlock/React/styles.scss   |  11 +-
 demos/src/Nodes/CodeBlock/Vue/index.vue       |  36 +-
 .../Nodes/CodeBlockLowlight/React/index.jsx   |  28 +-
 .../Nodes/CodeBlockLowlight/React/styles.scss |  12 +-
 .../src/Nodes/CodeBlockLowlight/Vue/index.vue |  46 +-
 demos/src/Nodes/Document/React/index.jsx      |   2 +
 demos/src/Nodes/Document/React/styles.scss    |   6 +
 demos/src/Nodes/Document/Vue/index.vue        |   9 +
 demos/src/Nodes/HardBreak/React/index.jsx     |   8 +-
 demos/src/Nodes/HardBreak/React/styles.scss   |   6 +
 demos/src/Nodes/HardBreak/Vue/index.vue       |  22 +-
 demos/src/Nodes/Heading/React/index.jsx       |  42 +-
 demos/src/Nodes/Heading/React/styles.scss     |  42 ++
 demos/src/Nodes/Heading/Vue/index.vue         |  70 ++-
 .../src/Nodes/HorizontalRule/React/index.jsx  |  10 +-
 .../Nodes/HorizontalRule/React/styles.scss    |  19 +-
 demos/src/Nodes/HorizontalRule/Vue/index.vue  |  32 +-
 demos/src/Nodes/Image/React/index.jsx         |  14 +-
 demos/src/Nodes/Image/React/styles.scss       |   8 +-
 demos/src/Nodes/Image/Vue/index.vue           |  26 +-
 demos/src/Nodes/ListItem/React/index.jsx      |  64 +--
 demos/src/Nodes/ListItem/React/styles.scss    |  13 +-
 demos/src/Nodes/ListItem/Vue/index.vue        |  48 +-
 demos/src/Nodes/Mention/React/MentionList.jsx |   4 +-
 .../src/Nodes/Mention/React/MentionList.scss  |  46 +-
 demos/src/Nodes/Mention/React/index.jsx       |   8 +-
 demos/src/Nodes/Mention/React/styles.scss     |  20 +-
 demos/src/Nodes/Mention/Vue/MentionList.vue   |  52 +-
 demos/src/Nodes/Mention/Vue/index.vue         |  28 +-
 demos/src/Nodes/OrderedList/React/index.jsx   |  52 +-
 demos/src/Nodes/OrderedList/React/styles.scss |  13 +-
 demos/src/Nodes/OrderedList/Vue/index.vue     |  42 +-
 demos/src/Nodes/Paragraph/React/index.jsx     |   2 +
 demos/src/Nodes/Paragraph/React/styles.scss   |   6 +
 demos/src/Nodes/Paragraph/Vue/index.vue       |   9 +
 demos/src/Nodes/Table/React/index.jsx         |  80 +--
 demos/src/Nodes/Table/React/styles.scss       |  45 +-
 demos/src/Nodes/Table/Vue/index.vue           | 172 +++----
 demos/src/Nodes/TaskItem/React/index.jsx      |  52 +-
 demos/src/Nodes/TaskItem/React/styles.scss    |  59 ++-
 demos/src/Nodes/TaskItem/Vue/index.vue        |  90 ++--
 demos/src/Nodes/TaskList/React/index.jsx      |  52 +-
 demos/src/Nodes/TaskList/React/styles.scss    |  59 ++-
 demos/src/Nodes/TaskList/Vue/index.vue        |  90 ++--
 demos/src/Nodes/Text/React/index.jsx          |   2 +
 demos/src/Nodes/Text/React/styles.scss        |   6 +
 demos/src/Nodes/Text/Vue/index.vue            |   9 +
 demos/src/Nodes/Youtube/React/index.jsx       |  55 ++-
 demos/src/Nodes/Youtube/React/styles.scss     |  80 +--
 demos/src/Nodes/Youtube/Vue/index.vue         | 135 ++----
 demos/src/Overview/Installation/Vue/index.vue |  94 ++++
 .../src/Tutorials/1-1-textarea/React/Note.tsx |   6 +-
 .../Tutorials/1-1-textarea/React/index.tsx    |  11 +-
 .../Tutorials/1-1-textarea/React/styles.css   |   3 -
 .../Tutorials/1-1-textarea/React/styles.scss  |  68 +++
 demos/src/Tutorials/1-1-textarea/Vue/Note.vue |   2 +-
 .../src/Tutorials/1-1-textarea/Vue/index.vue  |  14 +-
 .../src/Tutorials/1-1-textarea/Vue/styles.css |   3 -
 .../Tutorials/1-1-textarea/Vue/styles.scss    |  68 +++
 demos/src/Tutorials/1-2-tiptap/React/Note.tsx |   4 +-
 .../src/Tutorials/1-2-tiptap/React/index.tsx  |  11 +-
 .../src/Tutorials/1-2-tiptap/React/styles.css |   3 -
 .../Tutorials/1-2-tiptap/React/styles.scss    | 160 ++++++
 demos/src/Tutorials/1-2-tiptap/Vue/Note.vue   |   4 +-
 demos/src/Tutorials/1-2-tiptap/Vue/index.vue  |  12 +-
 demos/src/Tutorials/1-2-tiptap/Vue/styles.css |   3 -
 .../src/Tutorials/1-2-tiptap/Vue/styles.scss  | 160 ++++++
 .../Lexical-React/index.tsx                   |   5 +-
 demos/src/Tutorials/1-3-yjs/React/Note.tsx    |   4 +-
 demos/src/Tutorials/1-3-yjs/React/index.tsx   |  11 +-
 demos/src/Tutorials/1-3-yjs/React/styles.css  |   3 -
 demos/src/Tutorials/1-3-yjs/React/styles.scss | 160 ++++++
 demos/src/Tutorials/1-3-yjs/Vue/Note.vue      |   4 +-
 demos/src/Tutorials/1-3-yjs/Vue/index.vue     |  12 +-
 demos/src/Tutorials/1-3-yjs/Vue/styles.css    |   3 -
 demos/src/Tutorials/1-3-yjs/Vue/styles.scss   | 160 ++++++
 .../1-3-yjs_lexical/Lexical-React/index.tsx   |   5 +-
 demos/src/Tutorials/1-4-collab/React/Note.tsx |   6 +-
 .../src/Tutorials/1-4-collab/React/index.tsx  |  11 +-
 .../src/Tutorials/1-4-collab/React/styles.css |   3 -
 .../Tutorials/1-4-collab/React/styles.scss    | 160 ++++++
 demos/src/Tutorials/1-4-collab/Vue/Note.vue   |   6 +-
 demos/src/Tutorials/1-4-collab/Vue/index.vue  |   8 +-
 demos/src/Tutorials/1-4-collab/Vue/styles.css |   3 -
 .../src/Tutorials/1-4-collab/Vue/styles.scss  | 160 ++++++
 docs/collaboration/getting-started/install.md |   6 +-
 docs/collaboration/install.md                 |   6 +-
 docs/guide/node-views/examples.md             |   5 -
 docs/guide/node-views/react.md                |   2 +-
 309 files changed, 11469 insertions(+), 5716 deletions(-)
 rename demos/src/{GuideNodeViews/TableOfContents => Extensions/Color}/React/styles.scss (53%)
 create mode 100644 demos/src/Extensions/History/React/styles.scss
 create mode 100644 demos/src/Extensions/TextAlign/React/styles.scss
 create mode 100644 demos/src/Extensions/Typography/React/styles.scss
 delete mode 100644 demos/src/GuideNodeViews/TableOfContents/React/Component.jsx
 delete mode 100644 demos/src/GuideNodeViews/TableOfContents/React/Component.scss
 delete mode 100644 demos/src/GuideNodeViews/TableOfContents/React/TableOfContents.js
 delete mode 100644 demos/src/GuideNodeViews/TableOfContents/React/index.html
 delete mode 100644 demos/src/GuideNodeViews/TableOfContents/React/index.jsx
 delete mode 100644 demos/src/GuideNodeViews/TableOfContents/Vue/Component.vue
 delete mode 100644 demos/src/GuideNodeViews/TableOfContents/Vue/TableOfContents.js
 delete mode 100644 demos/src/GuideNodeViews/TableOfContents/Vue/index.html
 delete mode 100644 demos/src/GuideNodeViews/TableOfContents/Vue/index.vue
 create mode 100644 demos/src/Marks/Bold/React/styles.scss
 create mode 100644 demos/src/Marks/Italic/React/styles.scss
 create mode 100644 demos/src/Marks/Strike/React/styles.scss
 create mode 100644 demos/src/Marks/Subscript/React/styles.scss
 create mode 100644 demos/src/Marks/Superscript/React/styles.scss
 create mode 100644 demos/src/Marks/TextStyle/React/styles.scss
 create mode 100644 demos/src/Marks/Underline/React/styles.scss
 create mode 100644 demos/src/Nodes/Document/React/styles.scss
 create mode 100644 demos/src/Nodes/HardBreak/React/styles.scss
 create mode 100644 demos/src/Nodes/Heading/React/styles.scss
 create mode 100644 demos/src/Nodes/Paragraph/React/styles.scss
 create mode 100644 demos/src/Nodes/Text/React/styles.scss
 delete mode 100644 demos/src/Tutorials/1-1-textarea/React/styles.css
 create mode 100644 demos/src/Tutorials/1-1-textarea/React/styles.scss
 delete mode 100644 demos/src/Tutorials/1-1-textarea/Vue/styles.css
 create mode 100644 demos/src/Tutorials/1-1-textarea/Vue/styles.scss
 delete mode 100644 demos/src/Tutorials/1-2-tiptap/React/styles.css
 create mode 100644 demos/src/Tutorials/1-2-tiptap/React/styles.scss
 delete mode 100644 demos/src/Tutorials/1-2-tiptap/Vue/styles.css
 create mode 100644 demos/src/Tutorials/1-2-tiptap/Vue/styles.scss
 delete mode 100644 demos/src/Tutorials/1-3-yjs/React/styles.css
 create mode 100644 demos/src/Tutorials/1-3-yjs/React/styles.scss
 delete mode 100644 demos/src/Tutorials/1-3-yjs/Vue/styles.css
 create mode 100644 demos/src/Tutorials/1-3-yjs/Vue/styles.scss
 delete mode 100644 demos/src/Tutorials/1-4-collab/React/styles.css
 create mode 100644 demos/src/Tutorials/1-4-collab/React/styles.scss
 delete mode 100644 demos/src/Tutorials/1-4-collab/Vue/styles.css
 create mode 100644 demos/src/Tutorials/1-4-collab/Vue/styles.scss

diff --git a/demos/setup/style.scss b/demos/setup/style.scss
index f7509f871..b637b3410 100644
--- a/demos/setup/style.scss
+++ b/demos/setup/style.scss
@@ -1,4 +1,23 @@
-$colorBlack: #000;
+/* Base HTML and global element styles*/
+:root {
+  --white: #FFF;
+  --black: #2E2B29;
+  --black-contrast: #110F0E;
+  --gray-1: rgba(61, 37, 20, 0.05);
+  --gray-2: rgba(61, 37, 20, 0.08);
+  --gray-3: rgba(61, 37, 20, 0.12);
+  --gray-4: rgba(53, 38, 28, 0.30);
+  --gray-5: rgba(28, 25, 23, 0.60);
+  --purple: #6A00F5;
+  --purple-contrast: #5800CC;
+  --purple-light: rgba(88, 5, 255, 0.05);
+  --yellow-contrast: #FACC15;
+  --yellow: rgba(250, 204, 21, 0.4);
+  --yellow-light: #FFFAE5;
+  --red: #FF5C33;
+  --red-light: #FFEBE5;
+  --shadow: 0px 12px 33px 0px rgba(0, 0, 0, 0.06), 0px 3.618px 9.949px 0px rgba(0, 0, 0, 0.04);
+}
 
 *,
 *::before,
@@ -9,32 +28,46 @@ $colorBlack: #000;
 html {
   font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
   line-height: 1.5;
-  -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
+  -webkit-font-smoothing: antialiased;
 }
 
 body {
-  margin: 1rem;
   min-height: 10rem;
+  margin: 0;
 }
 
+:first-child {
+  margin-top: 0;
+}
+
+.tiptap {
+  caret-color: var(--purple);
+  margin: 1.5rem;
+
+  &:focus {
+    outline: none;
+  }
+}
+
+/* Custom scrollbar styles */
 ::-webkit-scrollbar {
-  width: 14px;
   height: 14px;
+  width: 14px;
 }
 
 ::-webkit-scrollbar-track {
-  border: 4px solid transparent;
   background-clip: padding-box;
-  border-radius: 8px;
   background-color: transparent;
+  border: 4px solid transparent;
+  border-radius: 8px;
 }
 
 ::-webkit-scrollbar-thumb {
-  border: 4px solid rgba(0, 0, 0, 0);
   background-clip: padding-box;
-  border-radius: 8px;
   background-color: rgba(0, 0, 0, 0);
+  border: 4px solid rgba(0, 0, 0, 0);
+  border-radius: 8px;
 }
 
 :hover::-webkit-scrollbar-thumb {
@@ -47,37 +80,276 @@ body {
 
 ::-webkit-scrollbar-button {
   display: none;
-  width: 0;
   height: 0;
+  width: 0;
 }
 
 ::-webkit-scrollbar-corner {
   background-color: transparent;
 }
 
+/* Specific element and component styles */
 button,
 input,
-select {
-  font-size: inherit;
+select,
+textarea {
+  background: var(--gray-2);
+  border-radius: 0.5rem;
+  border: none;
+  color: var(--black);
   font-family: inherit;
-  color: black;
-  margin: 0.1rem;
-  border: 1px solid black;
-  border-radius: 0.3rem;
-  padding: 0.1rem 0.4rem;
-  background: white;
-  accent-color: black;
+  font-size: 0.875rem;
+  font-weight: 500;
+  line-height: 1.15;
+  margin: none;
+  padding: 0.375rem 0.625rem;
+  transition: all 0.2s cubic-bezier(0.65,0.05,0.36,1);
+
+  &:hover {
+    background-color: var(--gray-3);
+    color: var(--black-contrast);
+  }
 
   &[disabled] {
-    opacity: 0.3;
+    background: var(--gray-1);
+    color: var(--gray-4);
+  }
+
+  &:checked {
+    accent-color: var(--purple);
+  }
+
+  &.primary {
+    background: var(--black);
+    color: var(--white);
+
+    &:hover {
+      background-color: var(--black-contrast);
+    }
+
+    &[disabled] {
+      background: var(--gray-1);
+      color: var(--gray-4);
+    }
+  }
+
+  &.is-active {
+    background: var(--purple);
+    color: var(--white);
+
+    &:hover {
+      background-color: var(--purple-contrast);
+      color: var(--white);
+    }
   }
 }
 
-.tiptap:focus {
-  outline: none;
+button:not([disabled]),
+select:not([disabled]) {
+  cursor: pointer;
 }
 
-.is-active {
-  background: black;
-  color: white;
+input[type="text"],
+textarea {
+  background-color: unset;
+  border: 1px solid var(--gray-3);
+  border-radius: 0.5rem;
+  color: var(--black);
+
+  &::placeholder {
+    color: var(--gray-4);
+  }
+
+  &:hover {
+    background-color: unset;
+    border-color: var(--gray-4);
+  }
+
+  &:focus-visible, &:focus {
+    border-color: var(--purple);
+    outline: none;
+  }
 }
+
+select {
+  /* reset */
+  appearance: none;
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path fill="Gray" d="M7 10l5 5 5-5z"/></svg>');
+  background-repeat: no-repeat;
+  background-position: right 0.1rem center;
+  background-size: 1.25rem 1.25rem;
+  padding-right: 1.25rem;
+
+  &:focus {
+    outline: 0;
+  }
+}
+
+form {
+  align-items: flex-start;
+  display: flex;
+  flex-direction: column;
+  gap: 0.25rem;
+}
+
+.hint {
+  align-items: center;
+  background-color: var(--yellow-light);
+  border-radius: 0.5rem;
+  border: 1px solid var(--gray-2);
+  display: flex;
+  flex-direction: row;
+  font-size: 0.75rem;
+  gap: 0.5rem;
+  line-height: 1.15;
+  min-height: 1.75rem;
+  padding: 0.25rem 0.5rem;
+
+  &.purple-spinner,
+  &.error {
+    justify-content: center;
+    text-align: center;
+    width: 100%;
+  }
+
+  &.purple-spinner {
+    background-color: var(--purple-light);
+
+    &::after {
+      content: "";
+      background-image: url("data:image/svg+xml;utf8,<svg version='1.1' id='Layer_1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' width='28px' height='30px' viewBox='0 0 24 30' style='enable-background:new 0 0 50 50;' xml:space='preserve'><rect x='0' y='10' width='6' height='10' fill='%236A00F5' rx='3' ry='3'><animateTransform attributeType='xml' attributeName='transform' type='translate' values='0 0; 0 5; 0 -5; 0 0' begin='0' dur='0.6s' repeatCount='indefinite'/></rect><rect x='10' y='10' width='6' height='10' fill='%236A00F5' rx='3' ry='3'><animateTransform attributeType='xml' attributeName='transform' type='translate' values='0 0; 0 5; 0 -5; 0 0' begin='0.2s' dur='0.6s' repeatCount='indefinite'/></rect><rect x='20' y='10' width='6' height='10' fill='%236A00F5' rx='3' ry='3'><animateTransform attributeType='xml' attributeName='transform' type='translate' values='0 0; 0 5; 0 -5; 0 0' begin='0.4s' dur='0.6s' repeatCount='indefinite'/></rect></svg>");
+      background-size: cover;
+      background-repeat: no-repeat;
+      background-position: center;
+      height: 1rem;
+      width: 1rem;
+    }
+  }
+
+  &.error {
+    background-color: var(--red-light);
+  }
+}
+
+.label,
+.label-small,
+.label-large {
+  color: var(--black);
+  font-size: 0.8125rem;
+  font-weight: 500;
+  line-height: 1.15;
+}
+
+.label-small {
+  color: var(--gray-5);
+  font-size: 0.75rem;
+  font-weight: 400;
+}
+
+.label-large {
+  font-size: 0.875rem;
+  font-weight: 700;
+}
+
+hr {
+  border: none;
+  border-top: 1px solid var(--gray-3);
+  margin: 0;
+  width: 100%;
+}
+
+/* Layout and structure */
+#app,
+.container {
+  display: flex;
+  flex-direction: column;
+}
+
+.button-group {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.25rem;
+}
+
+.control-group {
+  align-items: flex-start;
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+  margin: 1.5rem;
+}
+
+[data-node-view-wrapper] > .control-group {
+  margin: 1.5rem 0;
+}
+
+.flex-row {
+  display: flex;
+  flex-direction: row;
+  flex-wrap: wrap;
+  gap: 1rem;
+  justify-content: space-between;
+  width: 100%;
+}
+
+.switch-group {
+  align-items: center;
+  background: var(--gray-2);
+  border-radius: 0.5rem;
+  display: flex;
+  flex-direction: row;
+  flex-wrap: wrap;
+  flex: 0 1 auto;
+  justify-content: flex-start;
+  padding: 0.125rem;
+
+  label {
+    align-items: center;
+    border-radius: 0.375rem;
+    color: var(--gray-5);
+    cursor: pointer;
+    display: flex;
+    flex-direction: row;
+    font-size: 0.75rem;
+    font-weight: 500;
+    gap: 0.25rem;
+    line-height: 1.15;
+    min-height: 1.5rem;
+    padding: 0 0.375rem;
+    transition: all 0.2s cubic-bezier(0.65,0.05,0.36,1);
+
+    &:has(input:checked) {
+      background-color: var(--white);
+      color: var(--black-contrast);
+    }
+
+    &:hover {
+      color: var(--black);
+    }
+
+    input {
+      display: none;
+      margin: unset;
+    }
+  }
+}
+
+.output-group {
+  background-color: var(--gray-1);
+  display: flex;
+  flex-direction: column;
+  font-family: 'JetBrainsMono', monospace;
+  font-size: 0.75rem;
+  gap: 1rem;
+  margin-top: 2.5rem;
+  padding: 1.5rem;
+
+  label {
+    color: var(--black);
+    font-size: 0.875rem;
+    font-weight: 700;
+    line-height: 1.15;
+  }
+}
\ No newline at end of file
diff --git a/demos/src/Commands/Cut/React/index.jsx b/demos/src/Commands/Cut/React/index.jsx
index 3b5164055..66a871ec2 100644
--- a/demos/src/Commands/Cut/React/index.jsx
+++ b/demos/src/Commands/Cut/React/index.jsx
@@ -21,10 +21,12 @@ const MenuBar = ({ editor }) => {
   }, [editor])
 
   return (
-    <>
-      <button onClick={onCutToStart}>Cut content to start of document</button>
-      <button onClick={onCutToEnd}>Cut content to end of document</button>
-    </>
+    <div className="control-group">
+      <div className="button-group">
+        <button onClick={onCutToStart}>Cut content to start of document</button>
+        <button onClick={onCutToEnd}>Cut content to end of document</button>
+      </div>
+    </div>
   )
 }
 
@@ -49,7 +51,7 @@ export default () => {
         Hi there,
       </h2>
       <p>
-        this is a <em>basic</em> example of <strong>tiptap</strong>. Sure, there are all kind of basic text styles you’d probably expect from a text editor. But wait until you see the lists:
+        this is a <em>basic</em> example of <strong>Tiptap</strong>. Sure, there are all kind of basic text styles you’d probably expect from a text editor. But wait until you see the lists:
       </p>
       <ul>
         <li>
@@ -77,9 +79,9 @@ export default () => {
   })
 
   return (
-    <div>
+    <>
       <MenuBar editor={editor} />
       <EditorContent editor={editor} />
-    </div>
+    </>
   )
 }
diff --git a/demos/src/Commands/Cut/React/index.spec.js b/demos/src/Commands/Cut/React/index.spec.js
index b23e72c17..005560dee 100644
--- a/demos/src/Commands/Cut/React/index.spec.js
+++ b/demos/src/Commands/Cut/React/index.spec.js
@@ -21,41 +21,41 @@ context('/src/Examples/Default/React/', () => {
   })
 
   const buttonMarks = [
-    { label: 'bold', tag: 'strong' },
-    { label: 'italic', tag: 'em' },
-    { label: 'strike', tag: 's' },
+    { label: 'Bold', tag: 'strong' },
+    { label: 'Italic', tag: 'em' },
+    { label: 'Strike', tag: 's' },
   ]
 
   buttonMarks.forEach(m => {
     it(`should disable ${m.label} when the code tag is enabled for cursor`, () => {
       cy.get('.tiptap').type('{selectall}Hello world')
-      cy.get('button').contains('code').click()
+      cy.get('button').contains('Code').click()
       cy.get('button').contains(m.label).should('be.disabled')
     })
 
     it(`should enable ${m.label} when the code tag is disabled for cursor`, () => {
       cy.get('.tiptap').type('{selectall}Hello world')
-      cy.get('button').contains('code').click()
-      cy.get('button').contains('code').click()
+      cy.get('button').contains('Code').click()
+      cy.get('button').contains('Code').click()
       cy.get('button').contains(m.label).should('not.be.disabled')
     })
 
     it(`should disable ${m.label} when the code tag is enabled for selection`, () => {
       cy.get('.tiptap').type('{selectall}Hello world{selectall}')
-      cy.get('button').contains('code').click()
+      cy.get('button').contains('Code').click()
       cy.get('button').contains(m.label).should('be.disabled')
     })
 
     it(`should enable ${m.label} when the code tag is disabled for selection`, () => {
       cy.get('.tiptap').type('{selectall}Hello world{selectall}')
-      cy.get('button').contains('code').click()
-      cy.get('button').contains('code').click()
+      cy.get('button').contains('Code').click()
+      cy.get('button').contains('Code').click()
       cy.get('button').contains(m.label).should('not.be.disabled')
     })
 
     it(`should apply ${m.label} when the button is pressed`, () => {
       cy.get('.tiptap').type('{selectall}Hello world')
-      cy.get('button').contains('paragraph').click()
+      cy.get('button').contains('Paragraph').click()
       cy.get('.tiptap').type('{selectall}')
       cy.get('button').contains(m.label).click()
       cy.get(`.tiptap ${m.tag}`).should('exist').should('have.text', 'Hello world')
@@ -64,40 +64,40 @@ context('/src/Examples/Default/React/', () => {
 
   it('should clear marks when the button is pressed', () => {
     cy.get('.tiptap').type('{selectall}Hello world')
-    cy.get('button').contains('paragraph').click()
+    cy.get('button').contains('Paragraph').click()
     cy.get('.tiptap').type('{selectall}')
-    cy.get('button').contains('bold').click()
+    cy.get('button').contains('Bold').click()
     cy.get('.tiptap strong').should('exist').should('have.text', 'Hello world')
-    cy.get('button').contains('clear marks').click()
+    cy.get('button').contains('Clear marks').click()
     cy.get('.tiptap strong').should('not.exist')
   })
 
   it('should clear nodes when the button is pressed', () => {
     cy.get('.tiptap').type('{selectall}Hello world')
-    cy.get('button').contains('bullet list').click()
+    cy.get('button').contains('Bullet list').click()
     cy.get('.tiptap ul').should('exist').should('have.text', 'Hello world')
     cy.get('.tiptap').type('{enter}A second item{enter}A third item{selectall}')
-    cy.get('button').contains('clear nodes').click()
+    cy.get('button').contains('Clear nodes').click()
     cy.get('.tiptap ul').should('not.exist')
     cy.get('.tiptap p').should('have.length', 3)
   })
 
   const buttonNodes = [
-    { label: 'h1', tag: 'h1' },
-    { label: 'h2', tag: 'h2' },
-    { label: 'h3', tag: 'h3' },
-    { label: 'h4', tag: 'h4' },
-    { label: 'h5', tag: 'h5' },
-    { label: 'h6', tag: 'h6' },
-    { label: 'bullet list', tag: 'ul' },
-    { label: 'ordered list', tag: 'ol' },
-    { label: 'code block', tag: 'pre code' },
-    { label: 'blockquote', tag: 'blockquote' },
+    { label: 'H1', tag: 'h1' },
+    { label: 'H2', tag: 'h2' },
+    { label: 'H3', tag: 'h3' },
+    { label: 'H4', tag: 'h4' },
+    { label: 'H5', tag: 'h5' },
+    { label: 'H6', tag: 'h6' },
+    { label: 'Bullet list', tag: 'ul' },
+    { label: 'Ordered list', tag: 'ol' },
+    { label: 'Code block', tag: 'pre code' },
+    { label: 'Blockquote', tag: 'blockquote' },
   ]
 
   buttonNodes.forEach(n => {
     it(`should set ${n.label} when the button is pressed`, () => {
-      cy.get('button').contains('paragraph').click()
+      cy.get('button').contains('Paragraph').click()
       cy.get('.tiptap').type('{selectall}Hello world{selectall}')
 
       cy.get('button').contains(n.label).click()
@@ -109,35 +109,35 @@ context('/src/Examples/Default/React/', () => {
 
   it('should add a hr when on the same line as a node', () => {
     cy.get('.tiptap').type('{rightArrow}')
-    cy.get('button').contains('horizontal rule').click()
+    cy.get('button').contains('Horizontal rule').click()
     cy.get('.tiptap hr').should('exist')
     cy.get('.tiptap h1').should('exist')
   })
 
   it('should add a hr when on a new line', () => {
     cy.get('.tiptap').type('{rightArrow}{enter}')
-    cy.get('button').contains('horizontal rule').click()
+    cy.get('button').contains('Horizontal rule').click()
     cy.get('.tiptap hr').should('exist')
     cy.get('.tiptap h1').should('exist')
   })
 
   it('should add a br', () => {
     cy.get('.tiptap').type('{rightArrow}')
-    cy.get('button').contains('hard break').click()
+    cy.get('button').contains('Hard break').click()
     cy.get('.tiptap h1 br').should('exist')
   })
 
   it('should undo', () => {
     cy.get('.tiptap').type('{selectall}{backspace}')
-    cy.get('button').contains('undo').click()
+    cy.get('button').contains('Undo').click()
     cy.get('.tiptap').should('contain', 'Hello world')
   })
 
   it('should redo', () => {
     cy.get('.tiptap').type('{selectall}{backspace}')
-    cy.get('button').contains('undo').click()
+    cy.get('button').contains('Undo').click()
     cy.get('.tiptap').should('contain', 'Hello world')
-    cy.get('button').contains('redo').click()
+    cy.get('button').contains('Redo').click()
     cy.get('.tiptap').should('not.contain', 'Hello world')
   })
 })
diff --git a/demos/src/Commands/Cut/React/styles.scss b/demos/src/Commands/Cut/React/styles.scss
index 4d2b2c81e..7694d7322 100644
--- a/demos/src/Commands/Cut/React/styles.scss
+++ b/demos/src/Commands/Cut/React/styles.scss
@@ -1,56 +1,91 @@
 /* Basic editor styles */
 .tiptap {
-  > * + * {
-    margin-top: 0.75em;
+  :first-child {
+    margin-top: 0;
   }
 
-  ul,
+  /* List styles */
+  ul, 
   ol {
     padding: 0 1rem;
-  }
-
-  h1,
-  h2,
-  h3,
-  h4,
-  h5,
-  h6 {
-    line-height: 1.1;
-  }
-
-  code {
-    background-color: rgba(#616161, 0.1);
-    color: #616161;
-  }
-
-  pre {
-    background: #0D0D0D;
-    color: #FFF;
-    font-family: 'JetBrainsMono', monospace;
-    padding: 0.75rem 1rem;
-    border-radius: 0.5rem;
-
-    code {
-      color: inherit;
-      padding: 0;
-      background: none;
-      font-size: 0.8rem;
+    margin: 1.25rem 1rem 1.25rem 0.4rem;
+    
+    li p {
+      margin-top: 0.25em;
+      margin-bottom: 0.25em;
     }
   }
 
-  img {
-    max-width: 100%;
-    height: auto;
+  /* Heading styles */
+  h1, 
+  h2, 
+  h3, 
+  h4, 
+  h5, 
+  h6 {
+    line-height: 1.1;
+    margin-top: 2.5rem;
+    text-wrap: pretty;
+  }
+
+  h1, 
+  h2 {
+    margin-top: 3.5rem;
+    margin-bottom: 1.5rem;
+  }
+
+  h1 { 
+    font-size: 1.4rem; 
+  }
+
+  h2 { 
+    font-size: 1.2rem; 
+  }
+
+  h3 { 
+    font-size: 1.1rem; 
+  }
+
+  h4, 
+  h5, 
+  h6 { 
+    font-size: 1rem; 
+  }
+
+  /* Code and preformatted text styles */
+  code {
+    background-color: var(--purple-light);
+    border-radius: 0.4rem;
+    color: var(--black);
+    font-size: 0.85rem;
+    padding: 0.25em 0.3em;
+  }
+
+  pre {
+    background: var(--black);
+    border-radius: 0.5rem;
+    color: var(--white);
+    font-family: 'JetBrainsMono', monospace;
+    margin: 1.5rem 0;
+    padding: 0.75rem 1rem;
+
+    code {
+      background: none;
+      color: inherit;
+      font-size: 0.8rem;
+      padding: 0;
+    }
   }
 
   blockquote {
+    border-left: 3px solid var(--gray-3);
+    margin: 1.5rem 0;
     padding-left: 1rem;
-    border-left: 2px solid rgba(#0D0D0D, 0.1);
   }
 
   hr {
     border: none;
-    border-top: 2px solid rgba(#0D0D0D, 0.1);
+    border-top: 1px solid var(--gray-2);
     margin: 2rem 0;
   }
 }
diff --git a/demos/src/Commands/InsertContent/React/index.jsx b/demos/src/Commands/InsertContent/React/index.jsx
index e2ffe37d1..2da2ad9bb 100644
--- a/demos/src/Commands/InsertContent/React/index.jsx
+++ b/demos/src/Commands/InsertContent/React/index.jsx
@@ -29,17 +29,19 @@ const MenuBar = () => {
   }
 
   return (
-    <>
-      <button data-test-id="html-content" onClick={() => editor.chain().insertContent(htmlContent).focus().run()}>
-        Insert html content
-      </button>
-      <button data-test-id="html-content-spans" onClick={() => editor.chain().insertContent('<p><b>Hello</b> <i>World</i></p>').focus().run()}>
-        Insert html with span tags content
-      </button>
-      <button data-test-id="text-content" onClick={() => editor.chain().insertContent(textContent).focus().run()}>
-        Insert text content
-      </button>
-    </>
+    <div className="control-group">
+      <div className="button-group">
+        <button data-test-id="html-content" onClick={() => editor.chain().insertContent(htmlContent).focus().run()}>
+          Insert HTML content
+        </button>
+        <button data-test-id="html-content-spans" onClick={() => editor.chain().insertContent('<p><b>Hello</b> <i>World</i></p>').focus().run()}>
+          Insert HTML with span tags content
+        </button>
+        <button data-test-id="text-content" onClick={() => editor.chain().insertContent(textContent).focus().run()}>
+          Insert text content
+        </button>
+      </div>
+    </div>
   )
 }
 
diff --git a/demos/src/Commands/InsertContent/React/styles.scss b/demos/src/Commands/InsertContent/React/styles.scss
index 4d2b2c81e..7694d7322 100644
--- a/demos/src/Commands/InsertContent/React/styles.scss
+++ b/demos/src/Commands/InsertContent/React/styles.scss
@@ -1,56 +1,91 @@
 /* Basic editor styles */
 .tiptap {
-  > * + * {
-    margin-top: 0.75em;
+  :first-child {
+    margin-top: 0;
   }
 
-  ul,
+  /* List styles */
+  ul, 
   ol {
     padding: 0 1rem;
-  }
-
-  h1,
-  h2,
-  h3,
-  h4,
-  h5,
-  h6 {
-    line-height: 1.1;
-  }
-
-  code {
-    background-color: rgba(#616161, 0.1);
-    color: #616161;
-  }
-
-  pre {
-    background: #0D0D0D;
-    color: #FFF;
-    font-family: 'JetBrainsMono', monospace;
-    padding: 0.75rem 1rem;
-    border-radius: 0.5rem;
-
-    code {
-      color: inherit;
-      padding: 0;
-      background: none;
-      font-size: 0.8rem;
+    margin: 1.25rem 1rem 1.25rem 0.4rem;
+    
+    li p {
+      margin-top: 0.25em;
+      margin-bottom: 0.25em;
     }
   }
 
-  img {
-    max-width: 100%;
-    height: auto;
+  /* Heading styles */
+  h1, 
+  h2, 
+  h3, 
+  h4, 
+  h5, 
+  h6 {
+    line-height: 1.1;
+    margin-top: 2.5rem;
+    text-wrap: pretty;
+  }
+
+  h1, 
+  h2 {
+    margin-top: 3.5rem;
+    margin-bottom: 1.5rem;
+  }
+
+  h1 { 
+    font-size: 1.4rem; 
+  }
+
+  h2 { 
+    font-size: 1.2rem; 
+  }
+
+  h3 { 
+    font-size: 1.1rem; 
+  }
+
+  h4, 
+  h5, 
+  h6 { 
+    font-size: 1rem; 
+  }
+
+  /* Code and preformatted text styles */
+  code {
+    background-color: var(--purple-light);
+    border-radius: 0.4rem;
+    color: var(--black);
+    font-size: 0.85rem;
+    padding: 0.25em 0.3em;
+  }
+
+  pre {
+    background: var(--black);
+    border-radius: 0.5rem;
+    color: var(--white);
+    font-family: 'JetBrainsMono', monospace;
+    margin: 1.5rem 0;
+    padding: 0.75rem 1rem;
+
+    code {
+      background: none;
+      color: inherit;
+      font-size: 0.8rem;
+      padding: 0;
+    }
   }
 
   blockquote {
+    border-left: 3px solid var(--gray-3);
+    margin: 1.5rem 0;
     padding-left: 1rem;
-    border-left: 2px solid rgba(#0D0D0D, 0.1);
   }
 
   hr {
     border: none;
-    border-top: 2px solid rgba(#0D0D0D, 0.1);
+    border-top: 1px solid var(--gray-2);
     margin: 2rem 0;
   }
 }
diff --git a/demos/src/Commands/InsertContentApplyingRules/React/index.jsx b/demos/src/Commands/InsertContentApplyingRules/React/index.jsx
index 1f8036053..c41d3ade9 100644
--- a/demos/src/Commands/InsertContentApplyingRules/React/index.jsx
+++ b/demos/src/Commands/InsertContentApplyingRules/React/index.jsx
@@ -14,154 +14,152 @@ const MenuBar = () => {
   }
 
   return (
-    <>
+    <div className="control-group">
       <div>
-        <button
-          onClick={() => setUseInputRules(prev => !prev)}
-          style={{
-            color: useInputRules ? 'white' : 'inherit',
-            backgroundColor: useInputRules ? 'black' : 'transparent',
-          }}
-        >
-          Apply Input Rules
-        </button>
-        <button
-          onClick={() => setUsePasteRules(prev => !prev)}
-          style={{
-            color: usePasteRules ? 'white' : 'inherit',
-            backgroundColor: usePasteRules ? 'black' : 'transparent',
-          }}
-        >
-          Apply Paste Rules
-        </button>
+        <label>
+          <input
+            type="checkbox"
+            checked={useInputRules}
+            onChange={() => setUseInputRules(prev => !prev)}
+          />
+          Apply input rules
+        </label>
+        <label>
+          <input
+            type="checkbox"
+            checked={usePasteRules}
+            onChange={() => setUsePasteRules(prev => !prev)}
+          />
+          Apply paste rules
+        </label>
       </div>
 
-      <br />
+      <div className="button-group">
+        <button
+          onClick={() => {
+            editor
+              .chain()
+              .insertContent('-', {
+                applyInputRules: useInputRules,
+                applyPasteRules: usePasteRules,
+              })
+              .focus()
+              .run()
+          }}
+          data-test-1
+        >
+          Insert "-"
+        </button>
+        <button
+          onClick={() => {
+            editor
+              .chain()
+              .insertContent(' ', {
+                applyInputRules: useInputRules,
+                applyPasteRules: usePasteRules,
+              })
+              .focus()
+              .run()
+          }}
+          data-test-2
+        >
+          Insert " "
+        </button>
+        <button
+          onClick={() => {
+            editor
+              .chain()
+              .insertContent('A', {
+                applyInputRules: useInputRules,
+                applyPasteRules: usePasteRules,
+              })
+              .focus()
+              .run()
+          }}
+          data-test-3
+        >
+          Insert "A"
+        </button>
 
-      <button
-        onClick={() => {
-          editor
-            .chain()
-            .insertContent('-', {
-              applyInputRules: useInputRules,
-              applyPasteRules: usePasteRules,
-            })
-            .focus()
-            .run()
-        }}
-        data-test-1
-      >
-        Insert "-"
-      </button>
-      <button
-        onClick={() => {
-          editor
-            .chain()
-            .insertContent(' ', {
-              applyInputRules: useInputRules,
-              applyPasteRules: usePasteRules,
-            })
-            .focus()
-            .run()
-        }}
-        data-test-2
-      >
-        Insert " "
-      </button>
-      <button
-        onClick={() => {
-          editor
-            .chain()
-            .insertContent('A', {
-              applyInputRules: useInputRules,
-              applyPasteRules: usePasteRules,
-            })
-            .focus()
-            .run()
-        }}
-        data-test-3
-      >
-        Insert "A"
-      </button>
+        <br />
 
-      <br />
-
-      <button
-        onClick={() => {
-          editor
-            .chain()
-            .insertContent('*this is', {
-              applyInputRules: useInputRules,
-              applyPasteRules: usePasteRules,
-            })
-            .focus()
-            .run()
-        }}
-        data-test-4
-      >
-        Insert "*this is"
-      </button>
-      <button
-        onClick={() => {
-          editor
-            .chain()
-            .insertContent(' a test*', {
-              applyInputRules: useInputRules,
-              applyPasteRules: usePasteRules,
-            })
-            .focus()
-            .run()
-        }}
-        data-test-5
-      >
-        Insert " a test*"
-      </button>
-      <button
-        onClick={() => {
-          editor
-            .chain()
-            .insertContent(' a test*, whooho', {
-              applyInputRules: useInputRules,
-              applyPasteRules: usePasteRules,
-            })
-            .focus()
-            .run()
-        }}
-        data-test-6
-      >
-        Insert " a test*, whooho."
-      </button>
-      <button
-        onClick={() => {
-          editor
-            .chain()
-            .insertContent('*this is a test*, whooho.', {
-              applyInputRules: useInputRules,
-              applyPasteRules: usePasteRules,
-            })
-            .focus()
-            .run()
-        }}
-        data-test-7
-      >
-        Insert "*this is a test*, whooho."
-      </button>
-      <button
-        onClick={() => {
-          editor
-            .chain()
-            .insertContent('*this is a test*', {
-              applyInputRules: useInputRules,
-              applyPasteRules: usePasteRules,
-            })
-            .focus()
-            .run()
-        }}
-        data-test-8
-      >
-        Insert "*this is a test*"
-      </button>
-    </>
+        <button
+          onClick={() => {
+            editor
+              .chain()
+              .insertContent('*this is', {
+                applyInputRules: useInputRules,
+                applyPasteRules: usePasteRules,
+              })
+              .focus()
+              .run()
+          }}
+          data-test-4
+        >
+          Insert "*this is"
+        </button>
+        <button
+          onClick={() => {
+            editor
+              .chain()
+              .insertContent(' a test*', {
+                applyInputRules: useInputRules,
+                applyPasteRules: usePasteRules,
+              })
+              .focus()
+              .run()
+          }}
+          data-test-5
+        >
+          Insert " a test*"
+        </button>
+        <button
+          onClick={() => {
+            editor
+              .chain()
+              .insertContent(' a test*, whooho', {
+                applyInputRules: useInputRules,
+                applyPasteRules: usePasteRules,
+              })
+              .focus()
+              .run()
+          }}
+          data-test-6
+        >
+          Insert " a test*, whooho."
+        </button>
+        <button
+          onClick={() => {
+            editor
+              .chain()
+              .insertContent('*this is a test*, whooho.', {
+                applyInputRules: useInputRules,
+                applyPasteRules: usePasteRules,
+              })
+              .focus()
+              .run()
+          }}
+          data-test-7
+        >
+          Insert "*this is a test*, whooho."
+        </button>
+        <button
+          onClick={() => {
+            editor
+              .chain()
+              .insertContent('*this is a test*', {
+                applyInputRules: useInputRules,
+                applyPasteRules: usePasteRules,
+              })
+              .focus()
+              .run()
+          }}
+          data-test-8
+        >
+          Insert "*this is a test*"
+        </button>
+      </div>
+    </div>
   )
 }
 
diff --git a/demos/src/Commands/InsertContentApplyingRules/React/styles.scss b/demos/src/Commands/InsertContentApplyingRules/React/styles.scss
index 4d2b2c81e..7694d7322 100644
--- a/demos/src/Commands/InsertContentApplyingRules/React/styles.scss
+++ b/demos/src/Commands/InsertContentApplyingRules/React/styles.scss
@@ -1,56 +1,91 @@
 /* Basic editor styles */
 .tiptap {
-  > * + * {
-    margin-top: 0.75em;
+  :first-child {
+    margin-top: 0;
   }
 
-  ul,
+  /* List styles */
+  ul, 
   ol {
     padding: 0 1rem;
-  }
-
-  h1,
-  h2,
-  h3,
-  h4,
-  h5,
-  h6 {
-    line-height: 1.1;
-  }
-
-  code {
-    background-color: rgba(#616161, 0.1);
-    color: #616161;
-  }
-
-  pre {
-    background: #0D0D0D;
-    color: #FFF;
-    font-family: 'JetBrainsMono', monospace;
-    padding: 0.75rem 1rem;
-    border-radius: 0.5rem;
-
-    code {
-      color: inherit;
-      padding: 0;
-      background: none;
-      font-size: 0.8rem;
+    margin: 1.25rem 1rem 1.25rem 0.4rem;
+    
+    li p {
+      margin-top: 0.25em;
+      margin-bottom: 0.25em;
     }
   }
 
-  img {
-    max-width: 100%;
-    height: auto;
+  /* Heading styles */
+  h1, 
+  h2, 
+  h3, 
+  h4, 
+  h5, 
+  h6 {
+    line-height: 1.1;
+    margin-top: 2.5rem;
+    text-wrap: pretty;
+  }
+
+  h1, 
+  h2 {
+    margin-top: 3.5rem;
+    margin-bottom: 1.5rem;
+  }
+
+  h1 { 
+    font-size: 1.4rem; 
+  }
+
+  h2 { 
+    font-size: 1.2rem; 
+  }
+
+  h3 { 
+    font-size: 1.1rem; 
+  }
+
+  h4, 
+  h5, 
+  h6 { 
+    font-size: 1rem; 
+  }
+
+  /* Code and preformatted text styles */
+  code {
+    background-color: var(--purple-light);
+    border-radius: 0.4rem;
+    color: var(--black);
+    font-size: 0.85rem;
+    padding: 0.25em 0.3em;
+  }
+
+  pre {
+    background: var(--black);
+    border-radius: 0.5rem;
+    color: var(--white);
+    font-family: 'JetBrainsMono', monospace;
+    margin: 1.5rem 0;
+    padding: 0.75rem 1rem;
+
+    code {
+      background: none;
+      color: inherit;
+      font-size: 0.8rem;
+      padding: 0;
+    }
   }
 
   blockquote {
+    border-left: 3px solid var(--gray-3);
+    margin: 1.5rem 0;
     padding-left: 1rem;
-    border-left: 2px solid rgba(#0D0D0D, 0.1);
   }
 
   hr {
     border: none;
-    border-top: 2px solid rgba(#0D0D0D, 0.1);
+    border-top: 1px solid var(--gray-2);
     margin: 2rem 0;
   }
 }
diff --git a/demos/src/Examples/AutolinkValidation/React/index.jsx b/demos/src/Examples/AutolinkValidation/React/index.jsx
index b32b9ecf7..adafc3ece 100644
--- a/demos/src/Examples/AutolinkValidation/React/index.jsx
+++ b/demos/src/Examples/AutolinkValidation/React/index.jsx
@@ -50,22 +50,26 @@ export default () => {
   }
 
   return (
-    <div>
-      <button
-        onClick={setLink}
-        className={editor.isActive('link') ? 'is-active' : ''}
-        data-testid="setLink"
-      >
-        setLink
-      </button>
-      <button
-        onClick={() => editor.chain().focus().unsetLink().run()}
-        disabled={!editor.isActive('link')}
-        data-testid="unsetLink"
-      >
-        unsetLink
-      </button>
+    <>
+      <div className="control-group">
+        <div className="button-group">
+          <button
+            onClick={setLink}
+            className={editor.isActive('link') ? 'is-active' : ''}
+            data-testid="setLink"
+          >
+            Set link
+          </button>
+          <button
+            onClick={() => editor.chain().focus().unsetLink().run()}
+            disabled={!editor.isActive('link')}
+            data-testid="unsetLink"
+          >
+            Unset link
+          </button>
+        </div>
+      </div>
       <EditorContent editor={editor} />
-    </div>
+    </>
   )
 }
diff --git a/demos/src/Examples/AutolinkValidation/React/styles.scss b/demos/src/Examples/AutolinkValidation/React/styles.scss
index 01978738f..0fa92804d 100644
--- a/demos/src/Examples/AutolinkValidation/React/styles.scss
+++ b/demos/src/Examples/AutolinkValidation/React/styles.scss
@@ -1,54 +1,101 @@
 /* Basic editor styles */
 .tiptap {
-  > * + * {
-    margin-top: 0.75em;
+  :first-child {
+    margin-top: 0;
   }
 
-  ul,
+  /* List styles */
+  ul, 
   ol {
     padding: 0 1rem;
-  }
-
-  h1,
-  h2,
-  h3,
-  h4,
-  h5,
-  h6 {
-    line-height: 1.1;
-  }
-
-  code {
-    background-color: rgba(#616161, 0.1);
-    color: #616161;
-  }
-
-  pre {
-    background: #0D0D0D;
-    color: #FFF;
-    font-family: 'JetBrainsMono', monospace;
-    padding: 0.75rem 1rem;
-    border-radius: 0.5rem;
-
-    code {
-      color: inherit;
-      padding: 0;
-      background: none;
-      font-size: 0.8rem;
+    margin: 1.25rem 1rem 1.25rem 0.4rem;
+    
+    li p {
+      margin-top: 0.25em;
+      margin-bottom: 0.25em;
     }
   }
 
-  img {
-    max-width: 100%;
-    height: auto;
+  /* Heading styles */
+  h1, 
+  h2, 
+  h3, 
+  h4, 
+  h5, 
+  h6 {
+    line-height: 1.1;
+    margin-top: 2.5rem;
+    text-wrap: pretty;
   }
 
-  hr {
-    margin: 1rem 0;
+  h1, 
+  h2 {
+    margin-top: 3.5rem;
+    margin-bottom: 1.5rem;
+  }
+
+  h1 { 
+    font-size: 1.4rem; 
+  }
+
+  h2 { 
+    font-size: 1.2rem; 
+  }
+
+  h3 { 
+    font-size: 1.1rem; 
+  }
+
+  h4, 
+  h5, 
+  h6 { 
+    font-size: 1rem; 
+  }
+
+  /* Code and preformatted text styles */
+  code {
+    background-color: var(--purple-light);
+    border-radius: 0.4rem;
+    color: var(--black);
+    font-size: 0.85rem;
+    padding: 0.25em 0.3em;
+  }
+
+  pre {
+    background: var(--black);
+    border-radius: 0.5rem;
+    color: var(--white);
+    font-family: 'JetBrainsMono', monospace;
+    margin: 1.5rem 0;
+    padding: 0.75rem 1rem;
+
+    code {
+      background: none;
+      color: inherit;
+      font-size: 0.8rem;
+      padding: 0;
+    }
   }
 
   blockquote {
+    border-left: 3px solid var(--gray-3);
+    margin: 1.5rem 0;
     padding-left: 1rem;
-    border-left: 2px solid rgba(#0D0D0D, 0.1);
+  }
+
+  hr {
+    border: none;
+    border-top: 1px solid var(--gray-2);
+    margin: 2rem 0;
+  }
+
+  /* Link styles */
+  a {
+    color: var(--purple);
+    cursor: pointer;
+
+    &:hover {
+      color: var(--purple-contrast);
+    }
   }
 }
diff --git a/demos/src/Examples/Book/React/index.jsx b/demos/src/Examples/Book/React/index.jsx
index b09b08eeb..89c530bcc 100644
--- a/demos/src/Examples/Book/React/index.jsx
+++ b/demos/src/Examples/Book/React/index.jsx
@@ -12,116 +12,118 @@ const MenuBar = ({ editor }) => {
   }
 
   return (
-    <>
-      <button
-        onClick={() => editor.chain().focus().toggleBold().run()}
-        className={editor.isActive('bold') ? 'is-active' : ''}
-      >
-        bold
-      </button>
-      <button
-        onClick={() => editor.chain().focus().toggleItalic().run()}
-        className={editor.isActive('italic') ? 'is-active' : ''}
-      >
-        italic
-      </button>
-      <button
-        onClick={() => editor.chain().focus().toggleStrike().run()}
-        className={editor.isActive('strike') ? 'is-active' : ''}
-      >
-        strike
-      </button>
-      <button
-        onClick={() => editor.chain().focus().toggleCode().run()}
-        className={editor.isActive('code') ? 'is-active' : ''}
-      >
-        code
-      </button>
-      <button onClick={() => editor.chain().focus().unsetAllMarks().run()}>
-        clear marks
-      </button>
-      <button onClick={() => editor.chain().focus().clearNodes().run()}>
-        clear nodes
-      </button>
-      <button
-        onClick={() => editor.chain().focus().setParagraph().run()}
-        className={editor.isActive('paragraph') ? 'is-active' : ''}
-      >
-        paragraph
-      </button>
-      <button
-        onClick={() => editor.chain().focus().toggleHeading({ level: 1 }).run()}
-        className={editor.isActive('heading', { level: 1 }) ? 'is-active' : ''}
-      >
-        h1
-      </button>
-      <button
-        onClick={() => editor.chain().focus().toggleHeading({ level: 2 }).run()}
-        className={editor.isActive('heading', { level: 2 }) ? 'is-active' : ''}
-      >
-        h2
-      </button>
-      <button
-        onClick={() => editor.chain().focus().toggleHeading({ level: 3 }).run()}
-        className={editor.isActive('heading', { level: 3 }) ? 'is-active' : ''}
-      >
-        h3
-      </button>
-      <button
-        onClick={() => editor.chain().focus().toggleHeading({ level: 4 }).run()}
-        className={editor.isActive('heading', { level: 4 }) ? 'is-active' : ''}
-      >
-        h4
-      </button>
-      <button
-        onClick={() => editor.chain().focus().toggleHeading({ level: 5 }).run()}
-        className={editor.isActive('heading', { level: 5 }) ? 'is-active' : ''}
-      >
-        h5
-      </button>
-      <button
-        onClick={() => editor.chain().focus().toggleHeading({ level: 6 }).run()}
-        className={editor.isActive('heading', { level: 6 }) ? 'is-active' : ''}
-      >
-        h6
-      </button>
-      <button
-        onClick={() => editor.chain().focus().toggleBulletList().run()}
-        className={editor.isActive('bulletList') ? 'is-active' : ''}
-      >
-        bullet list
-      </button>
-      <button
-        onClick={() => editor.chain().focus().toggleOrderedList().run()}
-        className={editor.isActive('orderedList') ? 'is-active' : ''}
-      >
-        ordered list
-      </button>
-      <button
-        onClick={() => editor.chain().focus().toggleCodeBlock().run()}
-        className={editor.isActive('codeBlock') ? 'is-active' : ''}
-      >
-        code block
-      </button>
-      <button
-        onClick={() => editor.chain().focus().toggleBlockquote().run()}
-        className={editor.isActive('blockquote') ? 'is-active' : ''}
-      >
-        blockquote
-      </button>
-      <button onClick={() => editor.chain().focus().setHorizontalRule().run()}>
-        horizontal rule
-      </button>
-      <button onClick={() => editor.chain().focus().setHardBreak().run()}>
-        hard break
-      </button>
-      <button onClick={() => editor.chain().focus().undo().run()}>
-        undo
-      </button>
-      <button onClick={() => editor.chain().focus().redo().run()}>
-        redo
-      </button>
-    </>
+    <div className="control-group">
+      <div className="button-group">
+        <button
+          onClick={() => editor.chain().focus().toggleBold().run()}
+          className={editor.isActive('bold') ? 'is-active' : ''}
+        >
+          Bold
+        </button>
+        <button
+          onClick={() => editor.chain().focus().toggleItalic().run()}
+          className={editor.isActive('italic') ? 'is-active' : ''}
+        >
+          Italic
+        </button>
+        <button
+          onClick={() => editor.chain().focus().toggleStrike().run()}
+          className={editor.isActive('strike') ? 'is-active' : ''}
+        >
+          Strike
+        </button>
+        <button
+          onClick={() => editor.chain().focus().toggleCode().run()}
+          className={editor.isActive('code') ? 'is-active' : ''}
+        >
+          Code
+        </button>
+        <button onClick={() => editor.chain().focus().unsetAllMarks().run()}>
+          Clear marks
+        </button>
+        <button onClick={() => editor.chain().focus().clearNodes().run()}>
+          Clear nodes
+        </button>
+        <button
+          onClick={() => editor.chain().focus().setParagraph().run()}
+          className={editor.isActive('paragraph') ? 'is-active' : ''}
+        >
+          Paragraph
+        </button>
+        <button
+          onClick={() => editor.chain().focus().toggleHeading({ level: 1 }).run()}
+          className={editor.isActive('heading', { level: 1 }) ? 'is-active' : ''}
+        >
+          H1
+        </button>
+        <button
+          onClick={() => editor.chain().focus().toggleHeading({ level: 2 }).run()}
+          className={editor.isActive('heading', { level: 2 }) ? 'is-active' : ''}
+        >
+          H2
+        </button>
+        <button
+          onClick={() => editor.chain().focus().toggleHeading({ level: 3 }).run()}
+          className={editor.isActive('heading', { level: 3 }) ? 'is-active' : ''}
+        >
+          H3
+        </button>
+        <button
+          onClick={() => editor.chain().focus().toggleHeading({ level: 4 }).run()}
+          className={editor.isActive('heading', { level: 4 }) ? 'is-active' : ''}
+        >
+          H4
+        </button>
+        <button
+          onClick={() => editor.chain().focus().toggleHeading({ level: 5 }).run()}
+          className={editor.isActive('heading', { level: 5 }) ? 'is-active' : ''}
+        >
+          H5
+        </button>
+        <button
+          onClick={() => editor.chain().focus().toggleHeading({ level: 6 }).run()}
+          className={editor.isActive('heading', { level: 6 }) ? 'is-active' : ''}
+        >
+          H6
+        </button>
+        <button
+          onClick={() => editor.chain().focus().toggleBulletList().run()}
+          className={editor.isActive('bulletList') ? 'is-active' : ''}
+        >
+          Bullet list
+        </button>
+        <button
+          onClick={() => editor.chain().focus().toggleOrderedList().run()}
+          className={editor.isActive('orderedList') ? 'is-active' : ''}
+        >
+          Ordered list
+        </button>
+        <button
+          onClick={() => editor.chain().focus().toggleCodeBlock().run()}
+          className={editor.isActive('codeBlock') ? 'is-active' : ''}
+        >
+          Code block
+        </button>
+        <button
+          onClick={() => editor.chain().focus().toggleBlockquote().run()}
+          className={editor.isActive('blockquote') ? 'is-active' : ''}
+        >
+          Blockquote
+        </button>
+        <button onClick={() => editor.chain().focus().setHorizontalRule().run()}>
+          Horizontal rule
+        </button>
+        <button onClick={() => editor.chain().focus().setHardBreak().run()}>
+          Hard break
+        </button>
+        <button onClick={() => editor.chain().focus().undo().run()}>
+          Undo
+        </button>
+        <button onClick={() => editor.chain().focus().redo().run()}>
+          Redo
+        </button>
+      </div>
+    </div>
   )
 }
 
@@ -139,9 +141,9 @@ export default () => {
   })
 
   return (
-    <div>
+    <>
       <MenuBar editor={editor} />
       <EditorContent editor={editor} />
-    </div>
+    </>
   )
 }
diff --git a/demos/src/Examples/Book/React/styles.scss b/demos/src/Examples/Book/React/styles.scss
index 01978738f..7694d7322 100644
--- a/demos/src/Examples/Book/React/styles.scss
+++ b/demos/src/Examples/Book/React/styles.scss
@@ -1,54 +1,91 @@
 /* Basic editor styles */
 .tiptap {
-  > * + * {
-    margin-top: 0.75em;
+  :first-child {
+    margin-top: 0;
   }
 
-  ul,
+  /* List styles */
+  ul, 
   ol {
     padding: 0 1rem;
-  }
-
-  h1,
-  h2,
-  h3,
-  h4,
-  h5,
-  h6 {
-    line-height: 1.1;
-  }
-
-  code {
-    background-color: rgba(#616161, 0.1);
-    color: #616161;
-  }
-
-  pre {
-    background: #0D0D0D;
-    color: #FFF;
-    font-family: 'JetBrainsMono', monospace;
-    padding: 0.75rem 1rem;
-    border-radius: 0.5rem;
-
-    code {
-      color: inherit;
-      padding: 0;
-      background: none;
-      font-size: 0.8rem;
+    margin: 1.25rem 1rem 1.25rem 0.4rem;
+    
+    li p {
+      margin-top: 0.25em;
+      margin-bottom: 0.25em;
     }
   }
 
-  img {
-    max-width: 100%;
-    height: auto;
+  /* Heading styles */
+  h1, 
+  h2, 
+  h3, 
+  h4, 
+  h5, 
+  h6 {
+    line-height: 1.1;
+    margin-top: 2.5rem;
+    text-wrap: pretty;
   }
 
-  hr {
-    margin: 1rem 0;
+  h1, 
+  h2 {
+    margin-top: 3.5rem;
+    margin-bottom: 1.5rem;
+  }
+
+  h1 { 
+    font-size: 1.4rem; 
+  }
+
+  h2 { 
+    font-size: 1.2rem; 
+  }
+
+  h3 { 
+    font-size: 1.1rem; 
+  }
+
+  h4, 
+  h5, 
+  h6 { 
+    font-size: 1rem; 
+  }
+
+  /* Code and preformatted text styles */
+  code {
+    background-color: var(--purple-light);
+    border-radius: 0.4rem;
+    color: var(--black);
+    font-size: 0.85rem;
+    padding: 0.25em 0.3em;
+  }
+
+  pre {
+    background: var(--black);
+    border-radius: 0.5rem;
+    color: var(--white);
+    font-family: 'JetBrainsMono', monospace;
+    margin: 1.5rem 0;
+    padding: 0.75rem 1rem;
+
+    code {
+      background: none;
+      color: inherit;
+      font-size: 0.8rem;
+      padding: 0;
+    }
   }
 
   blockquote {
+    border-left: 3px solid var(--gray-3);
+    margin: 1.5rem 0;
     padding-left: 1rem;
-    border-left: 2px solid rgba(#0D0D0D, 0.1);
+  }
+
+  hr {
+    border: none;
+    border-top: 1px solid var(--gray-2);
+    margin: 2rem 0;
   }
 }
diff --git a/demos/src/Examples/Book/Vue/index.vue b/demos/src/Examples/Book/Vue/index.vue
index e319b9586..4bf6d9d1a 100644
--- a/demos/src/Examples/Book/Vue/index.vue
+++ b/demos/src/Examples/Book/Vue/index.vue
@@ -1,70 +1,74 @@
 <template>
-  <div v-if="editor">
-    <button @click="editor.chain().focus().toggleBold().run()" :class="{ 'is-active': editor.isActive('bold') }">
-      bold
-    </button>
-    <button @click="editor.chain().focus().toggleItalic().run()" :class="{ 'is-active': editor.isActive('italic') }">
-      italic
-    </button>
-    <button @click="editor.chain().focus().toggleStrike().run()" :class="{ 'is-active': editor.isActive('strike') }">
-      strike
-    </button>
-    <button @click="editor.chain().focus().toggleCode().run()" :class="{ 'is-active': editor.isActive('code') }">
-      code
-    </button>
-    <button @click="editor.chain().focus().unsetAllMarks().run()">
-      clear marks
-    </button>
-    <button @click="editor.chain().focus().clearNodes().run()">
-      clear nodes
-    </button>
-    <button @click="editor.chain().focus().setParagraph().run()" :class="{ 'is-active': editor.isActive('paragraph') }">
-      paragraph
-    </button>
-    <button @click="editor.chain().focus().toggleHeading({ level: 1 }).run()" :class="{ 'is-active': editor.isActive('heading', { level: 1 }) }">
-      h1
-    </button>
-    <button @click="editor.chain().focus().toggleHeading({ level: 2 }).run()" :class="{ 'is-active': editor.isActive('heading', { level: 2 }) }">
-      h2
-    </button>
-    <button @click="editor.chain().focus().toggleHeading({ level: 3 }).run()" :class="{ 'is-active': editor.isActive('heading', { level: 3 }) }">
-      h3
-    </button>
-    <button @click="editor.chain().focus().toggleHeading({ level: 4 }).run()" :class="{ 'is-active': editor.isActive('heading', { level: 4 }) }">
-      h4
-    </button>
-    <button @click="editor.chain().focus().toggleHeading({ level: 5 }).run()" :class="{ 'is-active': editor.isActive('heading', { level: 5 }) }">
-      h5
-    </button>
-    <button @click="editor.chain().focus().toggleHeading({ level: 6 }).run()" :class="{ 'is-active': editor.isActive('heading', { level: 6 }) }">
-      h6
-    </button>
-    <button @click="editor.chain().focus().toggleBulletList().run()" :class="{ 'is-active': editor.isActive('bulletList') }">
-      bullet list
-    </button>
-    <button @click="editor.chain().focus().toggleOrderedList().run()" :class="{ 'is-active': editor.isActive('orderedList') }">
-      ordered list
-    </button>
-    <button @click="editor.chain().focus().toggleCodeBlock().run()" :class="{ 'is-active': editor.isActive('codeBlock') }">
-      code block
-    </button>
-    <button @click="editor.chain().focus().toggleBlockquote().run()" :class="{ 'is-active': editor.isActive('blockquote') }">
-      blockquote
-    </button>
-    <button @click="editor.chain().focus().setHorizontalRule().run()">
-      horizontal rule
-    </button>
-    <button @click="editor.chain().focus().setHardBreak().run()">
-      hard break
-    </button>
-    <button @click="editor.chain().focus().undo().run()">
-      undo
-    </button>
-    <button @click="editor.chain().focus().redo().run()">
-      redo
-    </button>
+  <div v-if="editor" class="container">
+    <div class="control-group">
+      <div class="button-group">
+        <button @click="editor.chain().focus().toggleBold().run()" :class="{ 'is-active': editor.isActive('bold') }">
+          Bold
+        </button>
+        <button @click="editor.chain().focus().toggleItalic().run()" :class="{ 'is-active': editor.isActive('italic') }">
+          Italic
+        </button>
+        <button @click="editor.chain().focus().toggleStrike().run()" :class="{ 'is-active': editor.isActive('strike') }">
+          Strike
+        </button>
+        <button @click="editor.chain().focus().toggleCode().run()" :class="{ 'is-active': editor.isActive('code') }">
+          Code
+        </button>
+        <button @click="editor.chain().focus().unsetAllMarks().run()">
+          Clear marks
+        </button>
+        <button @click="editor.chain().focus().clearNodes().run()">
+          Clear nodes
+        </button>
+        <button @click="editor.chain().focus().setParagraph().run()" :class="{ 'is-active': editor.isActive('paragraph') }">
+          Paragraph
+        </button>
+        <button @click="editor.chain().focus().toggleHeading({ level: 1 }).run()" :class="{ 'is-active': editor.isActive('heading', { level: 1 }) }">
+          H1
+        </button>
+        <button @click="editor.chain().focus().toggleHeading({ level: 2 }).run()" :class="{ 'is-active': editor.isActive('heading', { level: 2 }) }">
+          H2
+        </button>
+        <button @click="editor.chain().focus().toggleHeading({ level: 3 }).run()" :class="{ 'is-active': editor.isActive('heading', { level: 3 }) }">
+          H3
+        </button>
+        <button @click="editor.chain().focus().toggleHeading({ level: 4 }).run()" :class="{ 'is-active': editor.isActive('heading', { level: 4 }) }">
+          H4
+        </button>
+        <button @click="editor.chain().focus().toggleHeading({ level: 5 }).run()" :class="{ 'is-active': editor.isActive('heading', { level: 5 }) }">
+          H5
+        </button>
+        <button @click="editor.chain().focus().toggleHeading({ level: 6 }).run()" :class="{ 'is-active': editor.isActive('heading', { level: 6 }) }">
+          H6
+        </button>
+        <button @click="editor.chain().focus().toggleBulletList().run()" :class="{ 'is-active': editor.isActive('bulletList') }">
+          Bullet list
+        </button>
+        <button @click="editor.chain().focus().toggleOrderedList().run()" :class="{ 'is-active': editor.isActive('orderedList') }">
+          Ordered list
+        </button>
+        <button @click="editor.chain().focus().toggleCodeBlock().run()" :class="{ 'is-active': editor.isActive('codeBlock') }">
+          Code block
+        </button>
+        <button @click="editor.chain().focus().toggleBlockquote().run()" :class="{ 'is-active': editor.isActive('blockquote') }">
+          Blockquote
+        </button>
+        <button @click="editor.chain().focus().setHorizontalRule().run()">
+          Horizontal rule
+        </button>
+        <button @click="editor.chain().focus().setHardBreak().run()">
+          Hard break
+        </button>
+        <button @click="editor.chain().focus().undo().run()">
+          Undo
+        </button>
+        <button @click="editor.chain().focus().redo().run()">
+          Redo
+        </button>
+      </div>
+    </div>
+    <editor-content :editor="editor" />
   </div>
-  <editor-content :editor="editor" />
 </template>
 
 <script>
@@ -107,15 +111,23 @@ export default {
 <style lang="scss">
 /* Basic editor styles */
 .tiptap {
-  > * + * {
-    margin-top: 0.75em;
+  :first-child {
+    margin-top: 0;
   }
 
+  /* List styles */
   ul,
   ol {
     padding: 0 1rem;
+    margin: 1.25rem 1rem 1.25rem 0.4rem;
+
+    li p {
+      margin-top: 0.25em;
+      margin-bottom: 0.25em;
+    }
   }
 
+  /* Heading styles */
   h1,
   h2,
   h3,
@@ -123,40 +135,69 @@ export default {
   h5,
   h6 {
     line-height: 1.1;
+    margin-top: 2.5rem;
+    text-wrap: pretty;
   }
 
+  h1,
+  h2 {
+    margin-top: 3.5rem;
+    margin-bottom: 1.5rem;
+  }
+
+  h1 {
+    font-size: 1.4rem;
+  }
+
+  h2 {
+    font-size: 1.2rem;
+  }
+
+  h3 {
+    font-size: 1.1rem;
+  }
+
+  h4,
+  h5,
+  h6 {
+    font-size: 1rem;
+  }
+
+  /* Code and preformatted text styles */
   code {
-    background-color: rgba(#616161, 0.1);
-    color: #616161;
+    background-color: var(--purple-light);
+    border-radius: 0.4rem;
+    color: var(--black);
+    font-size: 0.85rem;
+    padding: 0.25em 0.3em;
   }
 
   pre {
-    background: #0D0D0D;
-    color: #FFF;
-    font-family: 'JetBrainsMono', monospace;
-    padding: 0.75rem 1rem;
+    background: var(--black);
     border-radius: 0.5rem;
+    color: var(--white);
+    font-family: 'JetBrainsMono', monospace;
+    margin: 1.5rem 0;
+    padding: 0.75rem 1rem;
 
     code {
-      color: inherit;
-      padding: 0;
       background: none;
+      color: inherit;
       font-size: 0.8rem;
+      padding: 0;
     }
   }
 
-  img {
-    max-width: 100%;
-    height: auto;
+  blockquote {
+    border-left: 3px solid var(--gray-3);
+    margin: 1.5rem 0;
+    padding-left: 1rem;
   }
 
   hr {
-    margin: 1rem 0;
-  }
-
-  blockquote {
-    padding-left: 1rem;
-    border-left: 2px solid rgba(#0D0D0D, 0.1);
+    border: none;
+    border-top: 1px solid var(--gray-2);
+    margin: 2rem 0;
   }
 }
 </style>
diff --git a/demos/src/Examples/CSSModules/React/index.jsx b/demos/src/Examples/CSSModules/React/index.jsx
index 3f2a1b8fe..0d8254d0c 100644
--- a/demos/src/Examples/CSSModules/React/index.jsx
+++ b/demos/src/Examples/CSSModules/React/index.jsx
@@ -17,109 +17,109 @@ const MenuBar = ({ editor }) => {
         onClick={() => editor.chain().focus().toggleBold().run()}
         className={editor.isActive('bold') ? 'is-active' : ''}
       >
-        bold
+        Bold
       </button>
       <button
         onClick={() => editor.chain().focus().toggleItalic().run()}
         className={editor.isActive('italic') ? 'is-active' : ''}
       >
-        italic
+        Italic
       </button>
       <button
         onClick={() => editor.chain().focus().toggleStrike().run()}
         className={editor.isActive('strike') ? 'is-active' : ''}
       >
-        strike
+        Strike
       </button>
       <button
         onClick={() => editor.chain().focus().toggleCode().run()}
         className={editor.isActive('code') ? 'is-active' : ''}
       >
-        code
+        Code
       </button>
       <button onClick={() => editor.chain().focus().unsetAllMarks().run()}>
-        clear marks
+        Clear marks
       </button>
       <button onClick={() => editor.chain().focus().clearNodes().run()}>
-        clear nodes
+        Clear nodes
       </button>
       <button
         onClick={() => editor.chain().focus().setParagraph().run()}
         className={editor.isActive('paragraph') ? 'is-active' : ''}
       >
-        paragraph
+        Paragraph
       </button>
       <button
         onClick={() => editor.chain().focus().toggleHeading({ level: 1 }).run()}
         className={editor.isActive('heading', { level: 1 }) ? 'is-active' : ''}
       >
-        h1
+        H1
       </button>
       <button
         onClick={() => editor.chain().focus().toggleHeading({ level: 2 }).run()}
         className={editor.isActive('heading', { level: 2 }) ? 'is-active' : ''}
       >
-        h2
+        H2
       </button>
       <button
         onClick={() => editor.chain().focus().toggleHeading({ level: 3 }).run()}
         className={editor.isActive('heading', { level: 3 }) ? 'is-active' : ''}
       >
-        h3
+        H3
       </button>
       <button
         onClick={() => editor.chain().focus().toggleHeading({ level: 4 }).run()}
         className={editor.isActive('heading', { level: 4 }) ? 'is-active' : ''}
       >
-        h4
+        H4
       </button>
       <button
         onClick={() => editor.chain().focus().toggleHeading({ level: 5 }).run()}
         className={editor.isActive('heading', { level: 5 }) ? 'is-active' : ''}
       >
-        h5
+        H5
       </button>
       <button
         onClick={() => editor.chain().focus().toggleHeading({ level: 6 }).run()}
         className={editor.isActive('heading', { level: 6 }) ? 'is-active' : ''}
       >
-        h6
+        H6
       </button>
       <button
         onClick={() => editor.chain().focus().toggleBulletList().run()}
         className={editor.isActive('bulletList') ? 'is-active' : ''}
       >
-        bullet list
+        Bullet list
       </button>
       <button
         onClick={() => editor.chain().focus().toggleOrderedList().run()}
         className={editor.isActive('orderedList') ? 'is-active' : ''}
       >
-        ordered list
+        Ordered list
       </button>
       <button
         onClick={() => editor.chain().focus().toggleCodeBlock().run()}
         className={editor.isActive('codeBlock') ? 'is-active' : ''}
       >
-        code block
+        Code block
       </button>
       <button
         onClick={() => editor.chain().focus().toggleBlockquote().run()}
         className={editor.isActive('blockquote') ? 'is-active' : ''}
       >
-        blockquote
+        Blockquote
       </button>
       <button onClick={() => editor.chain().focus().setHorizontalRule().run()}>
-        horizontal rule
+        Horizontal rule
       </button>
       <button onClick={() => editor.chain().focus().setHardBreak().run()}>
-        hard break
+        Hard break
       </button>
       <button onClick={() => editor.chain().focus().undo().run()}>
-        undo
+        Undo
       </button>
       <button onClick={() => editor.chain().focus().redo().run()}>
-        redo
+        Redo
       </button>
     </div>
   )
@@ -135,7 +135,7 @@ export default () => {
         Hi there,
       </h2>
       <p>
-        this is a <em>basic</em> example of <strong>tiptap</strong>. Sure, there are all kind of basic text styles you’d probably expect from a text editor. But wait until you see the lists:
+        this is a <em>basic</em> example of <strong>Tiptap</strong>. Sure, there are all kind of basic text styles you’d probably expect from a text editor. But wait until you see the lists:
       </p>
       <ul>
         <li>
@@ -163,9 +163,9 @@ export default () => {
   })
 
   return (
-    <div>
+    <>
       <MenuBar editor={editor} />
       <EditorContent editor={editor} />
-    </div>
+    </>
   )
 }
diff --git a/demos/src/Examples/CSSModules/React/styles.scss b/demos/src/Examples/CSSModules/React/styles.scss
index 4d2b2c81e..7694d7322 100644
--- a/demos/src/Examples/CSSModules/React/styles.scss
+++ b/demos/src/Examples/CSSModules/React/styles.scss
@@ -1,56 +1,91 @@
 /* Basic editor styles */
 .tiptap {
-  > * + * {
-    margin-top: 0.75em;
+  :first-child {
+    margin-top: 0;
   }
 
-  ul,
+  /* List styles */
+  ul, 
   ol {
     padding: 0 1rem;
-  }
-
-  h1,
-  h2,
-  h3,
-  h4,
-  h5,
-  h6 {
-    line-height: 1.1;
-  }
-
-  code {
-    background-color: rgba(#616161, 0.1);
-    color: #616161;
-  }
-
-  pre {
-    background: #0D0D0D;
-    color: #FFF;
-    font-family: 'JetBrainsMono', monospace;
-    padding: 0.75rem 1rem;
-    border-radius: 0.5rem;
-
-    code {
-      color: inherit;
-      padding: 0;
-      background: none;
-      font-size: 0.8rem;
+    margin: 1.25rem 1rem 1.25rem 0.4rem;
+    
+    li p {
+      margin-top: 0.25em;
+      margin-bottom: 0.25em;
     }
   }
 
-  img {
-    max-width: 100%;
-    height: auto;
+  /* Heading styles */
+  h1, 
+  h2, 
+  h3, 
+  h4, 
+  h5, 
+  h6 {
+    line-height: 1.1;
+    margin-top: 2.5rem;
+    text-wrap: pretty;
+  }
+
+  h1, 
+  h2 {
+    margin-top: 3.5rem;
+    margin-bottom: 1.5rem;
+  }
+
+  h1 { 
+    font-size: 1.4rem; 
+  }
+
+  h2 { 
+    font-size: 1.2rem; 
+  }
+
+  h3 { 
+    font-size: 1.1rem; 
+  }
+
+  h4, 
+  h5, 
+  h6 { 
+    font-size: 1rem; 
+  }
+
+  /* Code and preformatted text styles */
+  code {
+    background-color: var(--purple-light);
+    border-radius: 0.4rem;
+    color: var(--black);
+    font-size: 0.85rem;
+    padding: 0.25em 0.3em;
+  }
+
+  pre {
+    background: var(--black);
+    border-radius: 0.5rem;
+    color: var(--white);
+    font-family: 'JetBrainsMono', monospace;
+    margin: 1.5rem 0;
+    padding: 0.75rem 1rem;
+
+    code {
+      background: none;
+      color: inherit;
+      font-size: 0.8rem;
+      padding: 0;
+    }
   }
 
   blockquote {
+    border-left: 3px solid var(--gray-3);
+    margin: 1.5rem 0;
     padding-left: 1rem;
-    border-left: 2px solid rgba(#0D0D0D, 0.1);
   }
 
   hr {
     border: none;
-    border-top: 2px solid rgba(#0D0D0D, 0.1);
+    border-top: 1px solid var(--gray-2);
     margin: 2rem 0;
   }
 }
diff --git a/demos/src/Examples/CSSModules/Vue/index.vue b/demos/src/Examples/CSSModules/Vue/index.vue
index 415ed705b..daf684ee9 100644
--- a/demos/src/Examples/CSSModules/Vue/index.vue
+++ b/demos/src/Examples/CSSModules/Vue/index.vue
@@ -1,67 +1,67 @@
 <template>
   <div v-if="editor" class="toolbar" :class="styles.toolbar">
     <button @click="editor.chain().focus().toggleBold().run()" :class="{ 'is-active': editor.isActive('bold') }">
-      bold
+      Bold
     </button>
     <button @click="editor.chain().focus().toggleItalic().run()" :class="{ 'is-active': editor.isActive('italic') }">
-      italic
+      Italic
     </button>
     <button @click="editor.chain().focus().toggleStrike().run()" :class="{ 'is-active': editor.isActive('strike') }">
-      strike
+      Strike
     </button>
     <button @click="editor.chain().focus().toggleCode().run()" :class="{ 'is-active': editor.isActive('code') }">
-      code
+      Code
     </button>
     <button @click="editor.chain().focus().unsetAllMarks().run()">
-      clear marks
+      Clear marks
     </button>
     <button @click="editor.chain().focus().clearNodes().run()">
-      clear nodes
+      Clear nodes
     </button>
     <button @click="editor.chain().focus().setParagraph().run()" :class="{ 'is-active': editor.isActive('paragraph') }">
-      paragraph
+      Paragraph
     </button>
     <button @click="editor.chain().focus().toggleHeading({ level: 1 }).run()" :class="{ 'is-active': editor.isActive('heading', { level: 1 }) }">
-      h1
+      H1
     </button>
     <button @click="editor.chain().focus().toggleHeading({ level: 2 }).run()" :class="{ 'is-active': editor.isActive('heading', { level: 2 }) }">
-      h2
+      H2
     </button>
     <button @click="editor.chain().focus().toggleHeading({ level: 3 }).run()" :class="{ 'is-active': editor.isActive('heading', { level: 3 }) }">
-      h3
+      H3
     </button>
     <button @click="editor.chain().focus().toggleHeading({ level: 4 }).run()" :class="{ 'is-active': editor.isActive('heading', { level: 4 }) }">
-      h4
+      H4
     </button>
     <button @click="editor.chain().focus().toggleHeading({ level: 5 }).run()" :class="{ 'is-active': editor.isActive('heading', { level: 5 }) }">
-      h5
+      H5
     </button>
     <button @click="editor.chain().focus().toggleHeading({ level: 6 }).run()" :class="{ 'is-active': editor.isActive('heading', { level: 6 }) }">
-      h6
+      H6
     </button>
     <button @click="editor.chain().focus().toggleBulletList().run()" :class="{ 'is-active': editor.isActive('bulletList') }">
-      bullet list
+      Bullet list
     </button>
     <button @click="editor.chain().focus().toggleOrderedList().run()" :class="{ 'is-active': editor.isActive('orderedList') }">
-      ordered list
+      Ordered list
     </button>
     <button @click="editor.chain().focus().toggleCodeBlock().run()" :class="{ 'is-active': editor.isActive('codeBlock') }">
-      code block
+      Code block
     </button>
     <button @click="editor.chain().focus().toggleBlockquote().run()" :class="{ 'is-active': editor.isActive('blockquote') }">
-      blockquote
+      Blockquote
     </button>
     <button @click="editor.chain().focus().setHorizontalRule().run()">
-      horizontal rule
+      Horizontal rule
     </button>
     <button @click="editor.chain().focus().setHardBreak().run()">
-      hard break
+      Hard break
     </button>
     <button @click="editor.chain().focus().undo().run()">
-      undo
+      Undo
     </button>
     <button @click="editor.chain().focus().redo().run()">
-      redo
+      Redo
     </button>
   </div>
   <editor-content :editor="editor" />
@@ -95,7 +95,7 @@ export default {
           This is a red headline
         </h1>
         <p>
-          this is a <em>basic</em> example of <strong>tiptap</strong>. Sure, there are all kind of basic text styles you’d probably expect from a text editor. But wait until you see the lists:
+          this is a <em>basic</em> example of <strong>Tiptap</strong>. Sure, there are all kind of basic text styles you’d probably expect from a text editor. But wait until you see the lists:
         </p>
         <ul>
           <li>
@@ -132,15 +132,23 @@ export default {
 <style lang="scss">
 /* Basic editor styles */
 .tiptap {
-  > * + * {
-    margin-top: 0.75em;
+  :first-child {
+    margin-top: 0;
   }
 
+  /* List styles */
   ul,
   ol {
     padding: 0 1rem;
+    margin: 1.25rem 1rem 1.25rem 0.4rem;
+
+    li p {
+      margin-top: 0.25em;
+      margin-bottom: 0.25em;
+    }
   }
 
+  /* Heading styles */
   h1,
   h2,
   h3,
@@ -148,41 +156,68 @@ export default {
   h5,
   h6 {
     line-height: 1.1;
+    margin-top: 2.5rem;
+    text-wrap: pretty;
   }
 
+  h1,
+  h2 {
+    margin-top: 3.5rem;
+    margin-bottom: 1.5rem;
+  }
+
+  h1 {
+    font-size: 1.4rem;
+  }
+
+  h2 {
+    font-size: 1.2rem;
+  }
+
+  h3 {
+    font-size: 1.1rem;
+  }
+
+  h4,
+  h5,
+  h6 {
+    font-size: 1rem;
+  }
+
+  /* Code and preformatted text styles */
   code {
-    background-color: rgba(#616161, 0.1);
-    color: #616161;
+    background-color: var(--purple-light);
+    border-radius: 0.4rem;
+    color: var(--black);
+    font-size: 0.85rem;
+    padding: 0.25em 0.3em;
   }
 
   pre {
-    background: #0D0D0D;
-    color: #FFF;
-    font-family: 'JetBrainsMono', monospace;
-    padding: 0.75rem 1rem;
+    background: var(--black);
     border-radius: 0.5rem;
+    color: var(--white);
+    font-family: 'JetBrainsMono', monospace;
+    margin: 1.5rem 0;
+    padding: 0.75rem 1rem;
 
     code {
-      color: inherit;
-      padding: 0;
       background: none;
+      color: inherit;
       font-size: 0.8rem;
+      padding: 0;
     }
   }
 
-  img {
-    max-width: 100%;
-    height: auto;
-  }
-
   blockquote {
+    border-left: 3px solid var(--gray-3);
+    margin: 1.5rem 0;
     padding-left: 1rem;
-    border-left: 2px solid rgba(#0D0D0D, 0.1);
   }
 
   hr {
     border: none;
-    border-top: 2px solid rgba(#0D0D0D, 0.1);
+    border-top: 1px solid var(--gray-2);
     margin: 2rem 0;
   }
 }
diff --git a/demos/src/Examples/CodeBlockLanguage/React/CodeBlockComponent.scss b/demos/src/Examples/CodeBlockLanguage/React/CodeBlockComponent.scss
index d0b00f233..a95bce4ee 100644
--- a/demos/src/Examples/CodeBlockLanguage/React/CodeBlockComponent.scss
+++ b/demos/src/Examples/CodeBlockLanguage/React/CodeBlockComponent.scss
@@ -1,9 +1,13 @@
-.code-block {
-  position: relative;
-
-  select {
-    position: absolute;
-    right: 0.5rem;
-    top: 0.5rem;
+.tiptap {
+  .code-block {
+    position: relative;
+  
+    select {
+      position: absolute;
+      background-color: var(--white);
+      background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path fill="Black" d="M7 10l5 5 5-5z"/></svg>');
+      right: 0.5rem;
+      top: 0.5rem;
+    }
   }
-}
\ No newline at end of file
+}
diff --git a/demos/src/Examples/CodeBlockLanguage/React/index.jsx b/demos/src/Examples/CodeBlockLanguage/React/index.jsx
index f73505b31..cdb1d35de 100644
--- a/demos/src/Examples/CodeBlockLanguage/React/index.jsx
+++ b/demos/src/Examples/CodeBlockLanguage/React/index.jsx
@@ -30,9 +30,13 @@ const MenuBar = ({ editor }) => {
   }
 
   return (
-    <button onClick={() => editor.chain().focus().toggleCodeBlock().run()} className={editor.isActive('codeBlock') ? 'is-active' : ''}>
-      code block
-    </button>
+    <div className="control-group">
+      <div className="button-group">
+        <button onClick={() => editor.chain().focus().toggleCodeBlock().run()} className={editor.isActive('codeBlock') ? 'is-active' : ''}>
+          Toggle code block
+        </button>
+      </div>
+    </div>
   )
 }
 
@@ -72,9 +76,9 @@ export default () => {
   })
 
   return (
-    <div>
+    <>
       <MenuBar editor={editor} />
       <EditorContent editor={editor} />
-    </div>
+    </>
   )
 }
diff --git a/demos/src/Examples/CodeBlockLanguage/React/styles.scss b/demos/src/Examples/CodeBlockLanguage/React/styles.scss
index b2dad62e5..a8484746e 100644
--- a/demos/src/Examples/CodeBlockLanguage/React/styles.scss
+++ b/demos/src/Examples/CodeBlockLanguage/React/styles.scss
@@ -1,23 +1,25 @@
 /* Basic editor styles */
 .tiptap {
-  > * + * {
-    margin-top: 0.75em;
+  :first-child {
+    margin-top: 0;
   }
 
   pre {
-    background: #0d0d0d;
-    color: #fff;
-    font-family: "JetBrainsMono", monospace;
-    padding: 0.75rem 1rem;
+    background: var(--black);
     border-radius: 0.5rem;
+    color: var(--white);
+    font-family: 'JetBrainsMono', monospace;
+    margin: 1.5rem 0;
+    padding: 0.75rem 1rem;
 
     code {
-      color: inherit;
-      padding: 0;
       background: none;
+      color: inherit;
       font-size: 0.8rem;
+      padding: 0;
     }
 
+    /* Code styling */
     .hljs-comment,
     .hljs-quote {
       color: #616161;
diff --git a/demos/src/Examples/CodeBlockLanguage/Vue/CodeBlockComponent.vue b/demos/src/Examples/CodeBlockLanguage/Vue/CodeBlockComponent.vue
index 1ee9de4af..02048ae0a 100644
--- a/demos/src/Examples/CodeBlockLanguage/Vue/CodeBlockComponent.vue
+++ b/demos/src/Examples/CodeBlockLanguage/Vue/CodeBlockComponent.vue
@@ -46,13 +46,17 @@ export default {
 </script>
 
 <style lang="scss">
-.code-block {
-  position: relative;
+.tiptap {
+  .code-block {
+    position: relative;
 
-  select {
-    position: absolute;
-    top: 0.5rem;
-    right: 0.5rem;
+    select {
+      position: absolute;
+      background-color: var(--white);
+      background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path fill="Black" d="M7 10l5 5 5-5z"/></svg>');
+      right: 0.5rem;
+      top: 0.5rem;
+    }
   }
 }
 </style>
diff --git a/demos/src/Examples/CodeBlockLanguage/Vue/index.vue b/demos/src/Examples/CodeBlockLanguage/Vue/index.vue
index c8d3cf449..6a30301cd 100644
--- a/demos/src/Examples/CodeBlockLanguage/Vue/index.vue
+++ b/demos/src/Examples/CodeBlockLanguage/Vue/index.vue
@@ -1,8 +1,12 @@
 <template>
-  <div v-if="editor">
-    <button @click="editor.chain().focus().toggleCodeBlock().run()" :class="{ 'is-active': editor.isActive('codeBlock') }">
-      code block
-    </button>
+  <div v-if="editor" class="container">
+    <div class="control-group">
+      <div class="button-">
+        <button @click="editor.chain().focus().toggleCodeBlock().run()" :class="{ 'is-active': editor.isActive('codeBlock') }">
+          Toggle code block
+        </button>
+      </div>
+    </div>
   </div>
   <editor-content :editor="editor" />
 </template>
@@ -88,24 +92,26 @@ export default {
 <style lang="scss">
 /* Basic editor styles */
 .tiptap {
-  > * + * {
-    margin-top: 0.75em;
+  :first-child {
+    margin-top: 0;
   }
 
   pre {
-    background: #0D0D0D;
-    color: #FFF;
-    font-family: 'JetBrainsMono', monospace;
-    padding: 0.75rem 1rem;
+    background: var(--black);
     border-radius: 0.5rem;
+    color: var(--white);
+    font-family: 'JetBrainsMono', monospace;
+    margin: 1.5rem 0;
+    padding: 0.75rem 1rem;
 
     code {
-      color: inherit;
-      padding: 0;
       background: none;
+      color: inherit;
       font-size: 0.8rem;
+      padding: 0;
     }
 
+    /* Code styling */
     .hljs-comment,
     .hljs-quote {
       color: #616161;
@@ -121,7 +127,7 @@ export default {
     .hljs-name,
     .hljs-selector-id,
     .hljs-selector-class {
-      color: #F98181;
+      color: #f98181;
     }
 
     .hljs-number,
@@ -131,23 +137,23 @@ export default {
     .hljs-literal,
     .hljs-type,
     .hljs-params {
-      color: #FBBC88;
+      color: #fbbc88;
     }
 
     .hljs-string,
     .hljs-symbol,
     .hljs-bullet {
-      color: #B9F18D;
+      color: #b9f18d;
     }
 
     .hljs-title,
     .hljs-section {
-      color: #FAF594;
+      color: #faf594;
     }
 
     .hljs-keyword,
     .hljs-selector-tag {
-      color: #70CFF8;
+      color: #70cff8;
     }
 
     .hljs-emphasis {
diff --git a/demos/src/Examples/CollaborativeEditing/React/MenuBar.jsx b/demos/src/Examples/CollaborativeEditing/React/MenuBar.jsx
index 80527c249..807aa32c2 100644
--- a/demos/src/Examples/CollaborativeEditing/React/MenuBar.jsx
+++ b/demos/src/Examples/CollaborativeEditing/React/MenuBar.jsx
@@ -59,25 +59,25 @@ export default ({ editor }) => {
     },
     {
       icon: 'list-unordered',
-      title: 'Bullet List',
+      title: 'Bullet list',
       action: () => editor.chain().focus().toggleBulletList().run(),
       isActive: () => editor.isActive('bulletList'),
     },
     {
       icon: 'list-ordered',
-      title: 'Ordered List',
+      title: 'Ordered list',
       action: () => editor.chain().focus().toggleOrderedList().run(),
       isActive: () => editor.isActive('orderedList'),
     },
     {
       icon: 'list-check-2',
-      title: 'Task List',
+      title: 'Task list',
       action: () => editor.chain().focus().toggleTaskList().run(),
       isActive: () => editor.isActive('taskList'),
     },
     {
       icon: 'code-box-line',
-      title: 'Code Block',
+      title: 'Code block',
       action: () => editor.chain().focus().toggleCodeBlock().run(),
       isActive: () => editor.isActive('codeBlock'),
     },
@@ -92,7 +92,7 @@ export default ({ editor }) => {
     },
     {
       icon: 'separator',
-      title: 'Horizontal Rule',
+      title: 'Horizontal rule',
       action: () => editor.chain().focus().setHorizontalRule().run(),
     },
     {
@@ -100,12 +100,12 @@ export default ({ editor }) => {
     },
     {
       icon: 'text-wrap',
-      title: 'Hard Break',
+      title: 'Hard break',
       action: () => editor.chain().focus().setHardBreak().run(),
     },
     {
       icon: 'format-clear',
-      title: 'Clear Format',
+      title: 'Clear format',
       action: () => editor.chain().focus().clearNodes().unsetAllMarks()
         .run(),
     },
diff --git a/demos/src/Examples/CollaborativeEditing/Vue/MenuBar.vue b/demos/src/Examples/CollaborativeEditing/Vue/MenuBar.vue
index d052b6974..bf7b512be 100644
--- a/demos/src/Examples/CollaborativeEditing/Vue/MenuBar.vue
+++ b/demos/src/Examples/CollaborativeEditing/Vue/MenuBar.vue
@@ -78,25 +78,25 @@ export default {
         },
         {
           icon: 'list-unordered',
-          title: 'Bullet List',
+          title: 'Bullet list',
           action: () => this.editor.chain().focus().toggleBulletList().run(),
           isActive: () => this.editor.isActive('bulletList'),
         },
         {
           icon: 'list-ordered',
-          title: 'Ordered List',
+          title: 'Ordered list',
           action: () => this.editor.chain().focus().toggleOrderedList().run(),
           isActive: () => this.editor.isActive('orderedList'),
         },
         {
           icon: 'list-check-2',
-          title: 'Task List',
+          title: 'Task list',
           action: () => this.editor.chain().focus().toggleTaskList().run(),
           isActive: () => this.editor.isActive('taskList'),
         },
         {
           icon: 'code-box-line',
-          title: 'Code Block',
+          title: 'Code block',
           action: () => this.editor.chain().focus().toggleCodeBlock().run(),
           isActive: () => this.editor.isActive('codeBlock'),
         },
@@ -111,7 +111,7 @@ export default {
         },
         {
           icon: 'separator',
-          title: 'Horizontal Rule',
+          title: 'Horizontal rule',
           action: () => this.editor.chain().focus().setHorizontalRule().run(),
         },
         {
@@ -119,12 +119,12 @@ export default {
         },
         {
           icon: 'text-wrap',
-          title: 'Hard Break',
+          title: 'Hard break',
           action: () => this.editor.chain().focus().setHardBreak().run(),
         },
         {
           icon: 'format-clear',
-          title: 'Clear Format',
+          title: 'Clear format',
           action: () => this.editor.chain()
             .focus()
             .clearNodes()
diff --git a/demos/src/Examples/Community/React/MentionList.jsx b/demos/src/Examples/Community/React/MentionList.jsx
index c456bf585..ea4c8604a 100644
--- a/demos/src/Examples/Community/React/MentionList.jsx
+++ b/demos/src/Examples/Community/React/MentionList.jsx
@@ -54,11 +54,11 @@ export const MentionList = forwardRef((props, ref) => {
   }))
 
   return (
-    <div className="items">
+    <div className="dropdown-menu">
       {props.items.length
         ? props.items.map((item, index) => (
           <button
-            className={`item ${index === selectedIndex ? 'is-selected' : ''}`}
+            className={index === selectedIndex ? 'is-selected' : ''}
             key={index}
             onClick={() => selectItem(index)}
           >
diff --git a/demos/src/Examples/Community/React/MentionList.scss b/demos/src/Examples/Community/React/MentionList.scss
index dbf0007e5..fc1063186 100644
--- a/demos/src/Examples/Community/React/MentionList.scss
+++ b/demos/src/Examples/Community/React/MentionList.scss
@@ -1,28 +1,31 @@
-.items {
-  padding: 0.2rem;
+/* Dropdown menu */
+.dropdown-menu {
+  background: var(--white);
+  border: 1px solid var(--gray-1);
+  border-radius: 0.7rem;
+  box-shadow: var(--shadow);
+  display: flex;
+  flex-direction: column;
+  gap: 0.1rem;
+  overflow: auto;
+  padding: 0.4rem;
   position: relative;
-  border-radius: 0.5rem;
-  background: #FFF;
-  color: rgba(0, 0, 0, 0.8);
-  overflow: hidden;
-  font-size: 0.9rem;
-  box-shadow:
-    0 0 0 1px rgba(0, 0, 0, 0.05),
-    0px 10px 20px rgba(0, 0, 0, 0.1),
-  ;
-}
 
-.item {
-  display: block;
-  margin: 0;
-  width: 100%;
-  text-align: left;
-  background: transparent;
-  border-radius: 0.4rem;
-  border: 1px solid transparent;
-  padding: 0.2rem 0.4rem;
+  button {
+    align-items: center;
+    background-color: transparent;
+    display: flex;
+    gap: 0.25rem;
+    text-align: left;
+    width: 100%;
+  
+    &:hover, 
+    &:hover.is-selected {
+      background-color: var(--gray-3);
+    }
 
-  &.is-selected {
-    border-color: #000;
+    &.is-selected {
+      background-color: var(--gray-2);
+    }
   }
 }
diff --git a/demos/src/Examples/Community/React/index.jsx b/demos/src/Examples/Community/React/index.jsx
index 8f4a3fa21..a9bc82d2d 100644
--- a/demos/src/Examples/Community/React/index.jsx
+++ b/demos/src/Examples/Community/React/index.jsx
@@ -40,7 +40,7 @@ export default () => {
     : 0
 
   return (
-    <div>
+    <>
       <EditorContent editor={editor} />
       {editor
         && <div className={`character-count ${editor.storage.characterCount.characters() === limit ? 'character-count--warning' : ''}`}>
@@ -48,7 +48,6 @@ export default () => {
             height="20"
             width="20"
             viewBox="0 0 20 20"
-            className="character-count__graph"
           >
             <circle
               r="10"
@@ -74,11 +73,9 @@ export default () => {
             />
           </svg>
 
-          <div className="character-count__text">
-            {editor.storage.characterCount.characters()}/{limit} characters
-          </div>
+          {editor.storage.characterCount.characters()} / {limit} characters
         </div>
       }
-    </div>
+    </>
   )
 }
diff --git a/demos/src/Examples/Community/React/index.spec.js b/demos/src/Examples/Community/React/index.spec.js
index c30a7703b..721876e8f 100644
--- a/demos/src/Examples/Community/React/index.spec.js
+++ b/demos/src/Examples/Community/React/index.spec.js
@@ -4,33 +4,33 @@ context('/src/Examples/Community/React/', () => {
   })
 
   it('should count the characters correctly', () => {
-    // check if count text is "44/280 characters"
-    cy.get('.character-count__text').should('have.text', '44/280 characters')
+    // check if count text is "44 / 280 characters"
+    cy.get('.character-count').should('contain', '44 / 280 characters')
 
     // type in .tiptap
     cy.get('.tiptap').type(' Hello World')
-    cy.get('.character-count__text').should('have.text', '56/280 characters')
+    cy.get('.character-count').should('contain', '56 / 280 characters')
 
     // remove content from .tiptap and enter text
     cy.get('.tiptap').type('{selectall}{backspace}Hello World')
-    cy.get('.character-count__text').should('have.text', '11/280 characters')
+    cy.get('.character-count').should('contain', '11 / 280 characters')
   })
 
   it('should mention a user', () => {
     cy.get('.tiptap').type('{selectall}{backspace}@')
 
     // check if the mention autocomplete is visible
-    cy.get('.tippy-content .items').should('be.visible')
+    cy.get('.tippy-content .dropdown-menu').should('be.visible')
 
     // select the first user
-    cy.get('.tippy-content .items .item').first().then($el => {
+    cy.get('.tippy-content .dropdown-menu button').first().then($el => {
       const name = $el.text()
 
       $el.click()
 
       // check if the user is mentioned
       cy.get('.tiptap').should('have.text', `@${name} `)
-      cy.get('.character-count__text').should('have.text', '2/280 characters')
+      cy.get('.character-count').should('contain', '2 / 280 characters')
     })
 
   })
diff --git a/demos/src/Examples/Community/React/styles.scss b/demos/src/Examples/Community/React/styles.scss
index 6a1607c73..91fbe31c5 100644
--- a/demos/src/Examples/Community/React/styles.scss
+++ b/demos/src/Examples/Community/React/styles.scss
@@ -1,41 +1,33 @@
 /* Basic editor styles */
 .tiptap {
-  > * + * {
-    margin-top: 0.75em;
+  :first-child {
+    margin-top: 0;
   }
-
-  h1,
-  h2,
-  h3,
-  h4,
-  h5,
-  h6 {
-    line-height: 1.1;
+  
+  .mention {
+    background-color: var(--purple-light);
+    border-radius: 0.4rem;
+    box-decoration-break: clone;
+    color: var(--purple);
+    padding: 0.1rem 0.3rem;
   }
 }
 
-.mention {
-  border: 1px solid #000;
-  border-radius: 0.4rem;
-  padding: 0.1rem 0.3rem;
-  box-decoration-break: clone;
-}
-
+/* Character count */
 .character-count {
-  margin-top: 1rem;
-  display: flex;
   align-items: center;
-  color: #68CEF8;
+  color: var(--gray-5);
+  display: flex;
+  font-size: 0.75rem;
+  gap: .5rem;
+  margin: 1.5rem;
 
-  &--warning {
-    color: #FB5151;
+  svg {
+    color: var(--purple);
   }
 
-  &__graph {
-    margin-right: 0.5rem;
-  }
-
-  &__text {
-    color: #868e96;
+  &--warning,
+  &--warning svg {
+    color: var(--red);
   }
 }
diff --git a/demos/src/Examples/Community/Vue/MentionList.vue b/demos/src/Examples/Community/Vue/MentionList.vue
index 387f04bcf..9299b54ca 100644
--- a/demos/src/Examples/Community/Vue/MentionList.vue
+++ b/demos/src/Examples/Community/Vue/MentionList.vue
@@ -1,8 +1,7 @@
 <template>
-  <div class="items">
+  <div class="dropdown-menu">
     <template v-if="items.length">
       <button
-        class="item"
         :class="{ 'is-selected': index === selectedIndex }"
         v-for="(item, index) in items"
         :key="index"
@@ -87,32 +86,35 @@ export default {
 </script>
 
 <style lang="scss">
-.items {
-  padding: 0.2rem;
+/* Dropdown menu */
+.dropdown-menu {
+  background: var(--white);
+  border: 1px solid var(--gray-1);
+  border-radius: 0.7rem;
+  box-shadow: var(--shadow);
+  display: flex;
+  flex-direction: column;
+  gap: 0.1rem;
+  overflow: auto;
+  padding: 0.4rem;
   position: relative;
-  border-radius: 0.5rem;
-  background: #FFF;
-  color: rgba(0, 0, 0, 0.8);
-  overflow: hidden;
-  font-size: 0.9rem;
-  box-shadow:
-    0 0 0 1px rgba(0, 0, 0, 0.05),
-    0px 10px 20px rgba(0, 0, 0, 0.1),
-  ;
-}
 
-.item {
-  display: block;
-  margin: 0;
-  width: 100%;
-  text-align: left;
-  background: transparent;
-  border-radius: 0.4rem;
-  border: 1px solid transparent;
-  padding: 0.2rem 0.4rem;
+  button {
+    align-items: center;
+    background-color: transparent;
+    display: flex;
+    gap: 0.25rem;
+    text-align: left;
+    width: 100%;
 
-  &.is-selected {
-    border-color: #000;
+    &:hover,
+    &:hover.is-selected {
+      background-color: var(--gray-3);
+    }
+
+    &.is-selected {
+      background-color: var(--gray-2);
+    }
   }
 }
 </style>
diff --git a/demos/src/Examples/Community/Vue/index.spec.js b/demos/src/Examples/Community/Vue/index.spec.js
index ea6a1aa63..e403e10b0 100644
--- a/demos/src/Examples/Community/Vue/index.spec.js
+++ b/demos/src/Examples/Community/Vue/index.spec.js
@@ -4,33 +4,33 @@ context('/src/Examples/Community/Vue/', () => {
   })
 
   it('should count the characters correctly', () => {
-    // check if count text is "44/280 characters"
-    cy.get('.character-count__text').should('have.text', '44/280 characters')
+    // check if count text is "44 / 280 characters"
+    cy.get('.character-count').should('contain', '44 / 280 characters')
 
     // type in .tiptap
     cy.get('.tiptap').type(' Hello World')
-    cy.get('.character-count__text').should('have.text', '56/280 characters')
+    cy.get('.character-count').should('contain', '56 / 280 characters')
 
     // remove content from .tiptap and enter text
     cy.get('.tiptap').type('{selectall}{backspace}Hello World')
-    cy.get('.character-count__text').should('have.text', '11/280 characters')
+    cy.get('.character-count').should('contain', '11 / 280 characters')
   })
 
   it('should mention a user', () => {
     cy.get('.tiptap').type('{selectall}{backspace}@')
 
     // check if the mention autocomplete is visible
-    cy.get('.tippy-content .items').should('be.visible')
+    cy.get('.tippy-content .dropdown-menu').should('be.visible')
 
     // select the first user
-    cy.get('.tippy-content .items .item').first().then($el => {
+    cy.get('.tippy-content .dropdown-menu button').first().then($el => {
       const name = $el.text()
 
       $el.click()
 
       // check if the user is mentioned
       cy.get('.tiptap').should('have.text', `@${name} `)
-      cy.get('.character-count__text').should('have.text', '2/280 characters')
+      cy.get('.character-count').should('contain', '2 / 280 characters')
     })
 
   })
diff --git a/demos/src/Examples/Community/Vue/index.vue b/demos/src/Examples/Community/Vue/index.vue
index 33c9bea14..88dfcf50f 100644
--- a/demos/src/Examples/Community/Vue/index.vue
+++ b/demos/src/Examples/Community/Vue/index.vue
@@ -6,7 +6,6 @@
       height="20"
       width="20"
       viewBox="0 0 20 20"
-      class="character-count__graph"
     >
       <circle
         r="10"
@@ -32,7 +31,7 @@
       />
     </svg>
 
-    <div class="character-count__text">{{ editor.storage.characterCount.characters() }}/{{ limit }} characters</div>
+    {{ editor.storage.characterCount.characters() }} / {{ limit }} characters
   </div>
 </template>
 
@@ -97,43 +96,35 @@ export default {
 <style lang="scss">
 /* Basic editor styles */
 .tiptap {
-  > * + * {
-    margin-top: 0.75em;
+  :first-child {
+    margin-top: 0;
   }
 
-  h1,
-  h2,
-  h3,
-  h4,
-  h5,
-  h6 {
-    line-height: 1.1;
+  .mention {
+    background-color: var(--purple-light);
+    border-radius: 0.4rem;
+    box-decoration-break: clone;
+    color: var(--purple);
+    padding: 0.1rem 0.3rem;
   }
 }
 
-.mention {
-  border: 1px solid #000;
-  border-radius: 0.4rem;
-  padding: 0.1rem 0.3rem;
-  box-decoration-break: clone;
-}
-
+/* Character count */
 .character-count {
-  margin-top: 1rem;
-  display: flex;
   align-items: center;
-  color: #68CEF8;
+  color: var(--gray-5);
+  display: flex;
+  font-size: 0.75rem;
+  gap: .5rem;
+  margin: 1.5rem;
 
-  &--warning {
-    color: #FB5151;
+  svg {
+    color: var(--purple);
   }
 
-  &__graph {
-    margin-right: 0.5rem;
-  }
-
-  &__text {
-    color: #868e96;
+  &--warning,
+  &--warning svg {
+    color: var(--red);
   }
 }
 </style>
diff --git a/demos/src/Examples/CustomDocument/React/styles.scss b/demos/src/Examples/CustomDocument/React/styles.scss
index 570b0f308..3eb40707e 100644
--- a/demos/src/Examples/CustomDocument/React/styles.scss
+++ b/demos/src/Examples/CustomDocument/React/styles.scss
@@ -1,24 +1,109 @@
 /* Basic editor styles */
 .tiptap {
-  > * + * {
-    margin-top: 0.75em;
+  :first-child {
+    margin-top: 0;
+  }
+
+  /* List styles */
+  ul, 
+  ol {
+    padding: 0 1rem;
+    margin: 1.25rem 1rem 1.25rem 0.4rem;
+    
+    li p {
+      margin-top: 0.25em;
+      margin-bottom: 0.25em;
+    }
+  }
+
+  /* Heading styles */
+  h1, 
+  h2, 
+  h3, 
+  h4, 
+  h5, 
+  h6 {
+    line-height: 1.1;
+    margin-top: 2.5rem;
+    text-wrap: pretty;
+  }
+
+  h1, 
+  h2 {
+    margin-top: 3.5rem;
+    margin-bottom: 1.5rem;
+  }
+
+  h1 { 
+    font-size: 1.4rem; 
+  }
+
+  h2 { 
+    font-size: 1.2rem; 
+  }
+
+  h3 { 
+    font-size: 1.1rem; 
+  }
+
+  h4, 
+  h5, 
+  h6 { 
+    font-size: 1rem; 
+  }
+
+  /* Code and preformatted text styles */
+  code {
+    background-color: var(--purple-light);
+    border-radius: 0.4rem;
+    color: var(--black);
+    font-size: 0.85rem;
+    padding: 0.25em 0.3em;
+  }
+
+  pre {
+    background: var(--black);
+    border-radius: 0.5rem;
+    color: var(--white);
+    font-family: 'JetBrainsMono', monospace;
+    margin: 1.5rem 0;
+    padding: 0.75rem 1rem;
+
+    code {
+      background: none;
+      color: inherit;
+      font-size: 0.8rem;
+      padding: 0;
+    }
+  }
+
+  blockquote {
+    border-left: 3px solid var(--gray-3);
+    margin: 1.5rem 0;
+    padding-left: 1rem;
+  }
+
+  hr {
+    border: none;
+    border-top: 1px solid var(--gray-2);
+    margin: 2rem 0;
+  }
+    
+  /* Placeholder (at the top) */
+  /* p.is-editor-empty:first-child::before {
+    color: var(--gray-4);
+    content: attr(data-placeholder);
+    float: left;
+    height: 0;
+    pointer-events: none;
+  }*/
+
+  /* Placeholder (on every new line) */
+  .is-empty::before {
+    color: var(--gray-4);
+    content: attr(data-placeholder);
+    float: left;
+    height: 0;
+    pointer-events: none;
   }
 }
-
-/* Placeholder (at the top) */
-/*.tiptap p.is-editor-empty:first-child::before {
-  content: attr(data-placeholder);
-  float: left;
-  color: #ced4da;
-  pointer-events: none;
-  height: 0;
-}*/
-
-/* Placeholder (on every new line) */
-.tiptap .is-empty::before {
-  content: attr(data-placeholder);
-  float: left;
-  color: #ced4da;
-  pointer-events: none;
-  height: 0;
-}
diff --git a/demos/src/Examples/CustomDocument/Vue/index.vue b/demos/src/Examples/CustomDocument/Vue/index.vue
index 9532866c0..b26a4760c 100644
--- a/demos/src/Examples/CustomDocument/Vue/index.vue
+++ b/demos/src/Examples/CustomDocument/Vue/index.vue
@@ -60,26 +60,111 @@ export default {
 <style lang="scss">
 /* Basic editor styles */
 .tiptap {
-  > * + * {
-    margin-top: 0.75em;
+  :first-child {
+    margin-top: 0;
+  }
+
+  /* List styles */
+  ul,
+  ol {
+    padding: 0 1rem;
+    margin: 1.25rem 1rem 1.25rem 0.4rem;
+
+    li p {
+      margin-top: 0.25em;
+      margin-bottom: 0.25em;
+    }
+  }
+
+  /* Heading styles */
+  h1,
+  h2,
+  h3,
+  h4,
+  h5,
+  h6 {
+    line-height: 1.1;
+    margin-top: 2.5rem;
+    text-wrap: pretty;
+  }
+
+  h1,
+  h2 {
+    margin-top: 3.5rem;
+    margin-bottom: 1.5rem;
+  }
+
+  h1 {
+    font-size: 1.4rem;
+  }
+
+  h2 {
+    font-size: 1.2rem;
+  }
+
+  h3 {
+    font-size: 1.1rem;
+  }
+
+  h4,
+  h5,
+  h6 {
+    font-size: 1rem;
+  }
+
+  /* Code and preformatted text styles */
+  code {
+    background-color: var(--purple-light);
+    border-radius: 0.4rem;
+    color: var(--black);
+    font-size: 0.85rem;
+    padding: 0.25em 0.3em;
+  }
+
+  pre {
+    background: var(--black);
+    border-radius: 0.5rem;
+    color: var(--white);
+    font-family: 'JetBrainsMono', monospace;
+    margin: 1.5rem 0;
+    padding: 0.75rem 1rem;
+
+    code {
+      background: none;
+      color: inherit;
+      font-size: 0.8rem;
+      padding: 0;
+    }
+  }
+
+  blockquote {
+    border-left: 3px solid var(--gray-3);
+    margin: 1.5rem 0;
+    padding-left: 1rem;
+  }
+
+  hr {
+    border: none;
+    border-top: 1px solid var(--gray-2);
+    margin: 2rem 0;
+  }
+
+  /* Placeholder (at the top) */
+  /* p.is-editor-empty:first-child::before {
+    color: var(--gray-4);
+    content: attr(data-placeholder);
+    float: left;
+    height: 0;
+    pointer-events: none;
+  }*/
+
+  /* Placeholder (on every new line) */
+  .is-empty::before {
+    color: var(--gray-4);
+    content: attr(data-placeholder);
+    float: left;
+    height: 0;
+    pointer-events: none;
   }
 }
-
-/* Placeholder (at the top) */
-/*.tiptap p.is-editor-empty:first-child::before {
-  content: attr(data-placeholder);
-  float: left;
-  color: #ced4da;
-  pointer-events: none;
-  height: 0;
-}*/
-
-/* Placeholder (on every new line) */
-.tiptap .is-empty::before {
-  content: attr(data-placeholder);
-  float: left;
-  color: #ced4da;
-  pointer-events: none;
-  height: 0;
-}
 </style>
diff --git a/demos/src/Examples/CustomParagraph/React/styles.scss b/demos/src/Examples/CustomParagraph/React/styles.scss
index 570b0f308..7694d7322 100644
--- a/demos/src/Examples/CustomParagraph/React/styles.scss
+++ b/demos/src/Examples/CustomParagraph/React/styles.scss
@@ -1,24 +1,91 @@
 /* Basic editor styles */
 .tiptap {
-  > * + * {
-    margin-top: 0.75em;
+  :first-child {
+    margin-top: 0;
+  }
+
+  /* List styles */
+  ul, 
+  ol {
+    padding: 0 1rem;
+    margin: 1.25rem 1rem 1.25rem 0.4rem;
+    
+    li p {
+      margin-top: 0.25em;
+      margin-bottom: 0.25em;
+    }
+  }
+
+  /* Heading styles */
+  h1, 
+  h2, 
+  h3, 
+  h4, 
+  h5, 
+  h6 {
+    line-height: 1.1;
+    margin-top: 2.5rem;
+    text-wrap: pretty;
+  }
+
+  h1, 
+  h2 {
+    margin-top: 3.5rem;
+    margin-bottom: 1.5rem;
+  }
+
+  h1 { 
+    font-size: 1.4rem; 
+  }
+
+  h2 { 
+    font-size: 1.2rem; 
+  }
+
+  h3 { 
+    font-size: 1.1rem; 
+  }
+
+  h4, 
+  h5, 
+  h6 { 
+    font-size: 1rem; 
+  }
+
+  /* Code and preformatted text styles */
+  code {
+    background-color: var(--purple-light);
+    border-radius: 0.4rem;
+    color: var(--black);
+    font-size: 0.85rem;
+    padding: 0.25em 0.3em;
+  }
+
+  pre {
+    background: var(--black);
+    border-radius: 0.5rem;
+    color: var(--white);
+    font-family: 'JetBrainsMono', monospace;
+    margin: 1.5rem 0;
+    padding: 0.75rem 1rem;
+
+    code {
+      background: none;
+      color: inherit;
+      font-size: 0.8rem;
+      padding: 0;
+    }
+  }
+
+  blockquote {
+    border-left: 3px solid var(--gray-3);
+    margin: 1.5rem 0;
+    padding-left: 1rem;
+  }
+
+  hr {
+    border: none;
+    border-top: 1px solid var(--gray-2);
+    margin: 2rem 0;
   }
 }
-
-/* Placeholder (at the top) */
-/*.tiptap p.is-editor-empty:first-child::before {
-  content: attr(data-placeholder);
-  float: left;
-  color: #ced4da;
-  pointer-events: none;
-  height: 0;
-}*/
-
-/* Placeholder (on every new line) */
-.tiptap .is-empty::before {
-  content: attr(data-placeholder);
-  float: left;
-  color: #ced4da;
-  pointer-events: none;
-  height: 0;
-}
diff --git a/demos/src/Examples/Default/React/index.jsx b/demos/src/Examples/Default/React/index.jsx
index 00c9f5754..fddcfd2d3 100644
--- a/demos/src/Examples/Default/React/index.jsx
+++ b/demos/src/Examples/Default/React/index.jsx
@@ -15,168 +15,170 @@ const MenuBar = () => {
   }
 
   return (
-    <>
-      <button
-        onClick={() => editor.chain().focus().toggleBold().run()}
-        disabled={
-          !editor.can()
-            .chain()
-            .focus()
-            .toggleBold()
-            .run()
-        }
-        className={editor.isActive('bold') ? 'is-active' : ''}
-      >
-        bold
-      </button>
-      <button
-        onClick={() => editor.chain().focus().toggleItalic().run()}
-        disabled={
-          !editor.can()
-            .chain()
-            .focus()
-            .toggleItalic()
-            .run()
-        }
-        className={editor.isActive('italic') ? 'is-active' : ''}
-      >
-        italic
-      </button>
-      <button
-        onClick={() => editor.chain().focus().toggleStrike().run()}
-        disabled={
-          !editor.can()
-            .chain()
-            .focus()
-            .toggleStrike()
-            .run()
-        }
-        className={editor.isActive('strike') ? 'is-active' : ''}
-      >
-        strike
-      </button>
-      <button
-        onClick={() => editor.chain().focus().toggleCode().run()}
-        disabled={
-          !editor.can()
-            .chain()
-            .focus()
-            .toggleCode()
-            .run()
-        }
-        className={editor.isActive('code') ? 'is-active' : ''}
-      >
-        code
-      </button>
-      <button onClick={() => editor.chain().focus().unsetAllMarks().run()}>
-        clear marks
-      </button>
-      <button onClick={() => editor.chain().focus().clearNodes().run()}>
-        clear nodes
-      </button>
-      <button
-        onClick={() => editor.chain().focus().setParagraph().run()}
-        className={editor.isActive('paragraph') ? 'is-active' : ''}
-      >
-        paragraph
-      </button>
-      <button
-        onClick={() => editor.chain().focus().toggleHeading({ level: 1 }).run()}
-        className={editor.isActive('heading', { level: 1 }) ? 'is-active' : ''}
-      >
-        h1
-      </button>
-      <button
-        onClick={() => editor.chain().focus().toggleHeading({ level: 2 }).run()}
-        className={editor.isActive('heading', { level: 2 }) ? 'is-active' : ''}
-      >
-        h2
-      </button>
-      <button
-        onClick={() => editor.chain().focus().toggleHeading({ level: 3 }).run()}
-        className={editor.isActive('heading', { level: 3 }) ? 'is-active' : ''}
-      >
-        h3
-      </button>
-      <button
-        onClick={() => editor.chain().focus().toggleHeading({ level: 4 }).run()}
-        className={editor.isActive('heading', { level: 4 }) ? 'is-active' : ''}
-      >
-        h4
-      </button>
-      <button
-        onClick={() => editor.chain().focus().toggleHeading({ level: 5 }).run()}
-        className={editor.isActive('heading', { level: 5 }) ? 'is-active' : ''}
-      >
-        h5
-      </button>
-      <button
-        onClick={() => editor.chain().focus().toggleHeading({ level: 6 }).run()}
-        className={editor.isActive('heading', { level: 6 }) ? 'is-active' : ''}
-      >
-        h6
-      </button>
-      <button
-        onClick={() => editor.chain().focus().toggleBulletList().run()}
-        className={editor.isActive('bulletList') ? 'is-active' : ''}
-      >
-        bullet list
-      </button>
-      <button
-        onClick={() => editor.chain().focus().toggleOrderedList().run()}
-        className={editor.isActive('orderedList') ? 'is-active' : ''}
-      >
-        ordered list
-      </button>
-      <button
-        onClick={() => editor.chain().focus().toggleCodeBlock().run()}
-        className={editor.isActive('codeBlock') ? 'is-active' : ''}
-      >
-        code block
-      </button>
-      <button
-        onClick={() => editor.chain().focus().toggleBlockquote().run()}
-        className={editor.isActive('blockquote') ? 'is-active' : ''}
-      >
-        blockquote
-      </button>
-      <button onClick={() => editor.chain().focus().setHorizontalRule().run()}>
-        horizontal rule
-      </button>
-      <button onClick={() => editor.chain().focus().setHardBreak().run()}>
-        hard break
-      </button>
-      <button
-        onClick={() => editor.chain().focus().undo().run()}
-        disabled={
-          !editor.can()
-            .chain()
-            .focus()
-            .undo()
-            .run()
-        }
-      >
-        undo
-      </button>
-      <button
-        onClick={() => editor.chain().focus().redo().run()}
-        disabled={
-          !editor.can()
-            .chain()
-            .focus()
-            .redo()
-            .run()
-        }
-      >
-        redo
-      </button>
-      <button
-        onClick={() => editor.chain().focus().setColor('#958DF1').run()}
-        className={editor.isActive('textStyle', { color: '#958DF1' }) ? 'is-active' : ''}
-      >
-        purple
-      </button>
-    </>
+    <div className="control-group">
+      <div className="button-group">
+        <button
+          onClick={() => editor.chain().focus().toggleBold().run()}
+          disabled={
+            !editor.can()
+              .chain()
+              .focus()
+              .toggleBold()
+              .run()
+          }
+          className={editor.isActive('bold') ? 'is-active' : ''}
+        >
+          Bold
+        </button>
+        <button
+          onClick={() => editor.chain().focus().toggleItalic().run()}
+          disabled={
+            !editor.can()
+              .chain()
+              .focus()
+              .toggleItalic()
+              .run()
+          }
+          className={editor.isActive('italic') ? 'is-active' : ''}
+        >
+          Italic
+        </button>
+        <button
+          onClick={() => editor.chain().focus().toggleStrike().run()}
+          disabled={
+            !editor.can()
+              .chain()
+              .focus()
+              .toggleStrike()
+              .run()
+          }
+          className={editor.isActive('strike') ? 'is-active' : ''}
+        >
+          Strike
+        </button>
+        <button
+          onClick={() => editor.chain().focus().toggleCode().run()}
+          disabled={
+            !editor.can()
+              .chain()
+              .focus()
+              .toggleCode()
+              .run()
+          }
+          className={editor.isActive('code') ? 'is-active' : ''}
+        >
+          Code
+        </button>
+        <button onClick={() => editor.chain().focus().unsetAllMarks().run()}>
+          Clear marks
+        </button>
+        <button onClick={() => editor.chain().focus().clearNodes().run()}>
+          Clear nodes
+        </button>
+        <button
+          onClick={() => editor.chain().focus().setParagraph().run()}
+          className={editor.isActive('paragraph') ? 'is-active' : ''}
+        >
+          Paragraph
+        </button>
+        <button
+          onClick={() => editor.chain().focus().toggleHeading({ level: 1 }).run()}
+          className={editor.isActive('heading', { level: 1 }) ? 'is-active' : ''}
+        >
+          H1
+        </button>
+        <button
+          onClick={() => editor.chain().focus().toggleHeading({ level: 2 }).run()}
+          className={editor.isActive('heading', { level: 2 }) ? 'is-active' : ''}
+        >
+          H2
+        </button>
+        <button
+          onClick={() => editor.chain().focus().toggleHeading({ level: 3 }).run()}
+          className={editor.isActive('heading', { level: 3 }) ? 'is-active' : ''}
+        >
+          H3
+        </button>
+        <button
+          onClick={() => editor.chain().focus().toggleHeading({ level: 4 }).run()}
+          className={editor.isActive('heading', { level: 4 }) ? 'is-active' : ''}
+        >
+          H4
+        </button>
+        <button
+          onClick={() => editor.chain().focus().toggleHeading({ level: 5 }).run()}
+          className={editor.isActive('heading', { level: 5 }) ? 'is-active' : ''}
+        >
+          H5
+        </button>
+        <button
+          onClick={() => editor.chain().focus().toggleHeading({ level: 6 }).run()}
+          className={editor.isActive('heading', { level: 6 }) ? 'is-active' : ''}
+        >
+          H6
+        </button>
+        <button
+          onClick={() => editor.chain().focus().toggleBulletList().run()}
+          className={editor.isActive('bulletList') ? 'is-active' : ''}
+        >
+          Bullet list
+        </button>
+        <button
+          onClick={() => editor.chain().focus().toggleOrderedList().run()}
+          className={editor.isActive('orderedList') ? 'is-active' : ''}
+        >
+          Ordered list
+        </button>
+        <button
+          onClick={() => editor.chain().focus().toggleCodeBlock().run()}
+          className={editor.isActive('codeBlock') ? 'is-active' : ''}
+        >
+          Code block
+        </button>
+        <button
+          onClick={() => editor.chain().focus().toggleBlockquote().run()}
+          className={editor.isActive('blockquote') ? 'is-active' : ''}
+        >
+          Blockquote
+        </button>
+        <button onClick={() => editor.chain().focus().setHorizontalRule().run()}>
+          Horizontal rule
+        </button>
+        <button onClick={() => editor.chain().focus().setHardBreak().run()}>
+          Hard break
+        </button>
+        <button
+          onClick={() => editor.chain().focus().undo().run()}
+          disabled={
+            !editor.can()
+              .chain()
+              .focus()
+              .undo()
+              .run()
+          }
+        >
+          Undo
+        </button>
+        <button
+          onClick={() => editor.chain().focus().redo().run()}
+          disabled={
+            !editor.can()
+              .chain()
+              .focus()
+              .redo()
+              .run()
+          }
+        >
+          Redo
+        </button>
+        <button
+          onClick={() => editor.chain().focus().setColor('#958DF1').run()}
+          className={editor.isActive('textStyle', { color: '#958DF1' }) ? 'is-active' : ''}
+        >
+          Purple
+        </button>
+      </div>
+    </div>
   )
 }
 
@@ -200,7 +202,7 @@ const content = `
   Hi there,
 </h2>
 <p>
-  this is a <em>basic</em> example of <strong>tiptap</strong>. Sure, there are all kind of basic text styles you’d probably expect from a text editor. But wait until you see the lists:
+  this is a <em>basic</em> example of <strong>Tiptap</strong>. Sure, there are all kind of basic text styles you’d probably expect from a text editor. But wait until you see the lists:
 </p>
 <ul>
   <li>
@@ -214,7 +216,7 @@ const content = `
   Isn’t that great? And all of that is editable. But wait, there’s more. Let’s try a code block:
 </p>
 <pre><code class="language-css">body {
-display: none;
+  display: none;
 }</code></pre>
 <p>
   I know, I know, this is impressive. It’s only the tip of the iceberg though. Give it a try and click a little bit around. Don’t forget to check the other examples too.
diff --git a/demos/src/Examples/Default/React/index.spec.js b/demos/src/Examples/Default/React/index.spec.js
index b23e72c17..005560dee 100644
--- a/demos/src/Examples/Default/React/index.spec.js
+++ b/demos/src/Examples/Default/React/index.spec.js
@@ -21,41 +21,41 @@ context('/src/Examples/Default/React/', () => {
   })
 
   const buttonMarks = [
-    { label: 'bold', tag: 'strong' },
-    { label: 'italic', tag: 'em' },
-    { label: 'strike', tag: 's' },
+    { label: 'Bold', tag: 'strong' },
+    { label: 'Italic', tag: 'em' },
+    { label: 'Strike', tag: 's' },
   ]
 
   buttonMarks.forEach(m => {
     it(`should disable ${m.label} when the code tag is enabled for cursor`, () => {
       cy.get('.tiptap').type('{selectall}Hello world')
-      cy.get('button').contains('code').click()
+      cy.get('button').contains('Code').click()
       cy.get('button').contains(m.label).should('be.disabled')
     })
 
     it(`should enable ${m.label} when the code tag is disabled for cursor`, () => {
       cy.get('.tiptap').type('{selectall}Hello world')
-      cy.get('button').contains('code').click()
-      cy.get('button').contains('code').click()
+      cy.get('button').contains('Code').click()
+      cy.get('button').contains('Code').click()
       cy.get('button').contains(m.label).should('not.be.disabled')
     })
 
     it(`should disable ${m.label} when the code tag is enabled for selection`, () => {
       cy.get('.tiptap').type('{selectall}Hello world{selectall}')
-      cy.get('button').contains('code').click()
+      cy.get('button').contains('Code').click()
       cy.get('button').contains(m.label).should('be.disabled')
     })
 
     it(`should enable ${m.label} when the code tag is disabled for selection`, () => {
       cy.get('.tiptap').type('{selectall}Hello world{selectall}')
-      cy.get('button').contains('code').click()
-      cy.get('button').contains('code').click()
+      cy.get('button').contains('Code').click()
+      cy.get('button').contains('Code').click()
       cy.get('button').contains(m.label).should('not.be.disabled')
     })
 
     it(`should apply ${m.label} when the button is pressed`, () => {
       cy.get('.tiptap').type('{selectall}Hello world')
-      cy.get('button').contains('paragraph').click()
+      cy.get('button').contains('Paragraph').click()
       cy.get('.tiptap').type('{selectall}')
       cy.get('button').contains(m.label).click()
       cy.get(`.tiptap ${m.tag}`).should('exist').should('have.text', 'Hello world')
@@ -64,40 +64,40 @@ context('/src/Examples/Default/React/', () => {
 
   it('should clear marks when the button is pressed', () => {
     cy.get('.tiptap').type('{selectall}Hello world')
-    cy.get('button').contains('paragraph').click()
+    cy.get('button').contains('Paragraph').click()
     cy.get('.tiptap').type('{selectall}')
-    cy.get('button').contains('bold').click()
+    cy.get('button').contains('Bold').click()
     cy.get('.tiptap strong').should('exist').should('have.text', 'Hello world')
-    cy.get('button').contains('clear marks').click()
+    cy.get('button').contains('Clear marks').click()
     cy.get('.tiptap strong').should('not.exist')
   })
 
   it('should clear nodes when the button is pressed', () => {
     cy.get('.tiptap').type('{selectall}Hello world')
-    cy.get('button').contains('bullet list').click()
+    cy.get('button').contains('Bullet list').click()
     cy.get('.tiptap ul').should('exist').should('have.text', 'Hello world')
     cy.get('.tiptap').type('{enter}A second item{enter}A third item{selectall}')
-    cy.get('button').contains('clear nodes').click()
+    cy.get('button').contains('Clear nodes').click()
     cy.get('.tiptap ul').should('not.exist')
     cy.get('.tiptap p').should('have.length', 3)
   })
 
   const buttonNodes = [
-    { label: 'h1', tag: 'h1' },
-    { label: 'h2', tag: 'h2' },
-    { label: 'h3', tag: 'h3' },
-    { label: 'h4', tag: 'h4' },
-    { label: 'h5', tag: 'h5' },
-    { label: 'h6', tag: 'h6' },
-    { label: 'bullet list', tag: 'ul' },
-    { label: 'ordered list', tag: 'ol' },
-    { label: 'code block', tag: 'pre code' },
-    { label: 'blockquote', tag: 'blockquote' },
+    { label: 'H1', tag: 'h1' },
+    { label: 'H2', tag: 'h2' },
+    { label: 'H3', tag: 'h3' },
+    { label: 'H4', tag: 'h4' },
+    { label: 'H5', tag: 'h5' },
+    { label: 'H6', tag: 'h6' },
+    { label: 'Bullet list', tag: 'ul' },
+    { label: 'Ordered list', tag: 'ol' },
+    { label: 'Code block', tag: 'pre code' },
+    { label: 'Blockquote', tag: 'blockquote' },
   ]
 
   buttonNodes.forEach(n => {
     it(`should set ${n.label} when the button is pressed`, () => {
-      cy.get('button').contains('paragraph').click()
+      cy.get('button').contains('Paragraph').click()
       cy.get('.tiptap').type('{selectall}Hello world{selectall}')
 
       cy.get('button').contains(n.label).click()
@@ -109,35 +109,35 @@ context('/src/Examples/Default/React/', () => {
 
   it('should add a hr when on the same line as a node', () => {
     cy.get('.tiptap').type('{rightArrow}')
-    cy.get('button').contains('horizontal rule').click()
+    cy.get('button').contains('Horizontal rule').click()
     cy.get('.tiptap hr').should('exist')
     cy.get('.tiptap h1').should('exist')
   })
 
   it('should add a hr when on a new line', () => {
     cy.get('.tiptap').type('{rightArrow}{enter}')
-    cy.get('button').contains('horizontal rule').click()
+    cy.get('button').contains('Horizontal rule').click()
     cy.get('.tiptap hr').should('exist')
     cy.get('.tiptap h1').should('exist')
   })
 
   it('should add a br', () => {
     cy.get('.tiptap').type('{rightArrow}')
-    cy.get('button').contains('hard break').click()
+    cy.get('button').contains('Hard break').click()
     cy.get('.tiptap h1 br').should('exist')
   })
 
   it('should undo', () => {
     cy.get('.tiptap').type('{selectall}{backspace}')
-    cy.get('button').contains('undo').click()
+    cy.get('button').contains('Undo').click()
     cy.get('.tiptap').should('contain', 'Hello world')
   })
 
   it('should redo', () => {
     cy.get('.tiptap').type('{selectall}{backspace}')
-    cy.get('button').contains('undo').click()
+    cy.get('button').contains('Undo').click()
     cy.get('.tiptap').should('contain', 'Hello world')
-    cy.get('button').contains('redo').click()
+    cy.get('button').contains('Redo').click()
     cy.get('.tiptap').should('not.contain', 'Hello world')
   })
 })
diff --git a/demos/src/Examples/Default/React/styles.scss b/demos/src/Examples/Default/React/styles.scss
index 4d2b2c81e..7694d7322 100644
--- a/demos/src/Examples/Default/React/styles.scss
+++ b/demos/src/Examples/Default/React/styles.scss
@@ -1,56 +1,91 @@
 /* Basic editor styles */
 .tiptap {
-  > * + * {
-    margin-top: 0.75em;
+  :first-child {
+    margin-top: 0;
   }
 
-  ul,
+  /* List styles */
+  ul, 
   ol {
     padding: 0 1rem;
-  }
-
-  h1,
-  h2,
-  h3,
-  h4,
-  h5,
-  h6 {
-    line-height: 1.1;
-  }
-
-  code {
-    background-color: rgba(#616161, 0.1);
-    color: #616161;
-  }
-
-  pre {
-    background: #0D0D0D;
-    color: #FFF;
-    font-family: 'JetBrainsMono', monospace;
-    padding: 0.75rem 1rem;
-    border-radius: 0.5rem;
-
-    code {
-      color: inherit;
-      padding: 0;
-      background: none;
-      font-size: 0.8rem;
+    margin: 1.25rem 1rem 1.25rem 0.4rem;
+    
+    li p {
+      margin-top: 0.25em;
+      margin-bottom: 0.25em;
     }
   }
 
-  img {
-    max-width: 100%;
-    height: auto;
+  /* Heading styles */
+  h1, 
+  h2, 
+  h3, 
+  h4, 
+  h5, 
+  h6 {
+    line-height: 1.1;
+    margin-top: 2.5rem;
+    text-wrap: pretty;
+  }
+
+  h1, 
+  h2 {
+    margin-top: 3.5rem;
+    margin-bottom: 1.5rem;
+  }
+
+  h1 { 
+    font-size: 1.4rem; 
+  }
+
+  h2 { 
+    font-size: 1.2rem; 
+  }
+
+  h3 { 
+    font-size: 1.1rem; 
+  }
+
+  h4, 
+  h5, 
+  h6 { 
+    font-size: 1rem; 
+  }
+
+  /* Code and preformatted text styles */
+  code {
+    background-color: var(--purple-light);
+    border-radius: 0.4rem;
+    color: var(--black);
+    font-size: 0.85rem;
+    padding: 0.25em 0.3em;
+  }
+
+  pre {
+    background: var(--black);
+    border-radius: 0.5rem;
+    color: var(--white);
+    font-family: 'JetBrainsMono', monospace;
+    margin: 1.5rem 0;
+    padding: 0.75rem 1rem;
+
+    code {
+      background: none;
+      color: inherit;
+      font-size: 0.8rem;
+      padding: 0;
+    }
   }
 
   blockquote {
+    border-left: 3px solid var(--gray-3);
+    margin: 1.5rem 0;
     padding-left: 1rem;
-    border-left: 2px solid rgba(#0D0D0D, 0.1);
   }
 
   hr {
     border: none;
-    border-top: 2px solid rgba(#0D0D0D, 0.1);
+    border-top: 1px solid var(--gray-2);
     margin: 2rem 0;
   }
 }
diff --git a/demos/src/Examples/Default/Svelte/index.spec.js b/demos/src/Examples/Default/Svelte/index.spec.js
index 4e2c71b79..dc0e1c0a5 100644
--- a/demos/src/Examples/Default/Svelte/index.spec.js
+++ b/demos/src/Examples/Default/Svelte/index.spec.js
@@ -21,15 +21,15 @@ context('/src/Examples/Default/React/', () => {
   })
 
   const buttonMarks = [
-    { label: 'bold', tag: 'strong' },
-    { label: 'italic', tag: 'em' },
-    { label: 'strike', tag: 's' },
+    { label: 'Bold', tag: 'strong' },
+    { label: 'Italic', tag: 'em' },
+    { label: 'Strike', tag: 's' },
   ]
 
   buttonMarks.forEach(m => {
     it(`should apply ${m.label} when the button is pressed`, () => {
       cy.get('.tiptap').type('{selectall}Hello world')
-      cy.get('button').contains('paragraph').click()
+      cy.get('button').contains('Paragraph').click()
       cy.get('.tiptap').type('{selectall}')
       cy.get('button').contains(m.label).click()
       cy.get(`.tiptap ${m.tag}`).should('exist').should('have.text', 'Hello world')
@@ -38,40 +38,40 @@ context('/src/Examples/Default/React/', () => {
 
   it('should clear marks when the button is pressed', () => {
     cy.get('.tiptap').type('{selectall}Hello world')
-    cy.get('button').contains('paragraph').click()
+    cy.get('button').contains('Paragraph').click()
     cy.get('.tiptap').type('{selectall}')
-    cy.get('button').contains('bold').click()
+    cy.get('button').contains('Bold').click()
     cy.get('.tiptap strong').should('exist').should('have.text', 'Hello world')
-    cy.get('button').contains('clear marks').click()
+    cy.get('button').contains('Clear marks').click()
     cy.get('.tiptap strong').should('not.exist')
   })
 
   it('should clear nodes when the button is pressed', () => {
     cy.get('.tiptap').type('{selectall}Hello world')
-    cy.get('button').contains('bullet list').click()
+    cy.get('button').contains('Bullet list').click()
     cy.get('.tiptap ul').should('exist').should('have.text', 'Hello world')
     cy.get('.tiptap').type('{enter}A second item{enter}A third item{selectall}')
-    cy.get('button').contains('clear nodes').click()
+    cy.get('button').contains('Clear nodes').click()
     cy.get('.tiptap ul').should('not.exist')
     cy.get('.tiptap p').should('have.length', 3)
   })
 
   const buttonNodes = [
-    { label: 'h1', tag: 'h1' },
-    { label: 'h2', tag: 'h2' },
-    { label: 'h3', tag: 'h3' },
-    { label: 'h4', tag: 'h4' },
-    { label: 'h5', tag: 'h5' },
-    { label: 'h6', tag: 'h6' },
-    { label: 'bullet list', tag: 'ul' },
-    { label: 'ordered list', tag: 'ol' },
-    { label: 'code block', tag: 'pre code' },
-    { label: 'blockquote', tag: 'blockquote' },
+    { label: 'H1', tag: 'h1' },
+    { label: 'H2', tag: 'h2' },
+    { label: 'H3', tag: 'h3' },
+    { label: 'H4', tag: 'h4' },
+    { label: 'H5', tag: 'h5' },
+    { label: 'H6', tag: 'h6' },
+    { label: 'Bullet list', tag: 'ul' },
+    { label: 'Ordered list', tag: 'ol' },
+    { label: 'Code block', tag: 'pre code' },
+    { label: 'Blockquote', tag: 'blockquote' },
   ]
 
   buttonNodes.forEach(n => {
     it(`should set ${n.label} when the button is pressed`, () => {
-      cy.get('button').contains('paragraph').click()
+      cy.get('button').contains('Paragraph').click()
       cy.get('.tiptap').type('{selectall}Hello world{selectall}')
 
       cy.get('button').contains(n.label).click()
@@ -83,35 +83,35 @@ context('/src/Examples/Default/React/', () => {
 
   it('should add a hr when on the same line as a node', () => {
     cy.get('.tiptap').type('{rightArrow}')
-    cy.get('button').contains('horizontal rule').click()
+    cy.get('button').contains('Horizontal rule').click()
     cy.get('.tiptap hr').should('exist')
     cy.get('.tiptap h1').should('exist')
   })
 
   it('should add a hr when on a new line', () => {
     cy.get('.tiptap').type('{rightArrow}{enter}')
-    cy.get('button').contains('horizontal rule').click()
+    cy.get('button').contains('Horizontal rule').click()
     cy.get('.tiptap hr').should('exist')
     cy.get('.tiptap h1').should('exist')
   })
 
   it('should add a br', () => {
     cy.get('.tiptap').type('{rightArrow}')
-    cy.get('button').contains('hard break').click()
+    cy.get('button').contains('Hard break').click()
     cy.get('.tiptap h1 br').should('exist')
   })
 
   it('should undo', () => {
     cy.get('.tiptap').type('{selectall}{backspace}')
-    cy.get('button').contains('undo').click()
+    cy.get('button').contains('Undo').click()
     cy.get('.tiptap').should('contain', 'Hello world')
   })
 
   it('should redo', () => {
     cy.get('.tiptap').type('{selectall}{backspace}')
-    cy.get('button').contains('undo').click()
+    cy.get('button').contains('Undo').click()
     cy.get('.tiptap').should('contain', 'Hello world')
-    cy.get('button').contains('redo').click()
+    cy.get('button').contains('Redo').click()
     cy.get('.tiptap').should('not.contain', 'Hello world')
   })
 })
diff --git a/demos/src/Examples/Default/Svelte/index.svelte b/demos/src/Examples/Default/Svelte/index.svelte
index d43c0f0e3..6e915f09d 100644
--- a/demos/src/Examples/Default/Svelte/index.svelte
+++ b/demos/src/Examples/Default/Svelte/index.svelte
@@ -1,6 +1,9 @@
 <script>
   import "./styles.scss";
 
+  import { Color } from '@tiptap/extension-color'
+  import ListItem from '@tiptap/extension-list-item'
+  import TextStyle from '@tiptap/extension-text-style'
   import StarterKit from "@tiptap/starter-kit";
   import { Editor } from "@tiptap/core";
   import { onMount } from "svelte";
@@ -11,13 +14,17 @@
   onMount(() => {
     editor = new Editor({
       element: element,
-      extensions: [StarterKit],
+      extensions: [
+        Color.configure({ types: [TextStyle.name, ListItem.name] }),
+        TextStyle.configure({ types: [ListItem.name] }),
+        StarterKit,
+      ],
       content: `
             <h2>
               Hi there,
             </h2>
             <p>
-              this is a <em>basic</em> example of <strong>tiptap</strong>. Sure, there are all kind of basic text styles you’d probably expect from a text editor. But wait until you see the lists:
+              this is a <em>basic</em> example of <strong>Tiptap</strong>. Sure, there are all kind of basic text styles you’d probably expect from a text editor. But wait until you see the lists:
             </p>
             <ul>
               <li>
@@ -31,8 +38,8 @@
               Isn’t that great? And all of that is editable. But wait, there’s more. Let’s try a code block:
             </p>
             <pre><code class="language-css">body {
-        display: none;
-      }</code></pre>
+  display: none;
+}</code></pre>
             <p>
               I know, I know, this is impressive. It’s only the tip of the iceberg though. Give it a try and click a little bit around. Don’t forget to check the other examples too.
             </p>
@@ -51,119 +58,125 @@
 </script>
 
 {#if editor}
-  <div>
-    <div>
+  <div class="control-group">
+    <div class="button-group">
       <button
         on:click={() => console.log && editor.chain().focus().toggleBold().run()}
         disabled={!editor.can().chain().focus().toggleBold().run()}
         class={editor.isActive("bold") ? "is-active" : ""}
       >
-        bold
+        Bold
       </button>
       <button
         on:click={() => editor.chain().focus().toggleItalic().run()}
         disabled={!editor.can().chain().focus().toggleItalic().run()}
         class={editor.isActive("italic") ? "is-active" : ""}
       >
-        italic
+        Italic
       </button>
       <button
         on:click={() => editor.chain().focus().toggleStrike().run()}
         disabled={!editor.can().chain().focus().toggleStrike().run()}
         class={editor.isActive("strike") ? "is-active" : ""}
       >
-        strike
+        Strike
       </button>
       <button
         on:click={() => editor.chain().focus().toggleCode().run()}
         disabled={!editor.can().chain().focus().toggleCode().run()}
         class={editor.isActive("code") ? "is-active" : ""}
       >
-        code
+        Code
       </button>
-      <button on:click={() => editor.chain().focus().unsetAllMarks().run()}> clear marks </button>
-      <button on:click={() => editor.chain().focus().clearNodes().run()}> clear nodes </button>
+      <button on:click={() => editor.chain().focus().unsetAllMarks().run()}>Clear marks</button>
+      <button on:click={() => editor.chain().focus().clearNodes().run()}>Clear nodes</button>
       <button
         on:click={() => editor.chain().focus().setParagraph().run()}
         class={editor.isActive("paragraph") ? "is-active" : ""}
       >
-        paragraph
+        Paragraph
       </button>
       <button
         on:click={() => editor.chain().focus().toggleHeading({ level: 1 }).run()}
         class={editor.isActive("heading", { level: 1 }) ? "is-active" : ""}
       >
-        h1
+        H1
       </button>
       <button
         on:click={() => editor.chain().focus().toggleHeading({ level: 2 }).run()}
         class={editor.isActive("heading", { level: 2 }) ? "is-active" : ""}
       >
-        h2
+        H2
       </button>
       <button
         on:click={() => editor.chain().focus().toggleHeading({ level: 3 }).run()}
         class={editor.isActive("heading", { level: 3 }) ? "is-active" : ""}
       >
-        h3
+        H3
       </button>
       <button
         on:click={() => editor.chain().focus().toggleHeading({ level: 4 }).run()}
         class={editor.isActive("heading", { level: 4 }) ? "is-active" : ""}
       >
-        h4
+        H4
       </button>
       <button
         on:click={() => editor.chain().focus().toggleHeading({ level: 5 }).run()}
         class={editor.isActive("heading", { level: 5 }) ? "is-active" : ""}
       >
-        h5
+        H5
       </button>
       <button
         on:click={() => editor.chain().focus().toggleHeading({ level: 6 }).run()}
         class={editor.isActive("heading", { level: 6 }) ? "is-active" : ""}
       >
-        h6
+        H6
       </button>
       <button
         on:click={() => editor.chain().focus().toggleBulletList().run()}
         class={editor.isActive("bulletList") ? "is-active" : ""}
       >
-        bullet list
+        Bullet list
       </button>
       <button
         on:click={() => editor.chain().focus().toggleOrderedList().run()}
         class={editor.isActive("orderedList") ? "is-active" : ""}
       >
-        ordered list
+        Ordered list
       </button>
       <button
         on:click={() => editor.chain().focus().toggleCodeBlock().run()}
         class={editor.isActive("codeBlock") ? "is-active" : ""}
       >
-        code block
+        Code block
       </button>
       <button
         on:click={() => editor.chain().focus().toggleBlockquote().run()}
         class={editor.isActive("blockquote") ? "is-active" : ""}
       >
-        blockquote
+        Blockquote
       </button>
       <button on:click={() => editor.chain().focus().setHorizontalRule().run()}>
-        horizontal rule
+        Horizontal rule
       </button>
-      <button on:click={() => editor.chain().focus().setHardBreak().run()}> hard break </button>
+      <button on:click={() => editor.chain().focus().setHardBreak().run()}>Hard break</button>
       <button
         on:click={() => editor.chain().focus().undo().run()}
         disabled={!editor.can().chain().focus().undo().run()}
       >
-        undo
+        Undo
       </button>
       <button
         on:click={() => editor.chain().focus().redo().run()}
         disabled={!editor.can().chain().focus().redo().run()}
       >
-        redo
+        Redo
+      </button>
+      <button
+        on:click={() => editor.chain().focus().setColor('#958DF1').run()}
+        class={editor.isActive('textStyle', { color: '#958DF1' }) ? 'is-active' : ''}
+      >
+        Purple
       </button>
     </div>
   </div>
diff --git a/demos/src/Examples/Default/Svelte/styles.scss b/demos/src/Examples/Default/Svelte/styles.scss
index 4d2b2c81e..7694d7322 100644
--- a/demos/src/Examples/Default/Svelte/styles.scss
+++ b/demos/src/Examples/Default/Svelte/styles.scss
@@ -1,56 +1,91 @@
 /* Basic editor styles */
 .tiptap {
-  > * + * {
-    margin-top: 0.75em;
+  :first-child {
+    margin-top: 0;
   }
 
-  ul,
+  /* List styles */
+  ul, 
   ol {
     padding: 0 1rem;
-  }
-
-  h1,
-  h2,
-  h3,
-  h4,
-  h5,
-  h6 {
-    line-height: 1.1;
-  }
-
-  code {
-    background-color: rgba(#616161, 0.1);
-    color: #616161;
-  }
-
-  pre {
-    background: #0D0D0D;
-    color: #FFF;
-    font-family: 'JetBrainsMono', monospace;
-    padding: 0.75rem 1rem;
-    border-radius: 0.5rem;
-
-    code {
-      color: inherit;
-      padding: 0;
-      background: none;
-      font-size: 0.8rem;
+    margin: 1.25rem 1rem 1.25rem 0.4rem;
+    
+    li p {
+      margin-top: 0.25em;
+      margin-bottom: 0.25em;
     }
   }
 
-  img {
-    max-width: 100%;
-    height: auto;
+  /* Heading styles */
+  h1, 
+  h2, 
+  h3, 
+  h4, 
+  h5, 
+  h6 {
+    line-height: 1.1;
+    margin-top: 2.5rem;
+    text-wrap: pretty;
+  }
+
+  h1, 
+  h2 {
+    margin-top: 3.5rem;
+    margin-bottom: 1.5rem;
+  }
+
+  h1 { 
+    font-size: 1.4rem; 
+  }
+
+  h2 { 
+    font-size: 1.2rem; 
+  }
+
+  h3 { 
+    font-size: 1.1rem; 
+  }
+
+  h4, 
+  h5, 
+  h6 { 
+    font-size: 1rem; 
+  }
+
+  /* Code and preformatted text styles */
+  code {
+    background-color: var(--purple-light);
+    border-radius: 0.4rem;
+    color: var(--black);
+    font-size: 0.85rem;
+    padding: 0.25em 0.3em;
+  }
+
+  pre {
+    background: var(--black);
+    border-radius: 0.5rem;
+    color: var(--white);
+    font-family: 'JetBrainsMono', monospace;
+    margin: 1.5rem 0;
+    padding: 0.75rem 1rem;
+
+    code {
+      background: none;
+      color: inherit;
+      font-size: 0.8rem;
+      padding: 0;
+    }
   }
 
   blockquote {
+    border-left: 3px solid var(--gray-3);
+    margin: 1.5rem 0;
     padding-left: 1rem;
-    border-left: 2px solid rgba(#0D0D0D, 0.1);
   }
 
   hr {
     border: none;
-    border-top: 2px solid rgba(#0D0D0D, 0.1);
+    border-top: 1px solid var(--gray-2);
     margin: 2rem 0;
   }
 }
diff --git a/demos/src/Examples/Default/Vue/index.spec.js b/demos/src/Examples/Default/Vue/index.spec.js
index 87600d692..c777d2660 100644
--- a/demos/src/Examples/Default/Vue/index.spec.js
+++ b/demos/src/Examples/Default/Vue/index.spec.js
@@ -21,15 +21,15 @@ context('/src/Examples/Default/Vue/', () => {
   })
 
   const buttonMarks = [
-    { label: 'bold', tag: 'strong' },
-    { label: 'italic', tag: 'em' },
-    { label: 'strike', tag: 's' },
+    { label: 'Bold', tag: 'strong' },
+    { label: 'Italic', tag: 'em' },
+    { label: 'Strike', tag: 's' },
   ]
 
   buttonMarks.forEach(m => {
     it(`should apply ${m.label} when the button is pressed`, () => {
       cy.get('.tiptap').type('{selectall}Hello world')
-      cy.get('button').contains('paragraph').click()
+      cy.get('button').contains('Paragraph').click()
       cy.get('.tiptap').type('{selectall}')
       cy.get('button').contains(m.label).click()
       cy.get(`.tiptap ${m.tag}`).should('exist').should('have.text', 'Hello world')
@@ -38,40 +38,40 @@ context('/src/Examples/Default/Vue/', () => {
 
   it('should clear marks when the button is pressed', () => {
     cy.get('.tiptap').type('{selectall}Hello world')
-    cy.get('button').contains('paragraph').click()
+    cy.get('button').contains('Paragraph').click()
     cy.get('.tiptap').type('{selectall}')
-    cy.get('button').contains('bold').click()
+    cy.get('button').contains('Bold').click()
     cy.get('.tiptap strong').should('exist').should('have.text', 'Hello world')
-    cy.get('button').contains('clear marks').click()
+    cy.get('button').contains('Clear marks').click()
     cy.get('.tiptap strong').should('not.exist')
   })
 
   it('should clear nodes when the button is pressed', () => {
     cy.get('.tiptap').type('{selectall}Hello world')
-    cy.get('button').contains('bullet list').click()
+    cy.get('button').contains('Bullet list').click()
     cy.get('.tiptap ul').should('exist').should('have.text', 'Hello world')
     cy.get('.tiptap').type('{enter}A second item{enter}A third item{selectall}')
-    cy.get('button').contains('clear nodes').click()
+    cy.get('button').contains('Clear nodes').click()
     cy.get('.tiptap ul').should('not.exist')
     cy.get('.tiptap p').should('have.length', 3)
   })
 
   const buttonNodes = [
-    { label: 'h1', tag: 'h1' },
-    { label: 'h2', tag: 'h2' },
-    { label: 'h3', tag: 'h3' },
-    { label: 'h4', tag: 'h4' },
-    { label: 'h5', tag: 'h5' },
-    { label: 'h6', tag: 'h6' },
-    { label: 'bullet list', tag: 'ul' },
-    { label: 'ordered list', tag: 'ol' },
-    { label: 'code block', tag: 'pre code' },
-    { label: 'blockquote', tag: 'blockquote' },
+    { label: 'H1', tag: 'h1' },
+    { label: 'H2', tag: 'h2' },
+    { label: 'H3', tag: 'h3' },
+    { label: 'H4', tag: 'h4' },
+    { label: 'H5', tag: 'h5' },
+    { label: 'H6', tag: 'h6' },
+    { label: 'Bullet list', tag: 'ul' },
+    { label: 'Ordered list', tag: 'ol' },
+    { label: 'Code block', tag: 'pre code' },
+    { label: 'Blockquote', tag: 'blockquote' },
   ]
 
   buttonNodes.forEach(n => {
     it(`should set ${n.label} when the button is pressed`, () => {
-      cy.get('button').contains('paragraph').click()
+      cy.get('button').contains('Paragraph').click()
       cy.get('.tiptap').type('{selectall}Hello world{selectall}')
 
       cy.get('button').contains(n.label).click()
@@ -83,35 +83,35 @@ context('/src/Examples/Default/Vue/', () => {
 
   it('should add a hr when on the same line as a node', () => {
     cy.get('.tiptap').type('{rightArrow}')
-    cy.get('button').contains('horizontal rule').click()
+    cy.get('button').contains('Horizontal rule').click()
     cy.get('.tiptap hr').should('exist')
     cy.get('.tiptap h1').should('exist')
   })
 
   it('should add a hr when on a new line', () => {
     cy.get('.tiptap').type('{rightArrow}{enter}')
-    cy.get('button').contains('horizontal rule').click()
+    cy.get('button').contains('Horizontal rule').click()
     cy.get('.tiptap hr').should('exist')
     cy.get('.tiptap h1').should('exist')
   })
 
   it('should add a br', () => {
     cy.get('.tiptap').type('{rightArrow}')
-    cy.get('button').contains('hard break').click()
+    cy.get('button').contains('Hard break').click()
     cy.get('.tiptap h1 br').should('exist')
   })
 
   it('should undo', () => {
     cy.get('.tiptap').type('{selectall}{backspace}')
-    cy.get('button').contains('undo').click()
+    cy.get('button').contains('Undo').click()
     cy.get('.tiptap').should('contain', 'Hello world')
   })
 
   it('should redo', () => {
     cy.get('.tiptap').type('{selectall}{backspace}')
-    cy.get('button').contains('undo').click()
+    cy.get('button').contains('Undo').click()
     cy.get('.tiptap').should('contain', 'Hello world')
-    cy.get('button').contains('redo').click()
+    cy.get('button').contains('Redo').click()
     cy.get('.tiptap').should('not.contain', 'Hello world')
   })
 })
diff --git a/demos/src/Examples/Default/Vue/index.vue b/demos/src/Examples/Default/Vue/index.vue
index a01e6ded2..400eba78f 100644
--- a/demos/src/Examples/Default/Vue/index.vue
+++ b/demos/src/Examples/Default/Vue/index.vue
@@ -1,73 +1,83 @@
 <template>
-  <div v-if="editor">
-    <button @click="editor.chain().focus().toggleBold().run()" :disabled="!editor.can().chain().focus().toggleBold().run()" :class="{ 'is-active': editor.isActive('bold') }">
-      bold
-    </button>
-    <button @click="editor.chain().focus().toggleItalic().run()" :disabled="!editor.can().chain().focus().toggleItalic().run()" :class="{ 'is-active': editor.isActive('italic') }">
-      italic
-    </button>
-    <button @click="editor.chain().focus().toggleStrike().run()" :disabled="!editor.can().chain().focus().toggleStrike().run()" :class="{ 'is-active': editor.isActive('strike') }">
-      strike
-    </button>
-    <button @click="editor.chain().focus().toggleCode().run()" :disabled="!editor.can().chain().focus().toggleCode().run()" :class="{ 'is-active': editor.isActive('code') }">
-      code
-    </button>
-    <button @click="editor.chain().focus().unsetAllMarks().run()">
-      clear marks
-    </button>
-    <button @click="editor.chain().focus().clearNodes().run()">
-      clear nodes
-    </button>
-    <button @click="editor.chain().focus().setParagraph().run()" :class="{ 'is-active': editor.isActive('paragraph') }">
-      paragraph
-    </button>
-    <button @click="editor.chain().focus().toggleHeading({ level: 1 }).run()" :class="{ 'is-active': editor.isActive('heading', { level: 1 }) }">
-      h1
-    </button>
-    <button @click="editor.chain().focus().toggleHeading({ level: 2 }).run()" :class="{ 'is-active': editor.isActive('heading', { level: 2 }) }">
-      h2
-    </button>
-    <button @click="editor.chain().focus().toggleHeading({ level: 3 }).run()" :class="{ 'is-active': editor.isActive('heading', { level: 3 }) }">
-      h3
-    </button>
-    <button @click="editor.chain().focus().toggleHeading({ level: 4 }).run()" :class="{ 'is-active': editor.isActive('heading', { level: 4 }) }">
-      h4
-    </button>
-    <button @click="editor.chain().focus().toggleHeading({ level: 5 }).run()" :class="{ 'is-active': editor.isActive('heading', { level: 5 }) }">
-      h5
-    </button>
-    <button @click="editor.chain().focus().toggleHeading({ level: 6 }).run()" :class="{ 'is-active': editor.isActive('heading', { level: 6 }) }">
-      h6
-    </button>
-    <button @click="editor.chain().focus().toggleBulletList().run()" :class="{ 'is-active': editor.isActive('bulletList') }">
-      bullet list
-    </button>
-    <button @click="editor.chain().focus().toggleOrderedList().run()" :class="{ 'is-active': editor.isActive('orderedList') }">
-      ordered list
-    </button>
-    <button @click="editor.chain().focus().toggleCodeBlock().run()" :class="{ 'is-active': editor.isActive('codeBlock') }">
-      code block
-    </button>
-    <button @click="editor.chain().focus().toggleBlockquote().run()" :class="{ 'is-active': editor.isActive('blockquote') }">
-      blockquote
-    </button>
-    <button @click="editor.chain().focus().setHorizontalRule().run()">
-      horizontal rule
-    </button>
-    <button @click="editor.chain().focus().setHardBreak().run()">
-      hard break
-    </button>
-    <button @click="editor.chain().focus().undo().run()" :disabled="!editor.can().chain().focus().undo().run()">
-      undo
-    </button>
-    <button @click="editor.chain().focus().redo().run()" :disabled="!editor.can().chain().focus().redo().run()">
-      redo
-    </button>
+  <div v-if="editor" class="container">
+    <div class="control-group">
+      <div class="button-group">
+        <button @click="editor.chain().focus().toggleBold().run()" :disabled="!editor.can().chain().focus().toggleBold().run()" :class="{ 'is-active': editor.isActive('bold') }">
+          Bold
+        </button>
+        <button @click="editor.chain().focus().toggleItalic().run()" :disabled="!editor.can().chain().focus().toggleItalic().run()" :class="{ 'is-active': editor.isActive('italic') }">
+          Italic
+        </button>
+        <button @click="editor.chain().focus().toggleStrike().run()" :disabled="!editor.can().chain().focus().toggleStrike().run()" :class="{ 'is-active': editor.isActive('strike') }">
+          Strike
+        </button>
+        <button @click="editor.chain().focus().toggleCode().run()" :disabled="!editor.can().chain().focus().toggleCode().run()" :class="{ 'is-active': editor.isActive('code') }">
+          Code
+        </button>
+        <button @click="editor.chain().focus().unsetAllMarks().run()">
+          Clear marks
+        </button>
+        <button @click="editor.chain().focus().clearNodes().run()">
+          Clear nodes
+        </button>
+        <button @click="editor.chain().focus().setParagraph().run()" :class="{ 'is-active': editor.isActive('paragraph') }">
+          Paragraph
+        </button>
+        <button @click="editor.chain().focus().toggleHeading({ level: 1 }).run()" :class="{ 'is-active': editor.isActive('heading', { level: 1 }) }">
+          H1
+        </button>
+        <button @click="editor.chain().focus().toggleHeading({ level: 2 }).run()" :class="{ 'is-active': editor.isActive('heading', { level: 2 }) }">
+          H2
+        </button>
+        <button @click="editor.chain().focus().toggleHeading({ level: 3 }).run()" :class="{ 'is-active': editor.isActive('heading', { level: 3 }) }">
+          H3
+        </button>
+        <button @click="editor.chain().focus().toggleHeading({ level: 4 }).run()" :class="{ 'is-active': editor.isActive('heading', { level: 4 }) }">
+          H4
+        </button>
+        <button @click="editor.chain().focus().toggleHeading({ level: 5 }).run()" :class="{ 'is-active': editor.isActive('heading', { level: 5 }) }">
+          H5
+        </button>
+        <button @click="editor.chain().focus().toggleHeading({ level: 6 }).run()" :class="{ 'is-active': editor.isActive('heading', { level: 6 }) }">
+          H6
+        </button>
+        <button @click="editor.chain().focus().toggleBulletList().run()" :class="{ 'is-active': editor.isActive('bulletList') }">
+          Bullet list
+        </button>
+        <button @click="editor.chain().focus().toggleOrderedList().run()" :class="{ 'is-active': editor.isActive('orderedList') }">
+          Ordered list
+        </button>
+        <button @click="editor.chain().focus().toggleCodeBlock().run()" :class="{ 'is-active': editor.isActive('codeBlock') }">
+          Code block
+        </button>
+        <button @click="editor.chain().focus().toggleBlockquote().run()" :class="{ 'is-active': editor.isActive('blockquote') }">
+          Blockquote
+        </button>
+        <button @click="editor.chain().focus().setHorizontalRule().run()">
+          Horizontal rule
+        </button>
+        <button @click="editor.chain().focus().setHardBreak().run()">
+          Hard break
+        </button>
+        <button @click="editor.chain().focus().undo().run()" :disabled="!editor.can().chain().focus().undo().run()">
+          Undo
+        </button>
+        <button @click="editor.chain().focus().redo().run()" :disabled="!editor.can().chain().focus().redo().run()">
+          Redo
+        </button>
+        <button @click="editor.chain().focus().setColor('#958DF1').run()" :class="{ 'is-active': editor.isActive('textStyle', { color: '#958DF1' }) }">
+          Purple
+        </button>
+      </div>
+    </div>
+    <editor-content :editor="editor" />
   </div>
-  <editor-content :editor="editor" />
 </template>
 
 <script>
+import { Color } from '@tiptap/extension-color'
+import ListItem from '@tiptap/extension-list-item'
+import TextStyle from '@tiptap/extension-text-style'
 import StarterKit from '@tiptap/starter-kit'
 import { Editor, EditorContent } from '@tiptap/vue-3'
 
@@ -85,6 +95,8 @@ export default {
   mounted() {
     this.editor = new Editor({
       extensions: [
+        Color.configure({ types: [TextStyle.name, ListItem.name] }),
+        TextStyle.configure({ types: [ListItem.name] }),
         StarterKit,
       ],
       content: `
@@ -92,7 +104,7 @@ export default {
           Hi there,
         </h2>
         <p>
-          this is a <em>basic</em> example of <strong>tiptap</strong>. Sure, there are all kind of basic text styles you’d probably expect from a text editor. But wait until you see the lists:
+          this is a <em>basic</em> example of <strong>Tiptap</strong>. Sure, there are all kind of basic text styles you’d probably expect from a text editor. But wait until you see the lists:
         </p>
         <ul>
           <li>
@@ -129,15 +141,23 @@ export default {
 <style lang="scss">
 /* Basic editor styles */
 .tiptap {
-  > * + * {
-    margin-top: 0.75em;
+  :first-child {
+    margin-top: 0;
   }
 
+  /* List styles */
   ul,
   ol {
     padding: 0 1rem;
+    margin: 1.25rem 1rem 1.25rem 0.4rem;
+
+    li p {
+      margin-top: 0.25em;
+      margin-bottom: 0.25em;
+    }
   }
 
+  /* Heading styles */
   h1,
   h2,
   h3,
@@ -145,41 +165,68 @@ export default {
   h5,
   h6 {
     line-height: 1.1;
+    margin-top: 2.5rem;
+    text-wrap: pretty;
   }
 
+  h1,
+  h2 {
+    margin-top: 3.5rem;
+    margin-bottom: 1.5rem;
+  }
+
+  h1 {
+    font-size: 1.4rem;
+  }
+
+  h2 {
+    font-size: 1.2rem;
+  }
+
+  h3 {
+    font-size: 1.1rem;
+  }
+
+  h4,
+  h5,
+  h6 {
+    font-size: 1rem;
+  }
+
+  /* Code and preformatted text styles */
   code {
-    background-color: rgba(#616161, 0.1);
-    color: #616161;
+    background-color: var(--purple-light);
+    border-radius: 0.4rem;
+    color: var(--black);
+    font-size: 0.85rem;
+    padding: 0.25em 0.3em;
   }
 
   pre {
-    background: #0D0D0D;
-    color: #FFF;
-    font-family: 'JetBrainsMono', monospace;
-    padding: 0.75rem 1rem;
+    background: var(--black);
     border-radius: 0.5rem;
+    color: var(--white);
+    font-family: 'JetBrainsMono', monospace;
+    margin: 1.5rem 0;
+    padding: 0.75rem 1rem;
 
     code {
-      color: inherit;
-      padding: 0;
       background: none;
+      color: inherit;
       font-size: 0.8rem;
+      padding: 0;
     }
   }
 
-  img {
-    max-width: 100%;
-    height: auto;
-  }
-
   blockquote {
+    border-left: 3px solid var(--gray-3);
+    margin: 1.5rem 0;
     padding-left: 1rem;
-    border-left: 2px solid rgba(#0D0D0D, 0.1);
   }
 
   hr {
     border: none;
-    border-top: 2px solid rgba(#0D0D0D, 0.1);
+    border-top: 1px solid var(--gray-2);
     margin: 2rem 0;
   }
 }
diff --git a/demos/src/Examples/Drawing/Vue/Component.vue b/demos/src/Examples/Drawing/Vue/Component.vue
index 543379ae9..69c7bcfd0 100644
--- a/demos/src/Examples/Drawing/Vue/Component.vue
+++ b/demos/src/Examples/Drawing/Vue/Component.vue
@@ -1,27 +1,31 @@
 <template>
   <node-view-wrapper class="draw">
-    <input type="color" v-model="color">
-    <input
-      type="number"
-      min="1"
-      max="10"
-      v-model="size"
-    >
-    <button @click="clear">
-      clear
-    </button>
-    <svg viewBox="0 0 500 250" ref="canvas">
-      <template v-for="item in node.attrs.lines">
-        <path
-          v-if="item.id !== id"
-          :key="item.id"
-          :d="item.path"
-          :id="`id-${item.id}`"
-          :stroke="item.color"
-          :stroke-width="item.size"
-        />
-      </template>
-    </svg>
+    <div class="control-group">
+      <div class="button-group">
+        <input type="color" v-model="color">
+        <input
+          type="number"
+          min="1"
+          max="10"
+          v-model="size"
+        >
+        <button @click="clear">
+          Clear
+        </button>
+      </div>
+      <svg viewBox="0 0 500 250" ref="canvas">
+        <template v-for="item in node.attrs.lines">
+          <path
+            v-if="item.id !== id"
+            :key="item.id"
+            :d="item.path"
+            :id="`id-${item.id}`"
+            :stroke="item.color"
+            :stroke-width="item.size"
+          />
+        </template>
+      </svg>
+    </div>
   </node-view-wrapper>
 </template>
 
diff --git a/demos/src/Examples/Formatting/React/index.jsx b/demos/src/Examples/Formatting/React/index.jsx
index e5225ca86..4d139f921 100644
--- a/demos/src/Examples/Formatting/React/index.jsx
+++ b/demos/src/Examples/Formatting/React/index.jsx
@@ -12,44 +12,46 @@ const MenuBar = ({ editor }) => {
   }
 
   return (
-    <>
-      <button onClick={() => editor.chain().focus().toggleHeading({ level: 1 }).run()} className={editor.isActive('heading', { level: 1 }) ? 'is-active' : ''}>
-        h1
-      </button>
-      <button onClick={() => editor.chain().focus().toggleHeading({ level: 2 }).run()} className={editor.isActive('heading', { level: 2 }) ? 'is-active' : ''}>
-        h2
-      </button>
-      <button onClick={() => editor.chain().focus().toggleHeading({ level: 3 }).run()} className={editor.isActive('heading', { level: 3 }) ? 'is-active' : ''}>
-        h3
-      </button>
-      <button onClick={() => editor.chain().focus().setParagraph().run()} className={editor.isActive('paragraph') ? 'is-active' : ''}>
-        paragraph
-      </button>
-      <button onClick={() => editor.chain().focus().toggleBold().run()} className={editor.isActive('bold') ? 'is-active' : ''}>
-        bold
-      </button>
-      <button onClick={() => editor.chain().focus().toggleItalic().run()} className={editor.isActive('italic') ? 'is-active' : ''}>
-        italic
-      </button>
-      <button onClick={() => editor.chain().focus().toggleStrike().run()} className={editor.isActive('strike') ? 'is-active' : ''}>
-        strike
-      </button>
-      <button onClick={() => editor.chain().focus().toggleHighlight().run()} className={editor.isActive('highlight') ? 'is-active' : ''}>
-        highlight
-      </button>
-      <button onClick={() => editor.chain().focus().setTextAlign('left').run()} className={editor.isActive({ textAlign: 'left' }) ? 'is-active' : ''}>
-        left
-      </button>
-      <button onClick={() => editor.chain().focus().setTextAlign('center').run()} className={editor.isActive({ textAlign: 'center' }) ? 'is-active' : ''}>
-        center
-      </button>
-      <button onClick={() => editor.chain().focus().setTextAlign('right').run()} className={editor.isActive({ textAlign: 'right' }) ? 'is-active' : ''}>
-        right
-      </button>
-      <button onClick={() => editor.chain().focus().setTextAlign('justify').run()} className={editor.isActive({ textAlign: 'justify' }) ? 'is-active' : ''}>
-        justify
-      </button>
-    </>
+    <div className="control-group">
+      <div className="button-group">
+        <button onClick={() => editor.chain().focus().toggleHeading({ level: 1 }).run()} className={editor.isActive('heading', { level: 1 }) ? 'is-active' : ''}>
+          H1
+        </button>
+        <button onClick={() => editor.chain().focus().toggleHeading({ level: 2 }).run()} className={editor.isActive('heading', { level: 2 }) ? 'is-active' : ''}>
+          H2
+        </button>
+        <button onClick={() => editor.chain().focus().toggleHeading({ level: 3 }).run()} className={editor.isActive('heading', { level: 3 }) ? 'is-active' : ''}>
+          H3
+        </button>
+        <button onClick={() => editor.chain().focus().setParagraph().run()} className={editor.isActive('paragraph') ? 'is-active' : ''}>
+          Paragraph
+        </button>
+        <button onClick={() => editor.chain().focus().toggleBold().run()} className={editor.isActive('bold') ? 'is-active' : ''}>
+          Bold
+        </button>
+        <button onClick={() => editor.chain().focus().toggleItalic().run()} className={editor.isActive('italic') ? 'is-active' : ''}>
+          Italic
+        </button>
+        <button onClick={() => editor.chain().focus().toggleStrike().run()} className={editor.isActive('strike') ? 'is-active' : ''}>
+          Strike
+        </button>
+        <button onClick={() => editor.chain().focus().toggleHighlight().run()} className={editor.isActive('highlight') ? 'is-active' : ''}>
+          Highlight
+        </button>
+        <button onClick={() => editor.chain().focus().setTextAlign('left').run()} className={editor.isActive({ textAlign: 'left' }) ? 'is-active' : ''}>
+          Left
+        </button>
+        <button onClick={() => editor.chain().focus().setTextAlign('center').run()} className={editor.isActive({ textAlign: 'center' }) ? 'is-active' : ''}>
+          Center
+        </button>
+        <button onClick={() => editor.chain().focus().setTextAlign('right').run()} className={editor.isActive({ textAlign: 'right' }) ? 'is-active' : ''}>
+          Right
+        </button>
+        <button onClick={() => editor.chain().focus().setTextAlign('justify').run()} className={editor.isActive({ textAlign: 'justify' }) ? 'is-active' : ''}>
+          Justify
+        </button>
+      </div>
+    </div>
   )
 }
 
@@ -91,9 +93,9 @@ export default () => {
   })
 
   return (
-    <div>
+    <>
       <MenuBar editor={editor} />
       <EditorContent editor={editor} />
-    </div>
+    </>
   )
 }
diff --git a/demos/src/Examples/Formatting/React/index.spec.js b/demos/src/Examples/Formatting/React/index.spec.js
index f7ff9189d..eeabd563d 100644
--- a/demos/src/Examples/Formatting/React/index.spec.js
+++ b/demos/src/Examples/Formatting/React/index.spec.js
@@ -8,7 +8,7 @@ context('/src/Examples/Formatting/React/', () => {
   })
 
   const marks = [
-    { label: 'highlight', mark: 'mark' },
+    { label: 'Highlight', mark: 'mark' },
   ]
 
   marks.forEach(m => {
@@ -20,10 +20,10 @@ context('/src/Examples/Formatting/React/', () => {
   })
 
   const alignments = [
-    { label: 'left', alignment: 'left' },
-    { label: 'center', alignment: 'center' },
-    { label: 'right', alignment: 'right' },
-    { label: 'justify', alignment: 'justify' },
+    { label: 'Left', alignment: 'left' },
+    { label: 'Center', alignment: 'center' },
+    { label: 'Right', alignment: 'right' },
+    { label: 'Justify', alignment: 'justify' },
   ]
 
   alignments.forEach(a => {
diff --git a/demos/src/Examples/Formatting/React/styles.scss b/demos/src/Examples/Formatting/React/styles.scss
index 8ca9d65d5..d23c43fc9 100644
--- a/demos/src/Examples/Formatting/React/styles.scss
+++ b/demos/src/Examples/Formatting/React/styles.scss
@@ -1,62 +1,98 @@
 /* Basic editor styles */
 .tiptap {
-  margin-top: 1rem;
-
-  > * + * {
-    margin-top: 0.75em;
+  :first-child {
+    margin-top: 0;
   }
 
-  ul,
+  /* List styles */
+  ul, 
   ol {
     padding: 0 1rem;
+    margin: 1.25rem 1rem 1.25rem 0.4rem;
+    
+    li p {
+      margin-top: 0.25em;
+      margin-bottom: 0.25em;
+    }
   }
 
-  h1,
-  h2,
-  h3,
-  h4,
-  h5,
+  /* Heading styles */
+  h1, 
+  h2, 
+  h3, 
+  h4, 
+  h5, 
   h6 {
     line-height: 1.1;
+    margin-top: 2.5rem;
+    text-wrap: pretty;
   }
 
+  h1, 
+  h2 {
+    margin-top: 3.5rem;
+    margin-bottom: 1.5rem;
+  }
+
+  h1 { 
+    font-size: 1.4rem; 
+  }
+
+  h2 { 
+    font-size: 1.2rem; 
+  }
+
+  h3 { 
+    font-size: 1.1rem; 
+  }
+
+  h4, 
+  h5, 
+  h6 { 
+    font-size: 1rem; 
+  }
+
+  /* Code and preformatted text styles */
   code {
-    background-color: rgba(#616161, 0.1);
-    color: #616161;
+    background-color: var(--purple-light);
+    border-radius: 0.4rem;
+    color: var(--black);
+    font-size: 0.85rem;
+    padding: 0.25em 0.3em;
   }
 
   pre {
-    background: #0D0D0D;
-    color: #FFF;
-    font-family: 'JetBrainsMono', monospace;
-    padding: 0.75rem 1rem;
+    background: var(--black);
     border-radius: 0.5rem;
+    color: var(--white);
+    font-family: 'JetBrainsMono', monospace;
+    margin: 1.5rem 0;
+    padding: 0.75rem 1rem;
 
     code {
-      color: inherit;
-      padding: 0;
       background: none;
+      color: inherit;
       font-size: 0.8rem;
+      padding: 0;
     }
   }
 
   mark {
     background-color: #FAF594;
-  }
-
-  img {
-    max-width: 100%;
-    height: auto;
+    border-radius: 0.4rem;
+    box-decoration-break: clone;
+    padding: 0.1rem 0.3rem;
   }
 
   blockquote {
+    border-left: 3px solid var(--gray-3);
+    margin: 1.5rem 0;
     padding-left: 1rem;
-    border-left: 2px solid rgba(#0D0D0D, 0.1);
   }
 
   hr {
     border: none;
-    border-top: 2px solid rgba(#0D0D0D, 0.1);
+    border-top: 1px solid var(--gray-2);
     margin: 2rem 0;
   }
 }
diff --git a/demos/src/Examples/Formatting/Vue/index.spec.js b/demos/src/Examples/Formatting/Vue/index.spec.js
index dcb6bf2a9..f575b1209 100644
--- a/demos/src/Examples/Formatting/Vue/index.spec.js
+++ b/demos/src/Examples/Formatting/Vue/index.spec.js
@@ -8,7 +8,7 @@ context('/src/Examples/Formatting/Vue/', () => {
   })
 
   const marks = [
-    { label: 'highlight', mark: 'mark' },
+    { label: 'Highlight', mark: 'mark' },
   ]
 
   marks.forEach(m => {
@@ -20,10 +20,10 @@ context('/src/Examples/Formatting/Vue/', () => {
   })
 
   const alignments = [
-    { label: 'left', alignment: 'left' },
-    { label: 'center', alignment: 'center' },
-    { label: 'right', alignment: 'right' },
-    { label: 'justify', alignment: 'justify' },
+    { label: 'Left', alignment: 'left' },
+    { label: 'Center', alignment: 'center' },
+    { label: 'Right', alignment: 'right' },
+    { label: 'Justify', alignment: 'justify' },
   ]
 
   alignments.forEach(a => {
diff --git a/demos/src/Examples/Formatting/Vue/index.vue b/demos/src/Examples/Formatting/Vue/index.vue
index 137be5ad4..83b51c77d 100644
--- a/demos/src/Examples/Formatting/Vue/index.vue
+++ b/demos/src/Examples/Formatting/Vue/index.vue
@@ -1,43 +1,47 @@
 <template>
-  <div v-if="editor">
-    <button @click="editor.chain().focus().toggleHeading({ level: 1 }).run()" :class="{ 'is-active': editor.isActive('heading', { level: 1 }) }">
-      h1
-    </button>
-    <button @click="editor.chain().focus().toggleHeading({ level: 2 }).run()" :class="{ 'is-active': editor.isActive('heading', { level: 2 }) }">
-      h2
-    </button>
-    <button @click="editor.chain().focus().toggleHeading({ level: 3 }).run()" :class="{ 'is-active': editor.isActive('heading', { level: 3 }) }">
-      h3
-    </button>
-    <button @click="editor.chain().focus().setParagraph().run()" :class="{ 'is-active': editor.isActive('paragraph') }">
-      paragraph
-    </button>
-    <button @click="editor.chain().focus().toggleBold().run()" :class="{ 'is-active': editor.isActive('bold') }">
-      bold
-    </button>
-    <button @click="editor.chain().focus().toggleItalic().run()" :class="{ 'is-active': editor.isActive('italic') }">
-      italic
-    </button>
-    <button @click="editor.chain().focus().toggleStrike().run()" :class="{ 'is-active': editor.isActive('strike') }">
-      strike
-    </button>
-    <button @click="editor.chain().focus().toggleHighlight().run()" :class="{ 'is-active': editor.isActive('highlight') }">
-      highlight
-    </button>
-    <button @click="editor.chain().focus().setTextAlign('left').run()" :class="{ 'is-active': editor.isActive({ textAlign: 'left' }) }">
-      left
-    </button>
-    <button @click="editor.chain().focus().setTextAlign('center').run()" :class="{ 'is-active': editor.isActive({ textAlign: 'center' }) }">
-      center
-    </button>
-    <button @click="editor.chain().focus().setTextAlign('right').run()" :class="{ 'is-active': editor.isActive({ textAlign: 'right' }) }">
-      right
-    </button>
-    <button @click="editor.chain().focus().setTextAlign('justify').run()" :class="{ 'is-active': editor.isActive({ textAlign: 'justify' }) }">
-      justify
-    </button>
+  <div v-if="editor" class="container">
+    <div class="control-group">
+      <div class="button-group">
+        <button @click="editor.chain().focus().toggleHeading({ level: 1 }).run()" :class="{ 'is-active': editor.isActive('heading', { level: 1 }) }">
+          H1
+        </button>
+        <button @click="editor.chain().focus().toggleHeading({ level: 2 }).run()" :class="{ 'is-active': editor.isActive('heading', { level: 2 }) }">
+          H2
+        </button>
+        <button @click="editor.chain().focus().toggleHeading({ level: 3 }).run()" :class="{ 'is-active': editor.isActive('heading', { level: 3 }) }">
+          H3
+        </button>
+        <button @click="editor.chain().focus().setParagraph().run()" :class="{ 'is-active': editor.isActive('paragraph') }">
+          Paragraph
+        </button>
+        <button @click="editor.chain().focus().toggleBold().run()" :class="{ 'is-active': editor.isActive('bold') }">
+          Bold
+        </button>
+        <button @click="editor.chain().focus().toggleItalic().run()" :class="{ 'is-active': editor.isActive('italic') }">
+          Italic
+        </button>
+        <button @click="editor.chain().focus().toggleStrike().run()" :class="{ 'is-active': editor.isActive('strike') }">
+          Strike
+        </button>
+        <button @click="editor.chain().focus().toggleHighlight().run()" :class="{ 'is-active': editor.isActive('highlight') }">
+          Highlight
+        </button>
+        <button @click="editor.chain().focus().setTextAlign('left').run()" :class="{ 'is-active': editor.isActive({ textAlign: 'left' }) }">
+          Left
+        </button>
+        <button @click="editor.chain().focus().setTextAlign('center').run()" :class="{ 'is-active': editor.isActive({ textAlign: 'center' }) }">
+          Center
+        </button>
+        <button @click="editor.chain().focus().setTextAlign('right').run()" :class="{ 'is-active': editor.isActive({ textAlign: 'right' }) }">
+          Right
+        </button>
+        <button @click="editor.chain().focus().setTextAlign('justify').run()" :class="{ 'is-active': editor.isActive({ textAlign: 'justify' }) }">
+          Justify
+        </button>
+      </div>
+    </div>
+    <editor-content :editor="editor" />
   </div>
-  <editor-content :editor="editor" />
 </template>
 
 <script>
@@ -104,17 +108,23 @@ export default {
 <style lang="scss">
 /* Basic editor styles */
 .tiptap {
-  margin-top: 1rem;
-
-  > * + * {
-    margin-top: 0.75em;
+  :first-child {
+    margin-top: 0;
   }
 
+  /* List styles */
   ul,
   ol {
     padding: 0 1rem;
+    margin: 1.25rem 1rem 1.25rem 0.4rem;
+
+    li p {
+      margin-top: 0.25em;
+      margin-bottom: 0.25em;
+    }
   }
 
+  /* Heading styles */
   h1,
   h2,
   h3,
@@ -122,45 +132,75 @@ export default {
   h5,
   h6 {
     line-height: 1.1;
+    margin-top: 2.5rem;
+    text-wrap: pretty;
   }
 
+  h1,
+  h2 {
+    margin-top: 3.5rem;
+    margin-bottom: 1.5rem;
+  }
+
+  h1 {
+    font-size: 1.4rem;
+  }
+
+  h2 {
+    font-size: 1.2rem;
+  }
+
+  h3 {
+    font-size: 1.1rem;
+  }
+
+  h4,
+  h5,
+  h6 {
+    font-size: 1rem;
+  }
+
+  /* Code and preformatted text styles */
   code {
-    background-color: rgba(#616161, 0.1);
-    color: #616161;
+    background-color: var(--purple-light);
+    border-radius: 0.4rem;
+    color: var(--black);
+    font-size: 0.85rem;
+    padding: 0.25em 0.3em;
   }
 
   pre {
-    background: #0D0D0D;
-    color: #FFF;
-    font-family: 'JetBrainsMono', monospace;
-    padding: 0.75rem 1rem;
+    background: var(--black);
     border-radius: 0.5rem;
+    color: var(--white);
+    font-family: 'JetBrainsMono', monospace;
+    margin: 1.5rem 0;
+    padding: 0.75rem 1rem;
 
     code {
-      color: inherit;
-      padding: 0;
       background: none;
+      color: inherit;
       font-size: 0.8rem;
+      padding: 0;
     }
   }
 
   mark {
     background-color: #FAF594;
-  }
-
-  img {
-    max-width: 100%;
-    height: auto;
+    border-radius: 0.4rem;
+    box-decoration-break: clone;
+    padding: 0.1rem 0.3rem;
   }
 
   blockquote {
+    border-left: 3px solid var(--gray-3);
+    margin: 1.5rem 0;
     padding-left: 1rem;
-    border-left: 2px solid rgba(#0D0D0D, 0.1);
   }
 
   hr {
     border: none;
-    border-top: 2px solid rgba(#0D0D0D, 0.1);
+    border-top: 1px solid var(--gray-2);
     margin: 2rem 0;
   }
 }
diff --git a/demos/src/Examples/Images/React/index.jsx b/demos/src/Examples/Images/React/index.jsx
index 09a160cd8..fd5f2c4f9 100644
--- a/demos/src/Examples/Images/React/index.jsx
+++ b/demos/src/Examples/Images/React/index.jsx
@@ -37,9 +37,13 @@ export default () => {
   }
 
   return (
-    <div>
-      <button onClick={addImage}>add image from URL</button>
+    <>
+      <div className="control-group">
+        <div className="button-group">
+          <button onClick={addImage}>Add image from URL</button>
+        </div>
+      </div>
       <EditorContent editor={editor} />
-    </div>
+    </>
   )
 }
diff --git a/demos/src/Examples/Images/React/index.spec.js b/demos/src/Examples/Images/React/index.spec.js
index abff8fc18..17a2d2c91 100644
--- a/demos/src/Examples/Images/React/index.spec.js
+++ b/demos/src/Examples/Images/React/index.spec.js
@@ -19,7 +19,7 @@ context('/src/Examples/Images/React/', () => {
       cy.stub(win, 'prompt').returns('https://placehold.co/400x400')
 
       cy.wait(1000)
-      cy.get('button').contains('add image from URL').click({ force: false })
+      cy.get('button').contains('Add image from URL').click({ force: false })
       cy.wait(1000)
       cy.get('.tiptap img').should('have.length', 3)
     })
diff --git a/demos/src/Examples/Images/React/styles.scss b/demos/src/Examples/Images/React/styles.scss
index f3205c6ef..51aa105ad 100644
--- a/demos/src/Examples/Images/React/styles.scss
+++ b/demos/src/Examples/Images/React/styles.scss
@@ -1,15 +1,17 @@
 /* Basic editor styles */
 .tiptap {
-  > * + * {
-    margin-top: 0.75em;
+  :first-child {
+    margin-top: 0;
   }
 
   img {
-    max-width: 100%;
+    display: block;
     height: auto;
+    margin: 1.5rem 0;
+    max-width: 100%;
 
     &.ProseMirror-selectednode {
-      outline: 3px solid #68CEF8;
+      outline: 3px solid var(--purple);
     }
   }
 }
diff --git a/demos/src/Examples/Images/Vue/index.spec.js b/demos/src/Examples/Images/Vue/index.spec.js
index ab2d475f5..e4cce4a4e 100644
--- a/demos/src/Examples/Images/Vue/index.spec.js
+++ b/demos/src/Examples/Images/Vue/index.spec.js
@@ -20,7 +20,7 @@ context('/src/Examples/Images/Vue/', () => {
       cy.stub(win, 'prompt').returns('https://placehold.co/400x400')
 
       cy.wait(1000)
-      cy.get('button').contains('add image from URL').click({ force: false })
+      cy.get('button').contains('Add image from URL').click({ force: false })
       cy.wait(1000)
       cy.get('.tiptap img').should('have.length', 3)
     })
diff --git a/demos/src/Examples/Images/Vue/index.vue b/demos/src/Examples/Images/Vue/index.vue
index 1690411da..ec3474ef1 100644
--- a/demos/src/Examples/Images/Vue/index.vue
+++ b/demos/src/Examples/Images/Vue/index.vue
@@ -1,8 +1,12 @@
 <template>
-  <div v-if="editor">
-    <button @click="addImage">add image from URL</button>
+  <div v-if="editor" class="container">
+    <div class="control-group">
+      <div class="button-group">
+        <button @click="addImage">Add image from URL</button>
+      </div>
+    </div>
+    <editor-content :editor="editor" />
   </div>
-  <editor-content :editor="editor" />
 </template>
 
 <script>
@@ -60,16 +64,18 @@ export default {
 <style lang="scss">
 /* Basic editor styles */
 .tiptap {
-  > * + * {
-    margin-top: 0.75em;
+  :first-child {
+    margin-top: 0;
   }
 
   img {
-    max-width: 100%;
+    display: block;
     height: auto;
+    margin: 1.5rem 0;
+    max-width: 100%;
 
     &.ProseMirror-selectednode {
-      outline: 3px solid #68CEF8;
+      outline: 3px solid var(--purple);
     }
   }
 }
diff --git a/demos/src/Examples/InteractivityComponent/React/Component.jsx b/demos/src/Examples/InteractivityComponent/React/Component.jsx
index d2a2b324a..c9183c91d 100644
--- a/demos/src/Examples/InteractivityComponent/React/Component.jsx
+++ b/demos/src/Examples/InteractivityComponent/React/Component.jsx
@@ -10,7 +10,7 @@ export default props => {
 
   return (
     <NodeViewWrapper className="react-component">
-      <span className="label">React Component</span>
+      <label>React Component</label>
 
       <div className="content">
         <button onClick={increase}>
diff --git a/demos/src/Examples/InteractivityComponent/React/styles.scss b/demos/src/Examples/InteractivityComponent/React/styles.scss
index b41e39c84..c75242461 100644
--- a/demos/src/Examples/InteractivityComponent/React/styles.scss
+++ b/demos/src/Examples/InteractivityComponent/React/styles.scss
@@ -1,33 +1,116 @@
 /* Basic editor styles */
 .tiptap {
-  > * + * {
-    margin-top: 0.75em;
-  }
-}
-
-.react-component {
-  background: #FAF594;
-  border: 3px solid #0D0D0D;
-  border-radius: 0.5rem;
-  margin: 1rem 0;
-  position: relative;
-
-  .label {
-    margin-left: 1rem;
-    background-color: #0D0D0D;
-    font-size: 0.6rem;
-    letter-spacing: 1px;
-    font-weight: bold;
-    text-transform: uppercase;
-    color: #fff;
-    position: absolute;
-    top: 0;
-    padding: 0.25rem 0.75rem;
-    border-radius: 0 0 0.5rem 0.5rem;
-  }
-
-  .content {
-    margin-top: 1.5rem;
-    padding: 1rem;
+  :first-child {
+    margin-top: 0;
+  }
+
+  /* List styles */
+  ul, 
+  ol {
+    padding: 0 1rem;
+    margin: 1.25rem 1rem 1.25rem 0.4rem;
+    
+    li p {
+      margin-top: 0.25em;
+      margin-bottom: 0.25em;
+    }
+  }
+
+  /* Heading styles */
+  h1, 
+  h2, 
+  h3, 
+  h4, 
+  h5, 
+  h6 {
+    line-height: 1.1;
+    margin-top: 2.5rem;
+    text-wrap: pretty;
+  }
+
+  h1, 
+  h2 {
+    margin-top: 3.5rem;
+    margin-bottom: 1.5rem;
+  }
+
+  h1 { 
+    font-size: 1.4rem; 
+  }
+
+  h2 { 
+    font-size: 1.2rem; 
+  }
+
+  h3 { 
+    font-size: 1.1rem; 
+  }
+
+  h4, 
+  h5, 
+  h6 { 
+    font-size: 1rem; 
+  }
+
+  /* Code and preformatted text styles */
+  code {
+    background-color: var(--purple-light);
+    border-radius: 0.4rem;
+    color: var(--black);
+    font-size: 0.85rem;
+    padding: 0.25em 0.3em;
+  }
+
+  pre {
+    background: var(--black);
+    border-radius: 0.5rem;
+    color: var(--white);
+    font-family: 'JetBrainsMono', monospace;
+    margin: 1.5rem 0;
+    padding: 0.75rem 1rem;
+
+    code {
+      background: none;
+      color: inherit;
+      font-size: 0.8rem;
+      padding: 0;
+    }
+  }
+
+  blockquote {
+    border-left: 3px solid var(--gray-3);
+    margin: 1.5rem 0;
+    padding-left: 1rem;
+  }
+
+  hr {
+    border: none;
+    border-top: 1px solid var(--gray-2);
+    margin: 2rem 0;
+  }
+
+  /* React component */
+  .react-component {
+    background-color: var(--purple-light);
+    border: 2px solid var(--purple);
+    border-radius: 0.5rem;
+    margin: 2rem 0;
+    position: relative;
+
+    label {
+      background-color: var(--purple);
+      border-radius: 0 0 0.5rem 0;
+      color: var(--white);
+      font-size: 0.75rem;
+      font-weight: bold;
+      padding: 0.25rem 0.5rem;
+      position: absolute;
+      top: 0;
+    }
+
+    .content {
+      margin-top: 1.5rem;
+      padding: 1rem;
+    }
   }
 }
diff --git a/demos/src/Examples/InteractivityComponent/Vue/Component.vue b/demos/src/Examples/InteractivityComponent/Vue/Component.vue
index 71001477e..90b52296a 100644
--- a/demos/src/Examples/InteractivityComponent/Vue/Component.vue
+++ b/demos/src/Examples/InteractivityComponent/Vue/Component.vue
@@ -1,6 +1,6 @@
 <template>
   <node-view-wrapper class="vue-component">
-    <span class="label">Vue Component</span>
+    <label>Vue Component</label>
 
     <div class="content">
       <button @click="increase">This button has been clicked {{ node.attrs.count }} times.</button>
@@ -29,30 +29,30 @@ export default {
 </script>
 
 <style lang="scss">
-.vue-component {
-  background: #FAF594;
-  border: 3px solid #0D0D0D;
-  border-radius: 0.5rem;
-  margin: 1rem 0;
-  position: relative;
-}
+.tiptap {
+  /* Vue component */
+  .vue-component {
+    background-color: var(--purple-light);
+    border: 2px solid var(--purple);
+    border-radius: 0.5rem;
+    margin: 2rem 0;
+    position: relative;
 
-.label {
-  margin-left: 1rem;
-  background-color: #0D0D0D;
-  font-size: 0.6rem;
-  letter-spacing: 1px;
-  font-weight: bold;
-  text-transform: uppercase;
-  color: #fff;
-  position: absolute;
-  top: 0;
-  padding: 0.25rem 0.75rem;
-  border-radius: 0 0 0.5rem 0.5rem;
-}
+    label {
+      background-color: var(--purple);
+      border-radius: 0 0 0.5rem 0;
+      color: var(--white);
+      font-size: 0.75rem;
+      font-weight: bold;
+      padding: 0.25rem 0.5rem;
+      position: absolute;
+      top: 0;
+    }
 
-.content {
-  margin-top: 1.5rem;
-  padding: 1rem;
+    .content {
+      margin-top: 1.5rem;
+      padding: 1rem;
+    }
+  }
 }
 </style>
diff --git a/demos/src/Examples/InteractivityComponent/Vue/index.vue b/demos/src/Examples/InteractivityComponent/Vue/index.vue
index ffdab6d2f..678305b9d 100644
--- a/demos/src/Examples/InteractivityComponent/Vue/index.vue
+++ b/demos/src/Examples/InteractivityComponent/Vue/index.vue
@@ -46,8 +46,93 @@ export default {
 <style lang="scss">
 /* Basic editor styles */
 .tiptap {
-  > * + * {
-    margin-top: 0.75em;
+  :first-child {
+    margin-top: 0;
+  }
+
+  /* List styles */
+  ul,
+  ol {
+    padding: 0 1rem;
+    margin: 1.25rem 1rem 1.25rem 0.4rem;
+
+    li p {
+      margin-top: 0.25em;
+      margin-bottom: 0.25em;
+    }
+  }
+
+  /* Heading styles */
+  h1,
+  h2,
+  h3,
+  h4,
+  h5,
+  h6 {
+    line-height: 1.1;
+    margin-top: 2.5rem;
+    text-wrap: pretty;
+  }
+
+  h1,
+  h2 {
+    margin-top: 3.5rem;
+    margin-bottom: 1.5rem;
+  }
+
+  h1 {
+    font-size: 1.4rem;
+  }
+
+  h2 {
+    font-size: 1.2rem;
+  }
+
+  h3 {
+    font-size: 1.1rem;
+  }
+
+  h4,
+  h5,
+  h6 {
+    font-size: 1rem;
+  }
+
+  /* Code and preformatted text styles */
+  code {
+    background-color: var(--purple-light);
+    border-radius: 0.4rem;
+    color: var(--black);
+    font-size: 0.85rem;
+    padding: 0.25em 0.3em;
+  }
+
+  pre {
+    background: var(--black);
+    border-radius: 0.5rem;
+    color: var(--white);
+    font-family: 'JetBrainsMono', monospace;
+    margin: 1.5rem 0;
+    padding: 0.75rem 1rem;
+
+    code {
+      background: none;
+      color: inherit;
+      font-size: 0.8rem;
+      padding: 0;
+    }
+  }
+
+  blockquote {
+    border-left: 3px solid var(--gray-3);
+    margin: 1.5rem 0;
+    padding-left: 1rem;
+  }
+
+  hr {
+    border: none;
+    border-top: 1px solid var(--gray-2);
+    margin: 2rem 0;
   }
 }
 </style>
diff --git a/demos/src/Examples/InteractivityComponentContent/React/Component.jsx b/demos/src/Examples/InteractivityComponentContent/React/Component.jsx
index 153a0a188..36fc95eba 100644
--- a/demos/src/Examples/InteractivityComponentContent/React/Component.jsx
+++ b/demos/src/Examples/InteractivityComponentContent/React/Component.jsx
@@ -3,10 +3,10 @@ import React from 'react'
 
 export default () => {
   return (
-    <NodeViewWrapper className="react-component-with-content">
-      <span className="label" contentEditable={false}>React Component</span>
+    <NodeViewWrapper className="react-component">
+      <label contentEditable={false}>React Component</label>
 
-      <NodeViewContent className="content" />
+      <NodeViewContent className="content is-editable" />
     </NodeViewWrapper>
   )
 }
diff --git a/demos/src/Examples/InteractivityComponentContent/React/index.spec.js b/demos/src/Examples/InteractivityComponentContent/React/index.spec.js
index cfa9af7f9..5ba739f56 100644
--- a/demos/src/Examples/InteractivityComponentContent/React/index.spec.js
+++ b/demos/src/Examples/InteractivityComponentContent/React/index.spec.js
@@ -11,12 +11,12 @@ context('/src/Examples/InteractivityComponentContent/React/', () => {
   })
 
   it('should render a custom node', () => {
-    cy.get('.ProseMirror .react-component-with-content')
+    cy.get('.ProseMirror .react-component')
       .should('have.length', 1)
   })
 
   it('should allow text editing inside component', () => {
-    cy.get('.ProseMirror .react-component-with-content .content div')
+    cy.get('.ProseMirror .react-component .content div')
       .invoke('attr', 'contentEditable', true)
       .invoke('text', '')
       .type('Hello World!')
@@ -24,24 +24,24 @@ context('/src/Examples/InteractivityComponentContent/React/', () => {
   })
 
   it('should allow text editing inside component with markdown text', () => {
-    cy.get('.ProseMirror .react-component-with-content .content div')
+    cy.get('.ProseMirror .react-component .content div')
       .invoke('attr', 'contentEditable', true)
       .invoke('text', '')
       .type('Hello World! This is **bold**.')
       .should('have.text', 'Hello World! This is bold.')
 
-    cy.get('.ProseMirror .react-component-with-content .content strong')
+    cy.get('.ProseMirror .react-component .content strong')
       .should('exist')
   })
 
   it('should remove node via selectall', () => {
-    cy.get('.ProseMirror .react-component-with-content')
+    cy.get('.ProseMirror .react-component')
       .should('have.length', 1)
 
     cy.get('.ProseMirror')
       .type('{selectall}{backspace}')
 
-    cy.get('.ProseMirror .react-component-with-content')
+    cy.get('.ProseMirror .react-component')
       .should('have.length', 0)
   })
 })
diff --git a/demos/src/Examples/InteractivityComponentContent/React/styles.scss b/demos/src/Examples/InteractivityComponentContent/React/styles.scss
index 0eb9068d4..db0421b0a 100644
--- a/demos/src/Examples/InteractivityComponentContent/React/styles.scss
+++ b/demos/src/Examples/InteractivityComponentContent/React/styles.scss
@@ -1,36 +1,123 @@
 /* Basic editor styles */
 .tiptap {
-  > * + * {
-    margin-top: 0.75em;
-  }
-}
-
-.react-component-with-content {
-  background: #FAF594;
-  border: 3px solid #0D0D0D;
-  border-radius: 0.5rem;
-  margin: 1rem 0;
-  position: relative;
-
-  .label {
-    margin-left: 1rem;
-    background-color: #0D0D0D;
-    font-size: 0.6rem;
-    letter-spacing: 1px;
-    font-weight: bold;
-    text-transform: uppercase;
-    color: #fff;
-    position: absolute;
-    top: 0;
-    padding: 0.25rem 0.75rem;
-    border-radius: 0 0 0.5rem 0.5rem;
+  :first-child {
+    margin-top: 0;
   }
 
-  .content {
-    margin: 2.5rem 1rem 1rem;
-    padding: 0.5rem;
-    border: 2px dashed #0D0D0D20;
+  /* List styles */
+  ul, 
+  ol {
+    padding: 0 1rem;
+    margin: 1.25rem 1rem 1.25rem 0.4rem;
+    
+    li p {
+      margin-top: 0.25em;
+      margin-bottom: 0.25em;
+    }
+  }
+
+  /* Heading styles */
+  h1, 
+  h2, 
+  h3, 
+  h4, 
+  h5, 
+  h6 {
+    line-height: 1.1;
+    margin-top: 2.5rem;
+    text-wrap: pretty;
+  }
+
+  h1, 
+  h2 {
+    margin-top: 3.5rem;
+    margin-bottom: 1.5rem;
+  }
+
+  h1 { 
+    font-size: 1.4rem; 
+  }
+
+  h2 { 
+    font-size: 1.2rem; 
+  }
+
+  h3 { 
+    font-size: 1.1rem; 
+  }
+
+  h4, 
+  h5, 
+  h6 { 
+    font-size: 1rem; 
+  }
+
+  /* Code and preformatted text styles */
+  code {
+    background-color: var(--purple-light);
+    border-radius: 0.4rem;
+    color: var(--black);
+    font-size: 0.85rem;
+    padding: 0.25em 0.3em;
+  }
+
+  pre {
+    background: var(--black);
     border-radius: 0.5rem;
+    color: var(--white);
+    font-family: 'JetBrainsMono', monospace;
+    margin: 1.5rem 0;
+    padding: 0.75rem 1rem;
+
+    code {
+      background: none;
+      color: inherit;
+      font-size: 0.8rem;
+      padding: 0;
+    }
+  }
+
+  blockquote {
+    border-left: 3px solid var(--gray-3);
+    margin: 1.5rem 0;
+    padding-left: 1rem;
+  }
+
+  hr {
+    border: none;
+    border-top: 1px solid var(--gray-2);
+    margin: 2rem 0;
+  }
+
+  /* React component */
+  .react-component {
+    background-color: var(--purple-light);
+    border: 2px solid var(--purple);
+    border-radius: 0.5rem;
+    margin: 2rem 0;
+    position: relative;
+
+    label {
+      background-color: var(--purple);
+      border-radius: 0 0 0.5rem 0;
+      color: var(--white);
+      font-size: 0.75rem;
+      font-weight: bold;
+      padding: 0.25rem 0.5rem;
+      position: absolute;
+      top: 0;
+    }
+
+    .content {
+      margin-top: 1.5rem;
+      padding: 1rem;
+
+      &.is-editable {
+        border: 2px dashed var(--gray-3);
+        border-radius: 0.5rem;
+        margin: 2.5rem 1rem 1rem;
+        padding: 0.5rem;
+      }
+    }
   }
 }
-
diff --git a/demos/src/Examples/InteractivityComponentContent/Vue/Component.vue b/demos/src/Examples/InteractivityComponentContent/Vue/Component.vue
index 8e29325dd..17ce2da6d 100644
--- a/demos/src/Examples/InteractivityComponentContent/Vue/Component.vue
+++ b/demos/src/Examples/InteractivityComponentContent/Vue/Component.vue
@@ -1,7 +1,7 @@
 <template>
   <node-view-wrapper class="vue-component">
-    <span class="label" contenteditable="false">Vue Component</span>
-    <node-view-content class="content" />
+    <label contenteditable="false">Vue Component</label>
+    <node-view-content class="content is-editable" />
   </node-view-wrapper>
 </template>
 
@@ -19,32 +19,37 @@ export default {
 </script>
 
 <style lang="scss">
-.vue-component {
-  background: #FAF594;
-  border: 3px solid #0D0D0D;
-  border-radius: 0.5rem;
-  margin: 1rem 0;
-  position: relative;
-}
+.tiptap {
+  /* Vue component */
+  .vue-component {
+    background-color: var(--purple-light);
+    border: 2px solid var(--purple);
+    border-radius: 0.5rem;
+    margin: 2rem 0;
+    position: relative;
 
-.label {
-  margin-left: 1rem;
-  background-color: #0D0D0D;
-  font-size: 0.6rem;
-  letter-spacing: 1px;
-  font-weight: bold;
-  text-transform: uppercase;
-  color: #fff;
-  position: absolute;
-  top: 0;
-  padding: 0.25rem 0.75rem;
-  border-radius: 0 0 0.5rem 0.5rem;
-}
+    label {
+      background-color: var(--purple);
+      border-radius: 0 0 0.5rem 0;
+      color: var(--white);
+      font-size: 0.75rem;
+      font-weight: bold;
+      padding: 0.25rem 0.5rem;
+      position: absolute;
+      top: 0;
+    }
 
-.content {
-  margin: 2.5rem 1rem 1rem;
-  padding: 0.5rem;
-  border: 2px dashed #0D0D0D20;
-  border-radius: 0.5rem;
+    .content {
+      margin-top: 1.5rem;
+      padding: 1rem;
+
+      &.is-editable {
+        border: 2px dashed var(--gray-3);
+        border-radius: 0.5rem;
+        margin: 2.5rem 1rem 1rem;
+        padding: 0.5rem;
+      }
+    }
+  }
 }
 </style>
diff --git a/demos/src/Examples/InteractivityComponentContent/Vue/index.vue b/demos/src/Examples/InteractivityComponentContent/Vue/index.vue
index 57a175c4a..b52539edd 100644
--- a/demos/src/Examples/InteractivityComponentContent/Vue/index.vue
+++ b/demos/src/Examples/InteractivityComponentContent/Vue/index.vue
@@ -48,8 +48,93 @@ export default {
 <style lang="scss">
 /* Basic editor styles */
 .tiptap {
-  > * + * {
-    margin-top: 0.75em;
+  :first-child {
+    margin-top: 0;
+  }
+
+  /* List styles */
+  ul,
+  ol {
+    padding: 0 1rem;
+    margin: 1.25rem 1rem 1.25rem 0.4rem;
+
+    li p {
+      margin-top: 0.25em;
+      margin-bottom: 0.25em;
+    }
+  }
+
+  /* Heading styles */
+  h1,
+  h2,
+  h3,
+  h4,
+  h5,
+  h6 {
+    line-height: 1.1;
+    margin-top: 2.5rem;
+    text-wrap: pretty;
+  }
+
+  h1,
+  h2 {
+    margin-top: 3.5rem;
+    margin-bottom: 1.5rem;
+  }
+
+  h1 {
+    font-size: 1.4rem;
+  }
+
+  h2 {
+    font-size: 1.2rem;
+  }
+
+  h3 {
+    font-size: 1.1rem;
+  }
+
+  h4,
+  h5,
+  h6 {
+    font-size: 1rem;
+  }
+
+  /* Code and preformatted text styles */
+  code {
+    background-color: var(--purple-light);
+    border-radius: 0.4rem;
+    color: var(--black);
+    font-size: 0.85rem;
+    padding: 0.25em 0.3em;
+  }
+
+  pre {
+    background: var(--black);
+    border-radius: 0.5rem;
+    color: var(--white);
+    font-family: 'JetBrainsMono', monospace;
+    margin: 1.5rem 0;
+    padding: 0.75rem 1rem;
+
+    code {
+      background: none;
+      color: inherit;
+      font-size: 0.8rem;
+      padding: 0;
+    }
+  }
+
+  blockquote {
+    border-left: 3px solid var(--gray-3);
+    margin: 1.5rem 0;
+    padding-left: 1rem;
+  }
+
+  hr {
+    border: none;
+    border-top: 1px solid var(--gray-2);
+    margin: 2rem 0;
   }
 }
 </style>
diff --git a/demos/src/Examples/MarkdownShortcuts/React/index.jsx b/demos/src/Examples/MarkdownShortcuts/React/index.jsx
index 690b00d3c..976e847f1 100644
--- a/demos/src/Examples/MarkdownShortcuts/React/index.jsx
+++ b/demos/src/Examples/MarkdownShortcuts/React/index.jsx
@@ -21,7 +21,7 @@ export default () => {
       To test that, start a new line and type <code>#</code> followed by a space to get a heading. Try <code>#</code>, <code>##</code>, <code>###</code>, <code>####</code>, <code>#####</code>, <code>######</code> for different levels.
     </p>
     <p>
-      Those conventions are called input rules in tiptap. Some of them are enabled by default. Try <code>></code> for blockquotes, <code>*</code>, <code>-</code> or <code>+</code> for bullet lists, or <code>\`foobar\`</code> to highlight code, <code>~~tildes~~</code> to strike text, or <code>==equal signs==</code> to highlight text.
+      Those conventions are called input rules in Tiptap. Some of them are enabled by default. Try <code>></code> for blockquotes, <code>*</code>, <code>-</code> or <code>+</code> for bullet lists, or <code>\`foobar\`</code> to highlight code, <code>~~tildes~~</code> to strike text, or <code>==equal signs==</code> to highlight text.
     </p>
     <p>
       You can overwrite existing input rules or add your own to nodes, marks and extensions.
diff --git a/demos/src/Examples/MarkdownShortcuts/React/styles.scss b/demos/src/Examples/MarkdownShortcuts/React/styles.scss
index 6932a405b..d23c43fc9 100644
--- a/demos/src/Examples/MarkdownShortcuts/React/styles.scss
+++ b/demos/src/Examples/MarkdownShortcuts/React/styles.scss
@@ -1,53 +1,98 @@
+/* Basic editor styles */
 .tiptap {
-  > * + * {
-    margin-top: 0.75em;
+  :first-child {
+    margin-top: 0;
   }
 
-  ul,
+  /* List styles */
+  ul, 
   ol {
     padding: 0 1rem;
-  }
-
-  h1,
-  h2,
-  h3,
-  h4,
-  h5,
-  h6 {
-    line-height: 1.1;
-  }
-
-  code {
-    background-color: rgba(#616161, 0.1);
-    color: #616161;
-  }
-
-  pre {
-    background: #0D0D0D;
-    color: #FFF;
-    font-family: 'JetBrainsMono', monospace;
-    padding: 0.75rem 1rem;
-    border-radius: 0.5rem;
-
-    code {
-      color: inherit;
-      padding: 0;
-      background: none;
-      font-size: 0.8rem;
+    margin: 1.25rem 1rem 1.25rem 0.4rem;
+    
+    li p {
+      margin-top: 0.25em;
+      margin-bottom: 0.25em;
     }
   }
 
-  img {
-    max-width: 100%;
-    height: auto;
+  /* Heading styles */
+  h1, 
+  h2, 
+  h3, 
+  h4, 
+  h5, 
+  h6 {
+    line-height: 1.1;
+    margin-top: 2.5rem;
+    text-wrap: pretty;
   }
 
-  hr {
-    margin: 1rem 0;
+  h1, 
+  h2 {
+    margin-top: 3.5rem;
+    margin-bottom: 1.5rem;
+  }
+
+  h1 { 
+    font-size: 1.4rem; 
+  }
+
+  h2 { 
+    font-size: 1.2rem; 
+  }
+
+  h3 { 
+    font-size: 1.1rem; 
+  }
+
+  h4, 
+  h5, 
+  h6 { 
+    font-size: 1rem; 
+  }
+
+  /* Code and preformatted text styles */
+  code {
+    background-color: var(--purple-light);
+    border-radius: 0.4rem;
+    color: var(--black);
+    font-size: 0.85rem;
+    padding: 0.25em 0.3em;
+  }
+
+  pre {
+    background: var(--black);
+    border-radius: 0.5rem;
+    color: var(--white);
+    font-family: 'JetBrainsMono', monospace;
+    margin: 1.5rem 0;
+    padding: 0.75rem 1rem;
+
+    code {
+      background: none;
+      color: inherit;
+      font-size: 0.8rem;
+      padding: 0;
+    }
+  }
+
+  mark {
+    background-color: #FAF594;
+    border-radius: 0.4rem;
+    box-decoration-break: clone;
+    padding: 0.1rem 0.3rem;
   }
 
   blockquote {
+    border-left: 3px solid var(--gray-3);
+    margin: 1.5rem 0;
     padding-left: 1rem;
-    border-left: 2px solid rgba(#0D0D0D, 0.1);
+  }
+
+  hr {
+    border: none;
+    border-top: 1px solid var(--gray-2);
+    margin: 2rem 0;
   }
 }
diff --git a/demos/src/Examples/MarkdownShortcuts/Vue/index.vue b/demos/src/Examples/MarkdownShortcuts/Vue/index.vue
index c2705ac76..034550d4a 100644
--- a/demos/src/Examples/MarkdownShortcuts/Vue/index.vue
+++ b/demos/src/Examples/MarkdownShortcuts/Vue/index.vue
@@ -34,7 +34,7 @@ export default {
           To test that, start a new line and type <code>#</code> followed by a space to get a heading. Try <code>#</code>, <code>##</code>, <code>###</code>, <code>####</code>, <code>#####</code>, <code>######</code> for different levels.
         </p>
         <p>
-          Those conventions are called input rules in tiptap. Some of them are enabled by default. Try <code>></code> for blockquotes, <code>*</code>, <code>-</code> or <code>+</code> for bullet lists, or <code>\`foobar\`</code> to highlight code, <code>~~tildes~~</code> to strike text, or <code>==equal signs==</code> to highlight text.
+          Those conventions are called input rules in Tiptap. Some of them are enabled by default. Try <code>></code> for blockquotes, <code>*</code>, <code>-</code> or <code>+</code> for bullet lists, or <code>\`foobar\`</code> to highlight code, <code>~~tildes~~</code> to strike text, or <code>==equal signs==</code> to highlight text.
         </p>
         <p>
           You can overwrite existing input rules or add your own to nodes, marks and extensions.
@@ -55,15 +55,23 @@ export default {
 <style lang="scss">
 /* Basic editor styles */
 .tiptap {
-  > * + * {
-    margin-top: 0.75em;
+  :first-child {
+    margin-top: 0;
   }
 
+  /* List styles */
   ul,
   ol {
     padding: 0 1rem;
+    margin: 1.25rem 1rem 1.25rem 0.4rem;
+
+    li p {
+      margin-top: 0.25em;
+      margin-bottom: 0.25em;
+    }
   }
 
+  /* Heading styles */
   h1,
   h2,
   h3,
@@ -71,40 +79,76 @@ export default {
   h5,
   h6 {
     line-height: 1.1;
+    margin-top: 2.5rem;
+    text-wrap: pretty;
   }
 
+  h1,
+  h2 {
+    margin-top: 3.5rem;
+    margin-bottom: 1.5rem;
+  }
+
+  h1 {
+    font-size: 1.4rem;
+  }
+
+  h2 {
+    font-size: 1.2rem;
+  }
+
+  h3 {
+    font-size: 1.1rem;
+  }
+
+  h4,
+  h5,
+  h6 {
+    font-size: 1rem;
+  }
+
+  /* Code and preformatted text styles */
   code {
-    background-color: rgba(#616161, 0.1);
-    color: #616161;
+    background-color: var(--purple-light);
+    border-radius: 0.4rem;
+    color: var(--black);
+    font-size: 0.85rem;
+    padding: 0.25em 0.3em;
   }
 
   pre {
-    background: #0D0D0D;
-    color: #FFF;
-    font-family: 'JetBrainsMono', monospace;
-    padding: 0.75rem 1rem;
+    background: var(--black);
     border-radius: 0.5rem;
+    color: var(--white);
+    font-family: 'JetBrainsMono', monospace;
+    margin: 1.5rem 0;
+    padding: 0.75rem 1rem;
 
     code {
-      color: inherit;
-      padding: 0;
       background: none;
+      color: inherit;
       font-size: 0.8rem;
+      padding: 0;
     }
   }
 
-  img {
-    max-width: 100%;
-    height: auto;
-  }
-
-  hr {
-    margin: 1rem 0;
+  mark {
+    background-color: #FAF594;
+    border-radius: 0.4rem;
+    box-decoration-break: clone;
+    padding: 0.1rem 0.3rem;
   }
 
   blockquote {
+    border-left: 3px solid var(--gray-3);
+    margin: 1.5rem 0;
     padding-left: 1rem;
-    border-left: 2px solid rgba(#0D0D0D, 0.1);
+  }
+
+  hr {
+    border: none;
+    border-top: 1px solid var(--gray-2);
+    margin: 2rem 0;
   }
 }
 </style>
diff --git a/demos/src/Examples/Menus/React/index.jsx b/demos/src/Examples/Menus/React/index.jsx
index c6a86209b..b05c7e1f7 100644
--- a/demos/src/Examples/Menus/React/index.jsx
+++ b/demos/src/Examples/Menus/React/index.jsx
@@ -64,7 +64,7 @@ export default () => {
           onClick={() => editor.chain().focus().toggleBulletList().run()}
           className={editor.isActive('bulletList') ? 'is-active' : ''}
         >
-          Bullet List
+          Bullet list
         </button>
       </FloatingMenu>}
 
diff --git a/demos/src/Examples/Menus/React/styles.scss b/demos/src/Examples/Menus/React/styles.scss
index d9820d58d..cf6f3bc01 100644
--- a/demos/src/Examples/Menus/React/styles.scss
+++ b/demos/src/Examples/Menus/React/styles.scss
@@ -1,53 +1,144 @@
+/* Basic editor styles */
 .tiptap {
-  > * + * {
-    margin-top: 0.75em;
+  :first-child {
+    margin-top: 0;
   }
 
-  ul,
+  /* List styles */
+  ul, 
   ol {
     padding: 0 1rem;
+    margin: 1.25rem 1rem 1.25rem 0.4rem;
+    
+    li p {
+      margin-top: 0.25em;
+      margin-bottom: 0.25em;
+    }
+  }
+
+  /* Heading styles */
+  h1, 
+  h2, 
+  h3, 
+  h4, 
+  h5, 
+  h6 {
+    line-height: 1.1;
+    margin-top: 2.5rem;
+    text-wrap: pretty;
+  }
+
+  h1, 
+  h2 {
+    margin-top: 3.5rem;
+    margin-bottom: 1.5rem;
+  }
+
+  h1 { 
+    font-size: 1.4rem; 
+  }
+
+  h2 { 
+    font-size: 1.2rem; 
+  }
+
+  h3 { 
+    font-size: 1.1rem; 
+  }
+
+  h4, 
+  h5, 
+  h6 { 
+    font-size: 1rem; 
+  }
+
+  /* Code and preformatted text styles */
+  code {
+    background-color: var(--purple-light);
+    border-radius: 0.4rem;
+    color: var(--black);
+    font-size: 0.85rem;
+    padding: 0.25em 0.3em;
+  }
+
+  pre {
+    background: var(--black);
+    border-radius: 0.5rem;
+    color: var(--white);
+    font-family: 'JetBrainsMono', monospace;
+    margin: 1.5rem 0;
+    padding: 0.75rem 1rem;
+
+    code {
+      background: none;
+      color: inherit;
+      font-size: 0.8rem;
+      padding: 0;
+    }
+  }
+
+  blockquote {
+    border-left: 3px solid var(--gray-3);
+    margin: 1.5rem 0;
+    padding-left: 1rem;
+  }
+
+  hr {
+    border: none;
+    border-top: 1px solid var(--gray-2);
+    margin: 2rem 0;
   }
 }
 
+/* Bubble menu */
 .bubble-menu {
+  background-color: var(--white);
+  border: 1px solid var(--gray-1);
+  border-radius: 0.7rem;
+  box-shadow: var(--shadow);
   display: flex;
-  background-color: #0D0D0D;
   padding: 0.2rem;
-  border-radius: 0.5rem;
 
   button {
-    border: none;
-    background: none;
-    color: #FFF;
-    font-size: 0.85rem;
-    font-weight: 500;
-    padding: 0 0.2rem;
-    opacity: 0.6;
+    background-color: unset;
+
+    &:hover {
+      background-color: var(--gray-3);
+    }
 
-    &:hover,
     &.is-active {
-      opacity: 1;
+      background-color: var(--purple);
+
+      &:hover {
+        background-color: var(--purple-contrast);
+      }
     }
   }
 }
 
+/* Floating menu */
 .floating-menu {
   display: flex;
-  background-color: #0D0D0D10;
-  padding: 0.2rem;
+  background-color: var(--gray-3);
+  padding: 0.1rem;
   border-radius: 0.5rem;
 
   button {
-    border: none;
-    background: none;
-    font-size: 0.85rem;
-    font-weight: 500;
-    padding: 0 0.2rem;
-    opacity: 0.6;
+    background-color: unset;
+    padding: 0.275rem 0.425rem;
+    border-radius: 0.3rem;
+
+    &:hover {
+      background-color: var(--gray-3);
+    }
 
-    &:hover,
     &.is-active {
-      opacity: 1;
+      background-color: var(--white);
+      color: var(--purple);
+
+      &:hover {
+        color: var(--purple-contrast);
+      }
     }
   }
 }
diff --git a/demos/src/Examples/Menus/Vue/index.vue b/demos/src/Examples/Menus/Vue/index.vue
index b52941c32..4f4cf9f78 100644
--- a/demos/src/Examples/Menus/Vue/index.vue
+++ b/demos/src/Examples/Menus/Vue/index.vue
@@ -28,7 +28,7 @@
         H2
       </button>
       <button @click="editor.chain().focus().toggleBulletList().run()" :class="{ 'is-active': editor.isActive('bulletList') }">
-        Bullet List
+        Bullet list
       </button>
     </floating-menu>
   </div>
@@ -83,60 +83,145 @@ export default {
 <style lang="scss">
 /* Basic editor styles */
 .tiptap {
-  > * + * {
-    margin-top: 0.75em;
+  :first-child {
+    margin-top: 0;
   }
 
+  /* List styles */
   ul,
   ol {
     padding: 0 1rem;
+    margin: 1.25rem 1rem 1.25rem 0.4rem;
+
+    li p {
+      margin-top: 0.25em;
+      margin-bottom: 0.25em;
+    }
+  }
+
+  /* Heading styles */
+  h1,
+  h2,
+  h3,
+  h4,
+  h5,
+  h6 {
+    line-height: 1.1;
+    margin-top: 2.5rem;
+    text-wrap: pretty;
+  }
+
+  h1,
+  h2 {
+    margin-top: 3.5rem;
+    margin-bottom: 1.5rem;
+  }
+
+  h1 {
+    font-size: 1.4rem;
+  }
+
+  h2 {
+    font-size: 1.2rem;
+  }
+
+  h3 {
+    font-size: 1.1rem;
+  }
+
+  h4,
+  h5,
+  h6 {
+    font-size: 1rem;
+  }
+
+  /* Code and preformatted text styles */
+  code {
+    background-color: var(--purple-light);
+    border-radius: 0.4rem;
+    color: var(--black);
+    font-size: 0.85rem;
+    padding: 0.25em 0.3em;
+  }
+
+  pre {
+    background: var(--black);
+    border-radius: 0.5rem;
+    color: var(--white);
+    font-family: 'JetBrainsMono', monospace;
+    margin: 1.5rem 0;
+    padding: 0.75rem 1rem;
+
+    code {
+      background: none;
+      color: inherit;
+      font-size: 0.8rem;
+      padding: 0;
+    }
   }
 
   blockquote {
+    border-left: 3px solid var(--gray-3);
+    margin: 1.5rem 0;
     padding-left: 1rem;
-    border-left: 2px solid rgba(#0D0D0D, 0.1);
+  }
+
+  hr {
+    border: none;
+    border-top: 1px solid var(--gray-2);
+    margin: 2rem 0;
   }
 }
 
+/* Bubble menu */
 .bubble-menu {
+  background-color: var(--white);
+  border: 1px solid var(--gray-1);
+  border-radius: 0.7rem;
+  box-shadow: var(--shadow);
   display: flex;
-  background-color: #0D0D0D;
   padding: 0.2rem;
-  border-radius: 0.5rem;
 
   button {
-    border: none;
-    background: none;
-    color: #FFF;
-    font-size: 0.85rem;
-    font-weight: 500;
-    padding: 0 0.2rem;
-    opacity: 0.6;
+    background-color: unset;
+
+    &:hover {
+      background-color: var(--gray-3);
+    }
 
-    &:hover,
     &.is-active {
-      opacity: 1;
+      background-color: var(--purple);
+
+      &:hover {
+        background-color: var(--purple-contrast);
+      }
     }
   }
 }
 
+/* Floating menu */
 .floating-menu {
   display: flex;
-  background-color: #0D0D0D10;
-  padding: 0.2rem;
+  background-color: var(--gray-3);
+  padding: 0.1rem;
   border-radius: 0.5rem;
 
   button {
-    border: none;
-    background: none;
-    font-size: 0.85rem;
-    font-weight: 500;
-    padding: 0 0.2rem;
-    opacity: 0.6;
+    background-color: unset;
+    padding: 0.275rem 0.425rem;
+    border-radius: 0.3rem;
+
+    &:hover {
+      background-color: var(--gray-3);
+    }
 
-    &:hover,
     &.is-active {
-      opacity: 1;
+      background-color: var(--white);
+      color: var(--purple);
+
+      &:hover {
+        color: var(--purple-contrast);
+      }
     }
   }
 }
diff --git a/demos/src/Examples/Minimal/React/index.jsx b/demos/src/Examples/Minimal/React/index.jsx
index 56c1fd93d..853a4e141 100644
--- a/demos/src/Examples/Minimal/React/index.jsx
+++ b/demos/src/Examples/Minimal/React/index.jsx
@@ -15,7 +15,7 @@ export default () => {
     ],
     content: `
       <p>
-        This is a radically reduced version of tiptap. It has support for a document, with paragraphs and text. That’s it. It’s probably too much for real minimalists though.
+        This is a radically reduced version of Tiptap. It has support for a document, with paragraphs and text. That’s it. It’s probably too much for real minimalists though.
       </p>
       <p>
         The paragraph extension is not really required, but you need at least one node. Sure, that node can be something different.
diff --git a/demos/src/Examples/Minimal/React/styles.scss b/demos/src/Examples/Minimal/React/styles.scss
index 5e207df49..afd5ba214 100644
--- a/demos/src/Examples/Minimal/React/styles.scss
+++ b/demos/src/Examples/Minimal/React/styles.scss
@@ -1,6 +1,6 @@
 /* Basic editor styles */
 .tiptap {
-  > * + * {
-    margin-top: 0.75em;
+  :first-child {
+    margin-top: 0;
   }
 }
diff --git a/demos/src/Examples/Minimal/Vue/index.vue b/demos/src/Examples/Minimal/Vue/index.vue
index 93b66ae2b..8bce3b696 100644
--- a/demos/src/Examples/Minimal/Vue/index.vue
+++ b/demos/src/Examples/Minimal/Vue/index.vue
@@ -28,7 +28,7 @@ export default {
       ],
       content: `
         <p>
-          This is a radically reduced version of tiptap. It has support for a document, with paragraphs and text. That’s it. It’s probably too much for real minimalists though.
+          This is a radically reduced version of Tiptap. It has support for a document, with paragraphs and text. That’s it. It’s probably too much for real minimalists though.
         </p>
         <p>
           The paragraph extension is not really required, but you need at least one node. Sure, that node can be something different.
@@ -46,8 +46,8 @@ export default {
 <style lang="scss">
 /* Basic editor styles */
 .tiptap {
-  > * + * {
-    margin-top: 0.75em;
+  :first-child {
+    margin-top: 0;
   }
 }
 </style>
diff --git a/demos/src/Examples/NodePos/React/index.jsx b/demos/src/Examples/NodePos/React/index.jsx
index cc07c19bd..358f9eae0 100644
--- a/demos/src/Examples/NodePos/React/index.jsx
+++ b/demos/src/Examples/NodePos/React/index.jsx
@@ -18,7 +18,7 @@ export default () => {
       <p>
         This is a <strong>simple</strong> paragraph.
       </p>
-      <img src="https://unsplash.it/200/200" alt="A 200x200 square thumbnail from unsplash." />
+      <img src="https://placehold.co/200x200" alt="A 200x200 square thumbnail from placehold.co." />
       <p>
         Here is another paragraph inside this document.
       </p>
@@ -72,11 +72,11 @@ export default () => {
       <blockquote>
         <p>Here we have another paragraph inside a blockquote.</p>
         <blockquote>
-          <img src="https://unsplash.it/260/200" alt="A 260x200 landscape thumbnail from unsplash." />
-          <img src="https://unsplash.it/100/200" alt="A 100x200 portrait thumbnail from unsplash." />
+          <img src="https://placehold.co/260x200" alt="A 260x200 landscape thumbnail from placehold.co." />
+          <img src="https://placehold.co/100x200" alt="A 100x200 portrait thumbnail from placehold.co." />
         </blockquote>
       </blockquote>
-      <img src="https://unsplash.it/260/200" alt="A 260x200 landscape thumbnail from unsplash." />
+      <img src="https://placehold.co/260x200" alt="A 260x200 landscape thumbnail from placehold.co." />
     `,
   })
 
@@ -160,7 +160,7 @@ export default () => {
   }, [editor])
 
   const findSquaredImage = useCallback(() => {
-    const nodePosition = editor.$doc.querySelector('image', { src: 'https://unsplash.it/200/200' })
+    const nodePosition = editor.$doc.querySelector('image', { src: 'https://placehold.co/200x200' })
 
     if (!nodePosition) {
       setFoundNodes(null)
@@ -171,7 +171,7 @@ export default () => {
   }, [editor])
 
   const findLandscapeImage = useCallback(() => {
-    const nodePosition = editor.$doc.querySelector('image', { src: 'https://unsplash.it/260/200' })
+    const nodePosition = editor.$doc.querySelector('image', { src: 'https://placehold.co/260x200' })
 
     if (!nodePosition) {
       setFoundNodes(null)
@@ -182,7 +182,7 @@ export default () => {
   }, [editor])
 
   const findAllLandscapeImages = useCallback(() => {
-    const nodePosition = editor.$doc.querySelectorAll('image', { src: 'https://unsplash.it/260/200' })
+    const nodePosition = editor.$doc.querySelectorAll('image', { src: 'https://placehold.co/260x200' })
 
     if (!nodePosition) {
       setFoundNodes(null)
@@ -193,7 +193,7 @@ export default () => {
   }, [editor])
 
   const findFirstLandscapeImageWithAllQuery = useCallback(() => {
-    const nodePosition = editor.$doc.querySelectorAll('image', { src: 'https://unsplash.it/260/200' }, true)
+    const nodePosition = editor.$doc.querySelectorAll('image', { src: 'https://placehold.co/260x200' }, true)
 
     if (!nodePosition) {
       setFoundNodes(null)
@@ -204,7 +204,7 @@ export default () => {
   }, [editor])
 
   const findPortraitImageInBlockquote = useCallback(() => {
-    const nodePosition = editor.$doc.querySelector('image', { src: 'https://unsplash.it/100/200' })
+    const nodePosition = editor.$doc.querySelector('image', { src: 'https://placehold.co/100x200' })
 
     if (!nodePosition) {
       setFoundNodes(null)
@@ -259,33 +259,35 @@ export default () => {
   }, [editor])
 
   return (
-    <div>
-      <div>
-        <button data-testid="find-paragraphs" onClick={findParagraphs}>Find paragraphs</button>
-        <button data-testid="find-listitems" onClick={findListItems}>Find list items</button>
-        <button data-testid="find-bulletlists" onClick={findBulletList}>Find bullet lists</button>
-        <button data-testid="find-orderedlists" onClick={findOrderedList}>Find ordered lists</button>
-        <button data-testid="find-blockquotes" onClick={findBlockquote}>Find blockquotes</button>
-        <button data-testid="find-images" onClick={findImages}>Find images</button>
-      </div>
-      <div>
-        <button data-testid="find-first-blockquote" onClick={findFirstBlockquote}>Find first blockquote</button>
-        <button data-testid="find-squared-image" onClick={findSquaredImage}>Find squared image</button>
-        <button data-testid="find-landscape-image" onClick={findLandscapeImage}>Find landscape image</button>
-        <button data-testid="find-all-landscape-images" onClick={findAllLandscapeImages}>Find all landscape images</button>
-        <button data-testid="find-first-landscape-image-with-all-query" onClick={findFirstLandscapeImageWithAllQuery}>Find first landscape image with all query</button>
-        <button data-testid="find-portrait-image-inside-blockquote" onClick={findPortraitImageInBlockquote}>Find portrait image in blockquote</button>
-      </div>
-      <div>
-        <button data-testid="find-first-node" onClick={findFirstNode}>Find first node</button>
-        <button data-testid="find-last-node" onClick={findLastNode}>Find last node</button>
-        <button data-testid="find-last-node-of-first-bullet-list" onClick={findLastNodeOfFirstBulletList}>Find last node of first bullet list</button>
-        <button data-testid="find-nonexistent-node" onClick={findNonexistentNode}>Find nonexistent node</button>
+    <>
+      <div className="control-group">
+        <div className="button-group">
+          <button data-testid="find-paragraphs" onClick={findParagraphs}>Find paragraphs</button>
+          <button data-testid="find-listitems" onClick={findListItems}>Find list items</button>
+          <button data-testid="find-bulletlists" onClick={findBulletList}>Find bullet lists</button>
+          <button data-testid="find-orderedlists" onClick={findOrderedList}>Find ordered lists</button>
+          <button data-testid="find-blockquotes" onClick={findBlockquote}>Find blockquotes</button>
+          <button data-testid="find-images" onClick={findImages}>Find images</button>
+        </div>
+        <div className="button-group">
+          <button data-testid="find-first-blockquote" onClick={findFirstBlockquote}>Find first blockquote</button>
+          <button data-testid="find-squared-image" onClick={findSquaredImage}>Find squared image</button>
+          <button data-testid="find-landscape-image" onClick={findLandscapeImage}>Find landscape image</button>
+          <button data-testid="find-all-landscape-images" onClick={findAllLandscapeImages}>Find all landscape images</button>
+          <button data-testid="find-first-landscape-image-with-all-query" onClick={findFirstLandscapeImageWithAllQuery}>Find first landscape image with all query</button>
+          <button data-testid="find-portrait-image-inside-blockquote" onClick={findPortraitImageInBlockquote}>Find portrait image in blockquote</button>
+        </div>
+        <div className="button-group">
+          <button data-testid="find-first-node" onClick={findFirstNode}>Find first node</button>
+          <button data-testid="find-last-node" onClick={findLastNode}>Find last node</button>
+          <button data-testid="find-last-node-of-first-bullet-list" onClick={findLastNodeOfFirstBulletList}>Find last node of first bullet list</button>
+          <button data-testid="find-nonexistent-node" onClick={findNonexistentNode}>Find nonexistent node</button>
+        </div>
       </div>
       <EditorContent editor={editor} />
-      {foundNodes ? <div data-testid="found-nodes">{foundNodes.map(n => (
+      {foundNodes ? <div className="output-group" data-testid="found-nodes">{foundNodes.map(n => (
         <div data-testid="found-node" key={n.pos}>{mapNodePosToString(n)}</div>
       ))}</div> : ''}
-    </div>
+    </>
   )
 }
diff --git a/demos/src/Examples/NodePos/React/index.spec.js b/demos/src/Examples/NodePos/React/index.spec.js
index a527329db..00259b52b 100644
--- a/demos/src/Examples/NodePos/React/index.spec.js
+++ b/demos/src/Examples/NodePos/React/index.spec.js
@@ -66,7 +66,7 @@ context('/src/Examples/NodePos/React/', () => {
         cy.get('button[data-testid="find-squared-image"]').click()
         cy.get('div[data-testid="found-nodes"]').should('exist')
         cy.get('div[data-testid="found-node"]').should('have.length', 1)
-        cy.get('div[data-testid="found-node"]').should('contain', 'https://unsplash.it/200/200')
+        cy.get('div[data-testid="found-node"]').should('contain', 'https://placehold.co/200x200')
       })
     })
 
@@ -75,7 +75,7 @@ context('/src/Examples/NodePos/React/', () => {
         cy.get('button[data-testid="find-landscape-image"]').click()
         cy.get('div[data-testid="found-nodes"]').should('exist')
         cy.get('div[data-testid="found-node"]').should('have.length', 1)
-        cy.get('div[data-testid="found-node"]').should('contain', 'https://unsplash.it/260/200')
+        cy.get('div[data-testid="found-node"]').should('contain', 'https://placehold.co/260x200')
       })
     })
 
@@ -84,8 +84,8 @@ context('/src/Examples/NodePos/React/', () => {
         cy.get('button[data-testid="find-all-landscape-images"]').click()
         cy.get('div[data-testid="found-nodes"]').should('exist')
         cy.get('div[data-testid="found-node"]').should('have.length', 2)
-        cy.get('div[data-testid="found-node"]').eq(0).should('contain', 'https://unsplash.it/260/200')
-        cy.get('div[data-testid="found-node"]').eq(1).should('contain', 'https://unsplash.it/260/200')
+        cy.get('div[data-testid="found-node"]').eq(0).should('contain', 'https://placehold.co/260x200')
+        cy.get('div[data-testid="found-node"]').eq(1).should('contain', 'https://placehold.co/260x200')
       })
     })
 
@@ -94,7 +94,7 @@ context('/src/Examples/NodePos/React/', () => {
         cy.get('button[data-testid="find-first-landscape-image-with-all-query"]').click()
         cy.get('div[data-testid="found-nodes"]').should('exist')
         cy.get('div[data-testid="found-node"]').should('have.length', 1)
-        cy.get('div[data-testid="found-node"]').should('contain', 'https://unsplash.it/260/200')
+        cy.get('div[data-testid="found-node"]').should('contain', 'https://placehold.co/260x200')
       })
     })
 
@@ -103,7 +103,7 @@ context('/src/Examples/NodePos/React/', () => {
         cy.get('button[data-testid="find-portrait-image-inside-blockquote"]').click()
         cy.get('div[data-testid="found-nodes"]').should('exist')
         cy.get('div[data-testid="found-node"]').should('have.length', 1)
-        cy.get('div[data-testid="found-node"]').should('contain', 'https://unsplash.it/100/200')
+        cy.get('div[data-testid="found-node"]').should('contain', 'https://placehold.co/100x200')
       })
     })
   })
diff --git a/demos/src/Examples/NodePos/React/styles.scss b/demos/src/Examples/NodePos/React/styles.scss
index 25ff7049e..86256765c 100644
--- a/demos/src/Examples/NodePos/React/styles.scss
+++ b/demos/src/Examples/NodePos/React/styles.scss
@@ -1,15 +1,103 @@
 /* Basic editor styles */
 .tiptap {
-  > * + * {
-    margin-top: 0.75em;
+  :first-child {
+    margin-top: 0;
   }
 
-  h1,
-  h2,
-  h3,
-  h4,
-  h5,
+  /* List styles */
+  ul, 
+  ol {
+    padding: 0 1rem;
+    margin: 1.25rem 1rem 1.25rem 0.4rem;
+    
+    li p {
+      margin-top: 0.25em;
+      margin-bottom: 0.25em;
+    }
+  }
+
+  /* Heading styles */
+  h1, 
+  h2, 
+  h3, 
+  h4, 
+  h5, 
   h6 {
     line-height: 1.1;
+    margin-top: 2.5rem;
+    text-wrap: pretty;
+  }
+
+  h1, 
+  h2 {
+    margin-top: 3.5rem;
+    margin-bottom: 1.5rem;
+  }
+
+  h1 { 
+    font-size: 1.4rem; 
+  }
+
+  h2 { 
+    font-size: 1.2rem; 
+  }
+
+  h3 { 
+    font-size: 1.1rem; 
+  }
+
+  h4, 
+  h5, 
+  h6 { 
+    font-size: 1rem; 
+  }
+
+  /* Code and preformatted text styles */
+  code {
+    background-color: var(--purple-light);
+    border-radius: 0.4rem;
+    color: var(--black);
+    font-size: 0.85rem;
+    padding: 0.25em 0.3em;
+  }
+
+  pre {
+    background: var(--black);
+    border-radius: 0.5rem;
+    color: var(--white);
+    font-family: 'JetBrainsMono', monospace;
+    margin: 1.5rem 0;
+    padding: 0.75rem 1rem;
+
+    code {
+      background: none;
+      color: inherit;
+      font-size: 0.8rem;
+      padding: 0;
+    }
+  }
+
+  blockquote {
+    border-left: 3px solid var(--gray-3);
+    margin: 1.5rem 0;
+    padding-left: 1rem;
+  }
+
+  hr {
+    border: none;
+    border-top: 1px solid var(--gray-2);
+    margin: 2rem 0;
+  }
+
+  /* Image styles */
+  img {
+    display: block;
+    height: auto;
+    margin: 1.5rem 0;
+    max-width: 100%;
+
+    &.ProseMirror-selectednode {
+      outline: 3px solid var(--purple);
+    }
   }
 }
diff --git a/demos/src/Examples/Savvy/React/index.jsx b/demos/src/Examples/Savvy/React/index.jsx
index 775b1feb8..91674135f 100644
--- a/demos/src/Examples/Savvy/React/index.jsx
+++ b/demos/src/Examples/Savvy/React/index.jsx
@@ -24,7 +24,7 @@ export default () => {
     ],
     content: `
       <p>
-        → With the Typography extension, tiptap understands »what you mean« and adds correct characters to your text — it’s like a “typography nerd” on your side.
+        → With the Typography extension, Tiptap understands »what you mean« and adds correct characters to your text — it’s like a “typography nerd” on your side.
       </p>
       <p>
         Try it out and type <code>(c)</code>, <code>-></code>, <code>>></code>, <code>1/2</code>, <code>!=</code>, <code>--</code> or <code>1x1</code> here:
diff --git a/demos/src/Examples/Savvy/React/styles.scss b/demos/src/Examples/Savvy/React/styles.scss
index 377369437..feee91627 100644
--- a/demos/src/Examples/Savvy/React/styles.scss
+++ b/demos/src/Examples/Savvy/React/styles.scss
@@ -1,38 +1,33 @@
 /* Basic editor styles */
 .tiptap {
-  > * + * {
-    margin-top: 0.75em;
-  }
-
-  h1,
-  h2,
-  h3,
-  h4,
-  h5,
-  h6 {
-    line-height: 1.1;
+  :first-child {
+    margin-top: 0;
   }
 
+  /* Code and preformatted text styles */
   code {
-    background-color: rgba(#616161, 0.1);
-    color: #616161;
-  }
-}
-
-/* Color swatches */
-.color {
-  white-space: nowrap;
-
-  &::before {
-    background-color: var(--color);
-    border: 1px solid rgba(128, 128, 128, 0.3);
-    border-radius: 2px;
-    content: " ";
-    display: inline-block;
-    height: 1em;
-    margin-bottom: 0.15em;
-    margin-right: 0.1em;
-    vertical-align: middle;
-    width: 1em;
+    background-color: var(--purple-light);
+    border-radius: 0.4rem;
+    color: var(--black);
+    font-size: 0.85rem;
+    padding: 0.25em 0.3em;
+  }
+
+  /* Color swatches */
+  .color {
+    white-space: nowrap;
+
+    &::before {
+      background-color: var(--color);
+      border: 1px solid rgba(128, 128, 128, 0.3);
+      border-radius: 2px;
+      content: " ";
+      display: inline-block;
+      height: 1em;
+      margin-bottom: 0.15em;
+      margin-right: 0.1em;
+      vertical-align: middle;
+      width: 1em;
+    }
   }
 }
diff --git a/demos/src/Examples/Savvy/Vue/index.vue b/demos/src/Examples/Savvy/Vue/index.vue
index b296747bd..a824b6097 100644
--- a/demos/src/Examples/Savvy/Vue/index.vue
+++ b/demos/src/Examples/Savvy/Vue/index.vue
@@ -37,7 +37,7 @@ export default {
       ],
       content: `
         <p>
-          → With the Typography extension, tiptap understands »what you mean« and adds correct characters to your text — it’s like a “typography nerd” on your side.
+          → With the Typography extension, Tiptap understands »what you mean« and adds correct characters to your text — it’s like a “typography nerd” on your side.
         </p>
         <p>
           Try it out and type <code>(c)</code>, <code>-></code>, <code>>></code>, <code>1/2</code>, <code>!=</code>, <code>--</code> or <code>1x1</code> here:
@@ -64,40 +64,35 @@ export default {
 <style lang="scss">
 /* Basic editor styles */
 .tiptap {
-  > * + * {
-    margin-top: 0.75em;
-  }
-
-  h1,
-  h2,
-  h3,
-  h4,
-  h5,
-  h6 {
-    line-height: 1.1;
+  :first-child {
+    margin-top: 0;
   }
 
+  /* Code and preformatted text styles */
   code {
-    background-color: rgba(#616161, 0.1);
-    color: #616161;
+    background-color: var(--purple-light);
+    border-radius: 0.4rem;
+    color: var(--black);
+    font-size: 0.85rem;
+    padding: 0.25em 0.3em;
   }
-}
 
-/* Color swatches */
-.color {
-  white-space: nowrap;
+  /* Color swatches */
+  .color {
+    white-space: nowrap;
 
-  &::before {
-    content: ' ';
-    display: inline-block;
-    width: 1em;
-    height: 1em;
-    border: 1px solid rgba(128, 128, 128, 0.3);
-    vertical-align: middle;
-    margin-right: 0.1em;
-    margin-bottom: 0.15em;
-    border-radius: 2px;
-    background-color: var(--color);
+    &::before {
+      background-color: var(--color);
+      border: 1px solid rgba(128, 128, 128, 0.3);
+      border-radius: 2px;
+      content: " ";
+      display: inline-block;
+      height: 1em;
+      margin-bottom: 0.15em;
+      margin-right: 0.1em;
+      vertical-align: middle;
+      width: 1em;
+    }
   }
 }
 </style>
diff --git a/demos/src/Examples/Tables/React/index.jsx b/demos/src/Examples/Tables/React/index.jsx
index 7fab59158..acc42ca7b 100644
--- a/demos/src/Examples/Tables/React/index.jsx
+++ b/demos/src/Examples/Tables/React/index.jsx
@@ -60,69 +60,71 @@ const MenuBar = ({ editor }) => {
   }
 
   return (
-    <>
-      <button onClick={() => editor.chain().focus().insertTable({ rows: 3, cols: 3, withHeaderRow: true }).run()}>
-        insertTable
-      </button>
-      <button onClick={() => editor.chain().focus().insertContent(tableHTML, {
-        parseOptions: {
-          preserveWhitespace: false,
-        },
-      }).run()}>
-        insertHTMLTable
-      </button>
-      <button onClick={() => editor.chain().focus().addColumnBefore().run()} disabled={!editor.can().addColumnBefore()}>
-        addColumnBefore
-      </button>
-      <button onClick={() => editor.chain().focus().addColumnAfter().run()} disabled={!editor.can().addColumnAfter()}>
-        addColumnAfter
-      </button>
-      <button onClick={() => editor.chain().focus().deleteColumn().run()} disabled={!editor.can().deleteColumn()}>
-        deleteColumn
-      </button>
-      <button onClick={() => editor.chain().focus().addRowBefore().run()} disabled={!editor.can().addRowBefore()}>
-        addRowBefore
-      </button>
-      <button onClick={() => editor.chain().focus().addRowAfter().run()} disabled={!editor.can().addRowAfter()}>
-        addRowAfter
-      </button>
-      <button onClick={() => editor.chain().focus().deleteRow().run()} disabled={!editor.can().deleteRow()}>
-        deleteRow
-      </button>
-      <button onClick={() => editor.chain().focus().deleteTable().run()} disabled={!editor.can().deleteTable()}>
-        deleteTable
-      </button>
-      <button onClick={() => editor.chain().focus().mergeCells().run()} disabled={!editor.can().mergeCells()}>
-        mergeCells
-      </button>
-      <button onClick={() => editor.chain().focus().splitCell().run()} disabled={!editor.can().splitCell()}>
-        splitCell
-      </button>
-      <button onClick={() => editor.chain().focus().toggleHeaderColumn().run()} disabled={!editor.can().toggleHeaderColumn()}>
-        toggleHeaderColumn
-      </button>
-      <button onClick={() => editor.chain().focus().toggleHeaderRow().run()} disabled={!editor.can().toggleHeaderRow()}>
-        toggleHeaderRow
-      </button>
-      <button onClick={() => editor.chain().focus().toggleHeaderCell().run()} disabled={!editor.can().toggleHeaderCell()}>
-        toggleHeaderCell
-      </button>
-      <button onClick={() => editor.chain().focus().mergeOrSplit().run()} disabled={!editor.can().mergeOrSplit()}>
-        mergeOrSplit
-      </button>
-      <button onClick={() => editor.chain().focus().setCellAttribute('backgroundColor', '#FAF594').run()} disabled={!editor.can().setCellAttribute('backgroundColor', '#FAF594')}>
-        setCellAttribute
-      </button>
-      <button onClick={() => editor.chain().focus().fixTables().run()} disabled={!editor.can().fixTables()}>
-        fixTables
-      </button>
-      <button onClick={() => editor.chain().focus().goToNextCell().run()} disabled={!editor.can().goToNextCell()}>
-        goToNextCell
-      </button>
-      <button onClick={() => editor.chain().focus().goToPreviousCell().run()} disabled={!editor.can().goToPreviousCell()}>
-        goToPreviousCell
-      </button>
-    </>
+    <div className="control-group">
+        <div className="button-group">
+        <button onClick={() => editor.chain().focus().insertTable({ rows: 3, cols: 3, withHeaderRow: true }).run()}>
+          Insert table
+        </button>
+        <button onClick={() => editor.chain().focus().insertContent(tableHTML, {
+          parseOptions: {
+            preserveWhitespace: false,
+          },
+        }).run()}>
+          Insert HTML table
+        </button>
+        <button onClick={() => editor.chain().focus().addColumnBefore().run()} disabled={!editor.can().addColumnBefore()}>
+          Add column before
+        </button>
+        <button onClick={() => editor.chain().focus().addColumnAfter().run()} disabled={!editor.can().addColumnAfter()}>
+          Add column after
+        </button>
+        <button onClick={() => editor.chain().focus().deleteColumn().run()} disabled={!editor.can().deleteColumn()}>
+          Delete column
+        </button>
+        <button onClick={() => editor.chain().focus().addRowBefore().run()} disabled={!editor.can().addRowBefore()}>
+          Add row before
+        </button>
+        <button onClick={() => editor.chain().focus().addRowAfter().run()} disabled={!editor.can().addRowAfter()}>
+          Add row after
+        </button>
+        <button onClick={() => editor.chain().focus().deleteRow().run()} disabled={!editor.can().deleteRow()}>
+          Delete row
+        </button>
+        <button onClick={() => editor.chain().focus().deleteTable().run()} disabled={!editor.can().deleteTable()}>
+          Delete table
+        </button>
+        <button onClick={() => editor.chain().focus().mergeCells().run()} disabled={!editor.can().mergeCells()}>
+          Merge cells
+        </button>
+        <button onClick={() => editor.chain().focus().splitCell().run()} disabled={!editor.can().splitCell()}>
+          Split cell
+        </button>
+        <button onClick={() => editor.chain().focus().toggleHeaderColumn().run()} disabled={!editor.can().toggleHeaderColumn()}>
+          ToggleHeaderColumn
+        </button>
+        <button onClick={() => editor.chain().focus().toggleHeaderRow().run()} disabled={!editor.can().toggleHeaderRow()}>
+          Toggle header row
+        </button>
+        <button onClick={() => editor.chain().focus().toggleHeaderCell().run()} disabled={!editor.can().toggleHeaderCell()}>
+          Toggle header cell
+        </button>
+        <button onClick={() => editor.chain().focus().mergeOrSplit().run()} disabled={!editor.can().mergeOrSplit()}>
+          Merge or split
+        </button>
+        <button onClick={() => editor.chain().focus().setCellAttribute('backgroundColor', '#FAF594').run()} disabled={!editor.can().setCellAttribute('backgroundColor', '#FAF594')}>
+          Set cell attribute
+        </button>
+        <button onClick={() => editor.chain().focus().fixTables().run()} disabled={!editor.can().fixTables()}>
+          Fix tables
+        </button>
+        <button onClick={() => editor.chain().focus().goToNextCell().run()} disabled={!editor.can().goToNextCell()}>
+          Go to next cell
+        </button>
+        <button onClick={() => editor.chain().focus().goToPreviousCell().run()} disabled={!editor.can().goToPreviousCell()}>
+          Go to previous cell
+        </button>
+      </div>
+    </div>
   )
 }
 
@@ -145,9 +147,9 @@ export default () => {
         Have you seen our tables? They are amazing!
       </h3>
       <ul>
-        <li>tables with rows, cells and headers (optional)</li>
-        <li>support for <code>colgroup</code> and <code>rowspan</code></li>
-        <li>and even resizable columns (optional)</li>
+        <li>Tables with rows, cells and headers (optional)</li>
+        <li>Support for <code>colgroup</code> and <code>rowspan</code></li>
+        <li>And even resizable columns (optional)</li>
       </ul>
       <p>
         Here is an example:
@@ -160,20 +162,20 @@ export default () => {
           </tr>
           <tr>
             <td>Cyndi Lauper</td>
-            <td>singer</td>
-            <td>songwriter</td>
-            <td>actress</td>
+            <td>Singer</td>
+            <td>Songwriter</td>
+            <td>Actress</td>
           </tr>
           <tr>
             <td>Marie Curie</td>
-            <td>scientist</td>
-            <td>chemist</td>
-            <td>physicist</td>
+            <td>Scientist</td>
+            <td>Chemist</td>
+            <td>Physicist</td>
           </tr>
           <tr>
             <td>Indira Gandhi</td>
-            <td>prime minister</td>
-            <td colspan="2">politician</td>
+            <td>Prime minister</td>
+            <td colspan="2">Politician</td>
           </tr>
         </tbody>
       </table>
@@ -181,9 +183,9 @@ export default () => {
   })
 
   return (
-    <div>
+    <>
       <MenuBar editor={editor} />
       <EditorContent editor={editor} />
-    </div>
+    </>
   )
 }
diff --git a/demos/src/Examples/Tables/React/index.spec.js b/demos/src/Examples/Tables/React/index.spec.js
index 8ade8b11d..5202cdfcb 100644
--- a/demos/src/Examples/Tables/React/index.spec.js
+++ b/demos/src/Examples/Tables/React/index.spec.js
@@ -6,7 +6,7 @@ context('/src/Examples/Tables/React/', () => {
   beforeEach(() => {
     cy.get('.tiptap').then(([{ editor }]) => {
       editor.commands.clearContent()
-      cy.get('button').contains('insertTable').click()
+      cy.get('button').contains('Insert table').click()
     })
   })
 
@@ -28,15 +28,15 @@ context('/src/Examples/Tables/React/', () => {
   })
 
   it('adds & delete columns', () => {
-    cy.get('button').contains('addColumnBefore').click()
+    cy.get('button').contains('Add column before').click()
     cy.get('.tiptap table th')
       .should('have.length', 4)
 
-    cy.get('button').contains('addColumnAfter').click()
+    cy.get('button').contains('Add column after').click()
     cy.get('.tiptap table th')
       .should('have.length', 5)
 
-    cy.get('button').contains('deleteColumn')
+    cy.get('button').contains('Delete column')
       .click()
       .click()
     cy.get('.tiptap table th')
@@ -44,15 +44,15 @@ context('/src/Examples/Tables/React/', () => {
   })
 
   it('adds & delete rows', () => {
-    cy.get('button').contains('addRowBefore').click()
+    cy.get('button').contains('Add row before').click()
     cy.get('.tiptap table tr')
       .should('have.length', 4)
 
-    cy.get('button').contains('addRowAfter').click()
+    cy.get('button').contains('Add row after').click()
     cy.get('.tiptap table tr')
       .should('have.length', 5)
 
-    cy.get('button').contains('deleteRow')
+    cy.get('button').contains('Delete row')
       .click()
       .click()
     cy.get('.tiptap table tr')
@@ -60,21 +60,21 @@ context('/src/Examples/Tables/React/', () => {
   })
 
   it('should delete table', () => {
-    cy.get('button').contains('deleteTable').click()
+    cy.get('button').contains('Delete table').click()
     cy.get('.tiptap table').should('not.exist')
   })
 
   it('should merge cells', () => {
     cy.get('.tiptap').type('{shift}{rightArrow}')
-    cy.get('button').contains('mergeCells').click()
+    cy.get('button').contains('Merge cells').click()
     cy.get('.tiptap table th').should('have.length', 2)
   })
 
   it('should split cells', () => {
     cy.get('.tiptap').type('{shift}{rightArrow}')
-    cy.get('button').contains('mergeCells').click()
+    cy.get('button').contains('Merge cells').click()
     cy.get('.tiptap table th').should('have.length', 2)
-    cy.get('button').contains('splitCell').click()
+    cy.get('button').contains('Split cell').click()
     cy.get('.tiptap table th').should('have.length', 3)
   })
 
@@ -94,11 +94,11 @@ context('/src/Examples/Tables/React/', () => {
 
   it('should merge split', () => {
     cy.get('.tiptap').type('{shift}{rightArrow}')
-    cy.get('button').contains('mergeCells').click()
+    cy.get('button').contains('Merge cells').click()
     cy.get('.tiptap th[colspan="2"]')
       .should('exist')
     cy.get('button')
-      .contains('mergeOrSplit')
+      .contains('Merge or split')
       .click()
     cy.get('.tiptap th[colspan="2"]')
       .should('not.exist')
@@ -106,15 +106,15 @@ context('/src/Examples/Tables/React/', () => {
 
   it('should set cell attribute', () => {
     cy.get('.tiptap').type('{downArrow}')
-    cy.get('button').contains('setCellAttribute').click()
+    cy.get('button').contains('Set cell attribute').click()
     cy.get('.tiptap table td[style]').should('have.attr', 'style', 'background-color: #FAF594')
   })
 
   it('should move focus to next or prev cell', () => {
     cy.get('.tiptap').type('Column 1')
-    cy.get('button').contains('goToNextCell').click()
+    cy.get('button').contains('Go to next cell').click()
     cy.get('.tiptap').type('Column 2')
-    cy.get('button').contains('goToPreviousCell').click()
+    cy.get('button').contains('Go to previous cell').click()
 
     cy.get('.tiptap th').then(elements => {
       expect(elements[0].innerText).to.equal('Column 1')
diff --git a/demos/src/Examples/Tables/React/styles.scss b/demos/src/Examples/Tables/React/styles.scss
index 878bb4441..b0c6c11b0 100644
--- a/demos/src/Examples/Tables/React/styles.scss
+++ b/demos/src/Examples/Tables/React/styles.scss
@@ -1,79 +1,110 @@
 /* Basic editor styles */
 .tiptap {
-  margin: 1rem 0;
-
-  > * + * {
-    margin-top: 0.75em;
+  :first-child {
+    margin-top: 0;
   }
 
-  ul,
+  /* List styles */
+  ul, 
   ol {
     padding: 0 1rem;
-  }
-
-  h1,
-  h2,
-  h3,
-  h4,
-  h5,
-  h6 {
-    line-height: 1.1;
-  }
-
-  code {
-    background-color: rgba(#616161, 0.1);
-    color: #616161;
-  }
-
-  pre {
-    background: #0D0D0D;
-    color: #FFF;
-    font-family: 'JetBrainsMono', monospace;
-    padding: 0.75rem 1rem;
-    border-radius: 0.5rem;
-
-    code {
-      color: inherit;
-      padding: 0;
-      background: none;
-      font-size: 0.8rem;
+    margin: 1.25rem 1rem 1.25rem 0.4rem;
+    
+    li p {
+      margin-top: 0.25em;
+      margin-bottom: 0.25em;
     }
   }
 
-  img {
-    max-width: 100%;
-    height: auto;
+  /* Heading styles */
+  h1, 
+  h2, 
+  h3, 
+  h4, 
+  h5, 
+  h6 {
+    line-height: 1.1;
+    margin-top: 2.5rem;
+    text-wrap: pretty;
+  }
+
+  h1, 
+  h2 {
+    margin-top: 3.5rem;
+    margin-bottom: 1.5rem;
+  }
+
+  h1 { 
+    font-size: 1.4rem; 
+  }
+
+  h2 { 
+    font-size: 1.2rem; 
+  }
+
+  h3 { 
+    font-size: 1.1rem; 
+  }
+
+  h4, 
+  h5, 
+  h6 { 
+    font-size: 1rem; 
+  }
+
+  /* Code and preformatted text styles */
+  code {
+    background-color: var(--purple-light);
+    border-radius: 0.4rem;
+    color: var(--black);
+    font-size: 0.85rem;
+    padding: 0.25em 0.3em;
+  }
+
+  pre {
+    background: var(--black);
+    border-radius: 0.5rem;
+    color: var(--white);
+    font-family: 'JetBrainsMono', monospace;
+    margin: 1.5rem 0;
+    padding: 0.75rem 1rem;
+
+    code {
+      background: none;
+      color: inherit;
+      font-size: 0.8rem;
+      padding: 0;
+    }
   }
 
   blockquote {
+    border-left: 3px solid var(--gray-3);
+    margin: 1.5rem 0;
     padding-left: 1rem;
-    border-left: 2px solid rgba(#0D0D0D, 0.1);
   }
 
   hr {
     border: none;
-    border-top: 2px solid rgba(#0D0D0D, 0.1);
+    border-top: 1px solid var(--gray-2);
     margin: 2rem 0;
   }
-}
 
-/* Table-specific styling */
-.tiptap {
+  /* Table-specific styling */
   table {
     border-collapse: collapse;
-    table-layout: fixed;
-    width: 100%;
     margin: 0;
     overflow: hidden;
+    table-layout: fixed;
+    width: 100%;
 
     td,
     th {
-      min-width: 1em;
-      border: 2px solid #ced4da;
-      padding: 3px 5px;
-      vertical-align: top;
+      border: 1px solid var(--gray-3);
       box-sizing: border-box;
+      min-width: 1em;
+      padding: 6px 8px;
       position: relative;
+      vertical-align: top;
 
       > * {
         margin-bottom: 0;
@@ -81,37 +112,38 @@
     }
 
     th {
+      background-color: var(--gray-1);
       font-weight: bold;
       text-align: left;
-      background-color: #f1f3f5;
     }
 
     .selectedCell:after {
-      z-index: 2;
-      position: absolute;
+      background: var(--gray-2);
       content: "";
       left: 0; right: 0; top: 0; bottom: 0;
-      background: rgba(200, 200, 255, 0.4);
       pointer-events: none;
+      position: absolute;
+      z-index: 2;
     }
 
     .column-resize-handle {
+      background-color: var(--purple);
+      bottom: -2px;
+      pointer-events: none;
       position: absolute;
       right: -2px;
       top: 0;
-      bottom: -2px;
       width: 4px;
-      background-color: #adf;
-      pointer-events: none;
     }
   }
-}
 
-.tableWrapper {
-  overflow-x: auto;
-}
+  .tableWrapper {
+    margin: 1.5rem 0;
+    overflow-x: auto;
+  }
 
-.resize-cursor {
-  cursor: ew-resize;
-  cursor: col-resize;
+  .resize-cursor {
+    cursor: ew-resize;
+    cursor: col-resize;
+  }
 }
diff --git a/demos/src/Examples/Tables/Vue/index.spec.js b/demos/src/Examples/Tables/Vue/index.spec.js
index 9e2f73e0a..5e93e8012 100644
--- a/demos/src/Examples/Tables/Vue/index.spec.js
+++ b/demos/src/Examples/Tables/Vue/index.spec.js
@@ -6,7 +6,7 @@ context('/src/Examples/Tables/Vue/', () => {
   beforeEach(() => {
     cy.get('.tiptap').then(([{ editor }]) => {
       editor.commands.clearContent()
-      cy.get('button').contains('insertTable').click()
+      cy.get('button').contains('Insert table').click()
     })
   })
 
@@ -28,15 +28,15 @@ context('/src/Examples/Tables/Vue/', () => {
   })
 
   it('adds & delete columns', () => {
-    cy.get('button').contains('addColumnBefore').click()
+    cy.get('button').contains('Add column before').click()
     cy.get('.tiptap table th')
       .should('have.length', 4)
 
-    cy.get('button').contains('addColumnAfter').click()
+    cy.get('button').contains('Add column after').click()
     cy.get('.tiptap table th')
       .should('have.length', 5)
 
-    cy.get('button').contains('deleteColumn')
+    cy.get('button').contains('Delete column')
       .click()
       .click()
     cy.get('.tiptap table th')
@@ -44,15 +44,15 @@ context('/src/Examples/Tables/Vue/', () => {
   })
 
   it('adds & delete rows', () => {
-    cy.get('button').contains('addRowBefore').click()
+    cy.get('button').contains('Add row before').click()
     cy.get('.tiptap table tr')
       .should('have.length', 4)
 
-    cy.get('button').contains('addRowAfter').click()
+    cy.get('button').contains('Add row after').click()
     cy.get('.tiptap table tr')
       .should('have.length', 5)
 
-    cy.get('button').contains('deleteRow')
+    cy.get('button').contains('Delete row')
       .click()
       .click()
     cy.get('.tiptap table tr')
@@ -60,21 +60,21 @@ context('/src/Examples/Tables/Vue/', () => {
   })
 
   it('should delete table', () => {
-    cy.get('button').contains('deleteTable').click()
+    cy.get('button').contains('Delete table').click()
     cy.get('.tiptap table').should('not.exist')
   })
 
   it('should merge cells', () => {
     cy.get('.tiptap').type('{shift}{rightArrow}')
-    cy.get('button').contains('mergeCells').click()
+    cy.get('button').contains('Merge cells').click()
     cy.get('.tiptap table th').should('have.length', 2)
   })
 
   it('should split cells', () => {
     cy.get('.tiptap').type('{shift}{rightArrow}')
-    cy.get('button').contains('mergeCells').click()
+    cy.get('button').contains('Merge cells').click()
     cy.get('.tiptap table th').should('have.length', 2)
-    cy.get('button').contains('splitCell').click()
+    cy.get('button').contains('Split cell').click()
     cy.get('.tiptap table th').should('have.length', 3)
   })
 
@@ -94,11 +94,11 @@ context('/src/Examples/Tables/Vue/', () => {
 
   it('should merge split', () => {
     cy.get('.tiptap').type('{shift}{rightArrow}')
-    cy.get('button').contains('mergeCells').click()
+    cy.get('button').contains('Merge cells').click()
     cy.get('.tiptap th[colspan="2"]')
       .should('exist')
     cy.get('button')
-      .contains('mergeOrSplit')
+      .contains('Merge or split')
       .click()
     cy.get('.tiptap th[colspan="2"]')
       .should('not.exist')
@@ -106,15 +106,15 @@ context('/src/Examples/Tables/Vue/', () => {
 
   it('should set cell attribute', () => {
     cy.get('.tiptap').type('{downArrow}')
-    cy.get('button').contains('setCellAttribute').click()
+    cy.get('button').contains('Set cell attribute').click()
     cy.get('.tiptap table td[style]').should('have.attr', 'style', 'background-color: #FAF594')
   })
 
   it('should move focus to next or prev cell', () => {
     cy.get('.tiptap').type('Column 1')
-    cy.get('button').contains('goToNextCell').click()
+    cy.get('button').contains('Go to next cell').click()
     cy.get('.tiptap').type('Column 2')
-    cy.get('button').contains('goToPreviousCell').click()
+    cy.get('button').contains('Go to previous cell').click()
 
     cy.get('.tiptap th').then(elements => {
       expect(elements[0].innerText).to.equal('Column 1')
diff --git a/demos/src/Examples/Tables/Vue/index.vue b/demos/src/Examples/Tables/Vue/index.vue
index 973444dbf..45253ca30 100644
--- a/demos/src/Examples/Tables/Vue/index.vue
+++ b/demos/src/Examples/Tables/Vue/index.vue
@@ -1,61 +1,70 @@
 <template>
-  <div v-if="editor">
-    <button @click="editor.chain().focus().insertTable({ rows: 3, cols: 3, withHeaderRow: true }).run()">
-      insertTable
-    </button>
-    <button @click="editor.chain().focus().addColumnBefore().run()" :disabled="!editor.can().addColumnBefore()">
-      addColumnBefore
-    </button>
-    <button @click="editor.chain().focus().addColumnAfter().run()" :disabled="!editor.can().addColumnAfter()">
-      addColumnAfter
-    </button>
-    <button @click="editor.chain().focus().deleteColumn().run()" :disabled="!editor.can().deleteColumn()">
-      deleteColumn
-    </button>
-    <button @click="editor.chain().focus().addRowBefore().run()" :disabled="!editor.can().addRowBefore()">
-      addRowBefore
-    </button>
-    <button @click="editor.chain().focus().addRowAfter().run()" :disabled="!editor.can().addRowAfter()">
-      addRowAfter
-    </button>
-    <button @click="editor.chain().focus().deleteRow().run()" :disabled="!editor.can().deleteRow()">
-      deleteRow
-    </button>
-    <button @click="editor.chain().focus().deleteTable().run()" :disabled="!editor.can().deleteTable()">
-      deleteTable
-    </button>
-    <button @click="editor.chain().focus().mergeCells().run()" :disabled="!editor.can().mergeCells()">
-      mergeCells
-    </button>
-    <button @click="editor.chain().focus().splitCell().run()" :disabled="!editor.can().splitCell()">
-      splitCell
-    </button>
-    <button @click="editor.chain().focus().toggleHeaderColumn().run()" :disabled="!editor.can().toggleHeaderColumn()">
-      toggleHeaderColumn
-    </button>
-    <button @click="editor.chain().focus().toggleHeaderRow().run()" :disabled="!editor.can().toggleHeaderRow()">
-      toggleHeaderRow
-    </button>
-    <button @click="editor.chain().focus().toggleHeaderCell().run()" :disabled="!editor.can().toggleHeaderCell()">
-      toggleHeaderCell
-    </button>
-    <button @click="editor.chain().focus().mergeOrSplit().run()" :disabled="!editor.can().mergeOrSplit()">
-      mergeOrSplit
-    </button>
-    <button @click="editor.chain().focus().setCellAttribute('backgroundColor', '#FAF594').run()" :disabled="!editor.can().setCellAttribute('backgroundColor', '#FAF594')">
-      setCellAttribute
-    </button>
-    <button @click="editor.chain().focus().fixTables().run()" :disabled="!editor.can().fixTables()">
-      fixTables
-    </button>
-    <button @click="editor.chain().focus().goToNextCell().run()" :disabled="!editor.can().goToNextCell()">
-      goToNextCell
-    </button>
-    <button @click="editor.chain().focus().goToPreviousCell().run()" :disabled="!editor.can().goToPreviousCell()">
-      goToPreviousCell
-    </button>
+  <div v-if="editor" class="container">
+    <div class="control-group">
+      <div class="button-group">
+        <button @click="editor.chain().focus().insertTable({ rows: 3, cols: 3, withHeaderRow: true }).run()">
+          Insert table
+        </button>
+        <button
+          @click="editor.chain().focus().insertContent(tableHTML, { parseOptions: { preserveWhitespace: false }}).run()"
+        >
+          Insert HTML table
+        </button>
+        <button @click="editor.chain().focus().addColumnBefore().run()" :disabled="!editor.can().addColumnBefore()">
+          Add column before
+        </button>
+        <button @click="editor.chain().focus().addColumnAfter().run()" :disabled="!editor.can().addColumnAfter()">
+          Add column after
+        </button>
+        <button @click="editor.chain().focus().deleteColumn().run()" :disabled="!editor.can().deleteColumn()">
+          Delete column
+        </button>
+        <button @click="editor.chain().focus().addRowBefore().run()" :disabled="!editor.can().addRowBefore()">
+          Add row before
+        </button>
+        <button @click="editor.chain().focus().addRowAfter().run()" :disabled="!editor.can().addRowAfter()">
+          Add row after
+        </button>
+        <button @click="editor.chain().focus().deleteRow().run()" :disabled="!editor.can().deleteRow()">
+          Delete row
+        </button>
+        <button @click="editor.chain().focus().deleteTable().run()" :disabled="!editor.can().deleteTable()">
+          Delete table
+        </button>
+        <button @click="editor.chain().focus().mergeCells().run()" :disabled="!editor.can().mergeCells()">
+          Merge cells
+        </button>
+        <button @click="editor.chain().focus().splitCell().run()" :disabled="!editor.can().splitCell()">
+          Split cell
+        </button>
+        <button @click="editor.chain().focus().toggleHeaderColumn().run()" :disabled="!editor.can().toggleHeaderColumn()">
+          Toggle header column
+        </button>
+        <button @click="editor.chain().focus().toggleHeaderRow().run()" :disabled="!editor.can().toggleHeaderRow()">
+          Toggle header row
+        </button>
+        <button @click="editor.chain().focus().toggleHeaderCell().run()" :disabled="!editor.can().toggleHeaderCell()">
+          Toggle header cell
+        </button>
+        <button @click="editor.chain().focus().mergeOrSplit().run()" :disabled="!editor.can().mergeOrSplit()">
+          Merge or split
+        </button>
+        <button @click="editor.chain().focus().setCellAttribute('backgroundColor', '#FAF594').run()" :disabled="!editor.can().setCellAttribute('backgroundColor', '#FAF594')">
+          Set cell attribute
+        </button>
+        <button @click="editor.chain().focus().fixTables().run()" :disabled="!editor.can().fixTables()">
+          Fix tables
+        </button>
+        <button @click="editor.chain().focus().goToNextCell().run()" :disabled="!editor.can().goToNextCell()">
+          Go to next cell
+        </button>
+        <button @click="editor.chain().focus().goToPreviousCell().run()" :disabled="!editor.can().goToPreviousCell()">
+          Go to previous cell
+        </button>
+      </div>
+    </div>
+    <editor-content :editor="editor" />
   </div>
-  <editor-content :editor="editor" />
 </template>
 
 <script>
@@ -95,6 +104,29 @@ export default {
   data() {
     return {
       editor: null,
+      tableHTML: `
+  <table style="width:100%">
+    <tr>
+      <th>Firstname</th>
+      <th>Lastname</th>
+      <th>Age</th>
+    </tr>
+    <tr>
+      <td>Jill</td>
+      <td>Smith</td>
+      <td>50</td>
+    </tr>
+    <tr>
+      <td>Eve</td>
+      <td>Jackson</td>
+      <td>94</td>
+    </tr>
+    <tr>
+      <td>John</td>
+      <td>Doe</td>
+      <td>80</td>
+    </tr>
+  </table>`,
     }
   },
 
@@ -117,9 +149,9 @@ export default {
           Have you seen our tables? They are amazing!
         </h3>
         <ul>
-          <li>tables with rows, cells and headers (optional)</li>
-          <li>support for <code>colgroup</code> and <code>rowspan</code></li>
-          <li>and even resizable columns (optional)</li>
+          <li>Tables with rows, cells and headers (optional)</li>
+          <li>Support for <code>colgroup</code> and <code>rowspan</code></li>
+          <li>And even resizable columns (optional)</li>
         </ul>
         <p>
           Here is an example:
@@ -132,20 +164,20 @@ export default {
             </tr>
             <tr>
               <td>Cyndi Lauper</td>
-              <td>singer</td>
-              <td>songwriter</td>
-              <td>actress</td>
+              <td>Singer</td>
+              <td>Songwriter</td>
+              <td>Actress</td>
             </tr>
             <tr>
               <td>Marie Curie</td>
-              <td>scientist</td>
-              <td>chemist</td>
-              <td>physicist</td>
+              <td>Scientist</td>
+              <td>Chemist</td>
+              <td>Physicist</td>
             </tr>
             <tr>
               <td>Indira Gandhi</td>
-              <td>prime minister</td>
-              <td colspan="2">politician</td>
+              <td>Prime minister</td>
+              <td colspan="2">Politician</td>
             </tr>
           </tbody>
         </table>
@@ -162,17 +194,23 @@ export default {
 <style lang="scss">
 /* Basic editor styles */
 .tiptap {
-  margin: 1rem 0;
-
-  > * + * {
-    margin-top: 0.75em;
+  :first-child {
+    margin-top: 0;
   }
 
+  /* List styles */
   ul,
   ol {
     padding: 0 1rem;
+    margin: 1.25rem 1rem 1.25rem 0.4rem;
+
+    li p {
+      margin-top: 0.25em;
+      margin-bottom: 0.25em;
+    }
   }
 
+  /* Heading styles */
   h1,
   h2,
   h3,
@@ -180,62 +218,87 @@ export default {
   h5,
   h6 {
     line-height: 1.1;
+    margin-top: 2.5rem;
+    text-wrap: pretty;
   }
 
+  h1,
+  h2 {
+    margin-top: 3.5rem;
+    margin-bottom: 1.5rem;
+  }
+
+  h1 {
+    font-size: 1.4rem;
+  }
+
+  h2 {
+    font-size: 1.2rem;
+  }
+
+  h3 {
+    font-size: 1.1rem;
+  }
+
+  h4,
+  h5,
+  h6 {
+    font-size: 1rem;
+  }
+
+  /* Code and preformatted text styles */
   code {
-    background-color: rgba(#616161, 0.1);
-    color: #616161;
+    background-color: var(--purple-light);
+    border-radius: 0.4rem;
+    color: var(--black);
+    font-size: 0.85rem;
+    padding: 0.25em 0.3em;
   }
 
   pre {
-    background: #0D0D0D;
-    color: #FFF;
-    font-family: 'JetBrainsMono', monospace;
-    padding: 0.75rem 1rem;
+    background: var(--black);
     border-radius: 0.5rem;
+    color: var(--white);
+    font-family: 'JetBrainsMono', monospace;
+    margin: 1.5rem 0;
+    padding: 0.75rem 1rem;
 
     code {
-      color: inherit;
-      padding: 0;
       background: none;
+      color: inherit;
       font-size: 0.8rem;
+      padding: 0;
     }
   }
 
-  img {
-    max-width: 100%;
-    height: auto;
-  }
-
   blockquote {
+    border-left: 3px solid var(--gray-3);
+    margin: 1.5rem 0;
     padding-left: 1rem;
-    border-left: 2px solid rgba(#0D0D0D, 0.1);
   }
 
   hr {
     border: none;
-    border-top: 2px solid rgba(#0D0D0D, 0.1);
+    border-top: 1px solid var(--gray-2);
     margin: 2rem 0;
   }
-}
 
-/* Table-specific styling */
-.tiptap {
+  /* Table-specific styling */
   table {
     border-collapse: collapse;
-    table-layout: fixed;
-    width: 100%;
     margin: 0;
     overflow: hidden;
+    table-layout: fixed;
+    width: 100%;
 
     td,
     th {
-      min-width: 1em;
-      border: 2px solid #ced4da;
-      padding: 3px 5px;
-      vertical-align: top;
+      border: 1px solid var(--gray-3);
       box-sizing: border-box;
+      min-width: 1em;
+      padding: 6px 8px;
       position: relative;
+      vertical-align: top;
 
       > * {
         margin-bottom: 0;
@@ -243,42 +306,39 @@ export default {
     }
 
     th {
+      background-color: var(--gray-1);
       font-weight: bold;
       text-align: left;
-      background-color: #f1f3f5;
     }
 
     .selectedCell:after {
-      z-index: 2;
-      position: absolute;
+      background: var(--gray-2);
       content: "";
       left: 0; right: 0; top: 0; bottom: 0;
-      background: rgba(200, 200, 255, 0.4);
       pointer-events: none;
+      position: absolute;
+      z-index: 2;
     }
 
     .column-resize-handle {
+      background-color: var(--purple);
+      bottom: -2px;
+      pointer-events: none;
       position: absolute;
       right: -2px;
       top: 0;
-      bottom: -2px;
       width: 4px;
-      background-color: #adf;
-      pointer-events: none;
-    }
-
-    p {
-      margin: 0;
     }
   }
-}
 
-.tableWrapper {
-  overflow-x: auto;
-}
+  .tableWrapper {
+    margin: 1.5rem 0;
+    overflow-x: auto;
+  }
 
-.resize-cursor {
-  cursor: ew-resize;
-  cursor: col-resize;
+  .resize-cursor {
+    cursor: ew-resize;
+    cursor: col-resize;
+  }
 }
 </style>
diff --git a/demos/src/Examples/Tasks/React/styles.scss b/demos/src/Examples/Tasks/React/styles.scss
index 5628b7ebd..1588eef6b 100644
--- a/demos/src/Examples/Tasks/React/styles.scss
+++ b/demos/src/Examples/Tasks/React/styles.scss
@@ -1,23 +1,44 @@
-ul[data-type="taskList"] {
-  list-style: none;
-  padding: 0;
+/* Basic editor styles */
+.tiptap {
+  :first-child {
+    margin-top: 0;
+  }
 
-  li {
-    display: flex;
-    align-items: center;
+  /* List styles */
+  ul,
+  ol {
+    padding: 0 1rem;
+    margin: 1.25rem 1rem 1.25rem 0.4rem;
 
-    > label {
-      flex: 0 0 auto;
-      margin-right: 0.5rem;
-      user-select: none;
-    }
-
-    > div {
-      flex: 1 1 auto;
+    li p {
+      margin-top: 0.25em;
+      margin-bottom: 0.25em;
     }
   }
 
-  input[type="checkbox"] {
-    cursor: pointer;
+  /* Task list specific styles */
+  ul[data-type="taskList"] {
+    list-style: none;
+    margin-left: 0;
+    padding: 0;
+  
+    li {
+      align-items: center;
+      display: flex;
+  
+      > label {
+        flex: 0 0 auto;
+        margin-right: 0.5rem;
+        user-select: none;
+      }
+  
+      > div {
+        flex: 1 1 auto;
+      }
+    }
+  
+    input[type="checkbox"] {
+      cursor: pointer;
+    }
   }
 }
diff --git a/demos/src/Examples/Tasks/Vue/index.vue b/demos/src/Examples/Tasks/Vue/index.vue
index 42235a4b0..1d5fc9b3b 100644
--- a/demos/src/Examples/Tasks/Vue/index.vue
+++ b/demos/src/Examples/Tasks/Vue/index.vue
@@ -59,27 +59,48 @@ export default {
 </script>
 
 <style lang="scss">
-ul[data-type="taskList"] {
-  list-style: none;
-  padding: 0;
+/* Basic editor styles */
+.tiptap {
+  :first-child {
+    margin-top: 0;
+  }
 
-  li {
-    display: flex;
-    align-items: center;
+  /* List styles */
+  ul,
+  ol {
+    padding: 0 1rem;
+    margin: 1.25rem 1rem 1.25rem 0.4rem;
 
-    > label {
-      flex: 0 0 auto;
-      margin-right: 0.5rem;
-      user-select: none;
-    }
-
-    > div {
-      flex: 1 1 auto;
+    li p {
+      margin-top: 0.25em;
+      margin-bottom: 0.25em;
     }
   }
 
-  input[type="checkbox"] {
-    cursor: pointer;
+  /* Task list specific styles */
+  ul[data-type="taskList"] {
+    list-style: none;
+    margin-left: 0;
+    padding: 0;
+
+    li {
+      align-items: center;
+      display: flex;
+
+      > label {
+        flex: 0 0 auto;
+        margin-right: 0.5rem;
+        user-select: none;
+      }
+
+      > div {
+        flex: 1 1 auto;
+      }
+    }
+
+    input[type="checkbox"] {
+      cursor: pointer;
+    }
   }
 }
 </style>
diff --git a/demos/src/Experiments/All/Vue/index.vue b/demos/src/Experiments/All/Vue/index.vue
index b08001079..ee93e25aa 100644
--- a/demos/src/Experiments/All/Vue/index.vue
+++ b/demos/src/Experiments/All/Vue/index.vue
@@ -1,69 +1,71 @@
 <template>
-  <div>
-    <div v-if="editor" class="menu">
-      <button @click="editor.chain().focus().toggleBold().run()" :class="{ 'is-active': editor.isActive('bold') }">
-        bold
-      </button>
-      <button @click="editor.chain().focus().toggleItalic().run()" :class="{ 'is-active': editor.isActive('italic') }">
-        italic
-      </button>
-      <button @click="editor.chain().focus().toggleStrike().run()" :class="{ 'is-active': editor.isActive('strike') }">
-        strike
-      </button>
-      <button @click="editor.chain().focus().toggleCode().run()" :class="{ 'is-active': editor.isActive('code') }">
-        code
-      </button>
-      <button @click="editor.chain().focus().unsetAllMarks().run()">
-        clear marks
-      </button>
-      <button @click="editor.chain().focus().clearNodes().run()">
-        clear nodes
-      </button>
-      <button @click="editor.chain().focus().setParagraph().run()" :class="{ 'is-active': editor.isActive('paragraph') }">
-        paragraph
-      </button>
-      <button @click="editor.chain().focus().toggleHeading({ level: 1 }).run()" :class="{ 'is-active': editor.isActive('heading', { level: 1 }) }">
-        h1
-      </button>
-      <button @click="editor.chain().focus().toggleHeading({ level: 2 }).run()" :class="{ 'is-active': editor.isActive('heading', { level: 2 }) }">
-        h2
-      </button>
-      <button @click="editor.chain().focus().toggleHeading({ level: 3 }).run()" :class="{ 'is-active': editor.isActive('heading', { level: 3 }) }">
-        h3
-      </button>
-      <button @click="editor.chain().focus().toggleHeading({ level: 4 }).run()" :class="{ 'is-active': editor.isActive('heading', { level: 4 }) }">
-        h4
-      </button>
-      <button @click="editor.chain().focus().toggleHeading({ level: 5 }).run()" :class="{ 'is-active': editor.isActive('heading', { level: 5 }) }">
-        h5
-      </button>
-      <button @click="editor.chain().focus().toggleHeading({ level: 6 }).run()" :class="{ 'is-active': editor.isActive('heading', { level: 6 }) }">
-        h6
-      </button>
-      <button @click="editor.chain().focus().toggleBulletList().run()" :class="{ 'is-active': editor.isActive('bulletList') }">
-        bullet list
-      </button>
-      <button @click="editor.chain().focus().toggleOrderedList().run()" :class="{ 'is-active': editor.isActive('orderedList') }">
-        ordered list
-      </button>
-      <button @click="editor.chain().focus().toggleCodeBlock().run()" :class="{ 'is-active': editor.isActive('codeBlock') }">
-        code block
-      </button>
-      <button @click="editor.chain().focus().toggleBlockquote().run()" :class="{ 'is-active': editor.isActive('blockquote') }">
-        blockquote
-      </button>
-      <button @click="editor.chain().focus().setHorizontalRule().run()">
-        horizontal rule
-      </button>
-      <button @click="editor.chain().focus().setHardBreak().run()">
-        hard break
-      </button>
-      <button @click="editor.chain().focus().undo().run()">
-        undo
-      </button>
-      <button @click="editor.chain().focus().redo().run()">
-        redo
-      </button>
+  <div v-if="editor" class="container">
+    <div class="control-group">
+      <div class="button-group">
+        <button @click="editor.chain().focus().toggleBold().run()" :class="{ 'is-active': editor.isActive('bold') }">
+          Bold
+        </button>
+        <button @click="editor.chain().focus().toggleItalic().run()" :class="{ 'is-active': editor.isActive('italic') }">
+          Italic
+        </button>
+        <button @click="editor.chain().focus().toggleStrike().run()" :class="{ 'is-active': editor.isActive('strike') }">
+          Strike
+        </button>
+        <button @click="editor.chain().focus().toggleCode().run()" :class="{ 'is-active': editor.isActive('code') }">
+          Code
+        </button>
+        <button @click="editor.chain().focus().unsetAllMarks().run()">
+          Clear marks
+        </button>
+        <button @click="editor.chain().focus().clearNodes().run()">
+          Clear nodes
+        </button>
+        <button @click="editor.chain().focus().setParagraph().run()" :class="{ 'is-active': editor.isActive('paragraph') }">
+          Paragraph
+        </button>
+        <button @click="editor.chain().focus().toggleHeading({ level: 1 }).run()" :class="{ 'is-active': editor.isActive('heading', { level: 1 }) }">
+          H1
+        </button>
+        <button @click="editor.chain().focus().toggleHeading({ level: 2 }).run()" :class="{ 'is-active': editor.isActive('heading', { level: 2 }) }">
+          H2
+        </button>
+        <button @click="editor.chain().focus().toggleHeading({ level: 3 }).run()" :class="{ 'is-active': editor.isActive('heading', { level: 3 }) }">
+          H3
+        </button>
+        <button @click="editor.chain().focus().toggleHeading({ level: 4 }).run()" :class="{ 'is-active': editor.isActive('heading', { level: 4 }) }">
+          H4
+        </button>
+        <button @click="editor.chain().focus().toggleHeading({ level: 5 }).run()" :class="{ 'is-active': editor.isActive('heading', { level: 5 }) }">
+          H5
+        </button>
+        <button @click="editor.chain().focus().toggleHeading({ level: 6 }).run()" :class="{ 'is-active': editor.isActive('heading', { level: 6 }) }">
+          h6
+        </button>
+        <button @click="editor.chain().focus().toggleBulletList().run()" :class="{ 'is-active': editor.isActive('bulletList') }">
+          Bullet list
+        </button>
+        <button @click="editor.chain().focus().toggleOrderedList().run()" :class="{ 'is-active': editor.isActive('orderedList') }">
+          Ordered list
+        </button>
+        <button @click="editor.chain().focus().toggleCodeBlock().run()" :class="{ 'is-active': editor.isActive('codeBlock') }">
+          Code block
+        </button>
+        <button @click="editor.chain().focus().toggleBlockquote().run()" :class="{ 'is-active': editor.isActive('blockquote') }">
+          Blockquote
+        </button>
+        <button @click="editor.chain().focus().setHorizontalRule().run()">
+          Horizontal rule
+        </button>
+        <button @click="editor.chain().focus().setHardBreak().run()">
+          Hard break
+        </button>
+        <button @click="editor.chain().focus().undo().run()">
+          Undo
+        </button>
+        <button @click="editor.chain().focus().redo().run()">
+          Redo
+        </button>
+      </div>
     </div>
     <editor-content :editor="editor" />
   </div>
@@ -176,7 +178,7 @@ export default {
           Hi there,
         </h2>
         <p>
-          this is a <em>basic</em> example of <strong>tiptap</strong>. Sure, there are all kind of basic text styles you’d probably expect from a text editor. But wait until you see the lists:
+          this is a <em>basic</em> example of <strong>Tiptap</strong>. Sure, there are all kind of basic text styles you’d probably expect from a text editor. But wait until you see the lists:
         </p>
         <ul>
           <li>
@@ -232,26 +234,26 @@ export default {
             </tr>
             <tr>
               <td>Cyndi Lauper</td>
-              <td>singer</td>
-              <td>songwriter</td>
-              <td>actress</td>
+              <td>Singer</td>
+              <td>Songwriter</td>
+              <td>Actress</td>
             </tr>
             <tr>
               <td>Marie Curie</td>
-              <td>scientist</td>
-              <td>chemist</td>
-              <td>physicist</td>
+              <td>Scientist</td>
+              <td>Chemist</td>
+              <td>Physicist</td>
             </tr>
             <tr>
               <td>Indira Gandhi</td>
-              <td>prime minister</td>
-              <td colspan="2">politician</td>
+              <td>Prime minister</td>
+              <td colspan="2">Politician</td>
             </tr>
           </tbody>
         </table>
         <p>This is a basic example of implementing images. Drag to re-order.</p>
-        <img src="https://source.unsplash.com/8xznAGy4HcY/800x400" />
-        <img src="https://source.unsplash.com/K9QHL52rE2k/800x400" />
+        <img src="https://placehold.co/800x400" />
+        <img src="https://placehold.co/800x400/6A00F5/white" />
       `,
     })
   },
@@ -263,16 +265,73 @@ export default {
 </script>
 
 <style lang="scss">
+/* Basic editor styles */
 .tiptap {
-  > * + * {
-    margin-top: 0.75em;
+  :first-child {
+    margin-top: 0;
   }
 
+  /* Placeholder (on every new line) */
+  .is-empty::before {
+    color: var(--gray-4);
+    content: attr(data-placeholder);
+    float: left;
+    height: 0;
+    pointer-events: none;
+  }
+
+  a {
+    color: var(--purple);
+    cursor: pointer;
+
+    &:hover {
+      color: var(--purple-contrast);
+    }
+  }
+
+  /* List styles */
   ul,
   ol {
     padding: 0 1rem;
+    margin: 1.25rem 1rem 1.25rem 0.4rem;
+
+    li p {
+      margin-top: 0.25em;
+      margin-bottom: 0.25em;
+    }
   }
 
+  /* Task list specific styles */
+  ul[data-type="taskList"] {
+    list-style: none;
+    margin-left: 0;
+    padding: 0;
+
+    li {
+      align-items: flex-start;
+      display: flex;
+
+      > label {
+        flex: 0 0 auto;
+        margin-right: 0.5rem;
+        user-select: none;
+      }
+
+      > div {
+        flex: 1 1 auto;
+      }
+    }
+
+    input[type="checkbox"] {
+      cursor: pointer;
+    }
+
+    ul[data-type="taskList"] {
+      margin: 0;
+    }
+  }
+
+  /* Heading styles */
   h1,
   h2,
   h3,
@@ -280,27 +339,64 @@ export default {
   h5,
   h6 {
     line-height: 1.1;
+    margin-top: 2.5rem;
+    text-wrap: pretty;
   }
 
+  h1,
+  h2 {
+    margin-top: 3.5rem;
+    margin-bottom: 1.5rem;
+  }
+
+  h1 {
+    font-size: 1.4rem;
+  }
+
+  h2 {
+    font-size: 1.2rem;
+  }
+
+  h3 {
+    font-size: 1.1rem;
+  }
+
+  h4,
+  h5,
+  h6 {
+    font-size: 1rem;
+  }
+
+  /* Display empty p */
+  p:empty::before {
+    content: '\00a0';
+  }
+
+  /* Code and preformatted text styles */
   code {
-    background-color: rgba(#616161, 0.1);
-    color: #616161;
+    background-color: var(--purple-light);
+    border-radius: 0.4rem;
+    color: var(--black);
+    font-size: 0.85rem;
+    padding: 0.25em 0.3em;
   }
 
   pre {
-    background: #0D0D0D;
-    color: #FFF;
-    font-family: 'JetBrainsMono', monospace;
-    padding: 0.75rem 1rem;
+    background: var(--black);
     border-radius: 0.5rem;
+    color: var(--white);
+    font-family: 'JetBrainsMono', monospace;
+    margin: 1.5rem 0;
+    padding: 0.75rem 1rem;
 
     code {
-      color: inherit;
-      padding: 0;
       background: none;
+      color: inherit;
       font-size: 0.8rem;
+      padding: 0;
     }
 
+    /* Code styling */
     .hljs-comment,
     .hljs-quote {
       color: #616161;
@@ -316,7 +412,7 @@ export default {
     .hljs-name,
     .hljs-selector-id,
     .hljs-selector-class {
-      color: #F98181;
+      color: #f98181;
     }
 
     .hljs-number,
@@ -326,23 +422,23 @@ export default {
     .hljs-literal,
     .hljs-type,
     .hljs-params {
-      color: #FBBC88;
+      color: #fbbc88;
     }
 
     .hljs-string,
     .hljs-symbol,
     .hljs-bullet {
-      color: #B9F18D;
+      color: #b9f18d;
     }
 
     .hljs-title,
     .hljs-section {
-      color: #FAF594;
+      color: #faf594;
     }
 
     .hljs-keyword,
     .hljs-selector-tag {
-      color: #70CFF8;
+      color: #70cff8;
     }
 
     .hljs-emphasis {
@@ -354,37 +450,91 @@ export default {
     }
   }
 
+  .code-block {
+    position: relative;
+
+    select {
+      position: absolute;
+      background-color: var(--white);
+      background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path fill="Black" d="M7 10l5 5 5-5z"/></svg>');
+      right: 0.5rem;
+      top: 0.5rem;
+    }
+  }
+
+  mark {
+    background-color: #FAF594;
+    border-radius: 0.4rem;
+    box-decoration-break: clone;
+    padding: 0.1rem 0.3rem;
+  }
+
   img {
-    max-width: 100%;
+    display: block;
     height: auto;
+    margin: 1.5rem 0;
+    max-width: 100%;
+
+    &.ProseMirror-selectednode {
+      outline: 3px solid var(--purple);
+      transition: outline 0.15s;
+    }
   }
 
   blockquote {
+    border-left: 3px solid var(--gray-3);
+    margin: 1.5rem 0;
     padding-left: 1rem;
-    border-left: 2px solid rgba(#0D0D0D, 0.1);
   }
 
   hr {
     border: none;
-    border-top: 2px solid rgba(#0D0D0D, 0.1);
+    border-top: 1px solid var(--gray-2);
     margin: 2rem 0;
   }
 
+  .mention {
+    background-color: var(--purple-light);
+    border-radius: 0.4rem;
+    box-decoration-break: clone;
+    color: var(--purple);
+    padding: 0.1rem 0.3rem;
+  }
+
+  /* Color swatches */
+  .color {
+    white-space: nowrap;
+
+    &::before {
+      background-color: var(--color);
+      border: 1px solid rgba(128, 128, 128, 0.3);
+      border-radius: 2px;
+      content: " ";
+      display: inline-block;
+      height: 1em;
+      margin-bottom: 0.15em;
+      margin-right: 0.1em;
+      vertical-align: middle;
+      width: 1em;
+    }
+  }
+
+  /* Table-specific styling */
   table {
     border-collapse: collapse;
-    table-layout: fixed;
-    width: 100%;
     margin: 0;
     overflow: hidden;
+    table-layout: fixed;
+    width: 100%;
 
     td,
     th {
-      min-width: 1em;
-      border: 2px solid #ced4da;
-      padding: 3px 5px;
-      vertical-align: top;
+      border: 1px solid var(--gray-3);
       box-sizing: border-box;
+      min-width: 1em;
+      padding: 6px 8px;
       position: relative;
+      vertical-align: top;
 
       > * {
         margin-bottom: 0;
@@ -392,87 +542,91 @@ export default {
     }
 
     th {
+      background-color: var(--gray-1);
       font-weight: bold;
       text-align: left;
-      background-color: #f1f3f5;
     }
 
     .selectedCell:after {
-      z-index: 2;
-      position: absolute;
+      background: var(--gray-2);
       content: "";
       left: 0; right: 0; top: 0; bottom: 0;
-      background: rgba(200, 200, 255, 0.4);
       pointer-events: none;
+      position: absolute;
+      z-index: 2;
     }
 
     .column-resize-handle {
+      background-color: var(--purple);
+      bottom: -2px;
+      pointer-events: none;
       position: absolute;
       right: -2px;
       top: 0;
-      bottom: -2px;
       width: 4px;
-      background-color: #adf;
-      pointer-events: none;
-    }
-
-    p {
-      margin: 0;
     }
   }
 
-  ul[data-type="taskList"] {
-    list-style: none;
-    padding: 0;
+  .tableWrapper {
+    margin: 1.5rem 0;
+    overflow-x: auto;
+  }
 
-    p {
-      margin: 0;
+  .resize-cursor {
+    cursor: ew-resize;
+    cursor: col-resize;
+  }
+}
+
+/* Floating/Bubble Menus */
+.bubble-menu {
+  background-color: var(--white);
+  border: 1px solid var(--gray-1);
+  border-radius: 0.7rem;
+  box-shadow: var(--shadow);
+  display: flex;
+  padding: 0.2rem;
+
+  button {
+    background-color: unset;
+
+    &:hover {
+      background-color: var(--gray-3);
     }
 
-    li {
-      display: flex;
+    &.is-active {
+      background-color: var(--purple);
 
-      > label {
-        flex: 0 0 auto;
-        margin-right: 0.5rem;
-        user-select: none;
-      }
-
-      > div {
-        flex: 1 1 auto;
+      &:hover {
+        background-color: var(--purple-contrast);
       }
     }
   }
 }
 
-.tiptap p.is-empty::before {
-  content: attr(data-placeholder);
-  float: left;
-  color: #adb5bd;
-  pointer-events: none;
-  height: 0;
-}
+.floating-menu {
+  display: flex;
+  background-color: var(--gray-3);
+  padding: 0.1rem;
+  border-radius: 0.5rem;
 
-.tableWrapper {
-  overflow-x: auto;
-}
+  button {
+    background-color: unset;
+    padding: 0.275rem 0.425rem;
+    border-radius: 0.3rem;
 
-.resize-cursor {
-  cursor: ew-resize;
-  cursor: col-resize;
-}
+    &:hover {
+      background-color: var(--gray-3);
+    }
 
-.mention {
-  border: 1px solid #000;
-  border-radius: 0.4rem;
-  padding: 0.1rem 0.3rem;
-  box-decoration-break: clone;
-}
+    &.is-active {
+      background-color: var(--white);
+      color: var(--purple);
 
-.menu {
-  position: sticky;
-  top: 0;
-  background: #fff;
-  z-index: 1;
+      &:hover {
+        color: var(--purple-contrast);
+      }
+    }
+  }
 }
 </style>
diff --git a/demos/src/Experiments/CollaborationAnnotation/Vue/index.spec.js b/demos/src/Experiments/CollaborationAnnotation/Vue/index.spec.js
index a4c4c907a..e0e7fc2ee 100644
--- a/demos/src/Experiments/CollaborationAnnotation/Vue/index.spec.js
+++ b/demos/src/Experiments/CollaborationAnnotation/Vue/index.spec.js
@@ -15,7 +15,7 @@ context('/src/Experiments/CollaborationAnnotation/Vue/', () => {
     cy.window().then(win => {
       cy.stub(win, 'prompt', () => 'This is a test comment')
       cy.get('.editor-1 .tiptap').type('{selectall}{backspace}Hello world{selectall}')
-      cy.get('button').contains('comment').eq(0).click()
+      cy.get('button').contains('Comment').eq(0).click()
       cy.get('.editor-1 .tiptap').type('{end}')
       cy.get('.tiptap .annotation').should('have.length', 2)
       cy.get('.comment').should('exist').contains('This is a test comment')
@@ -42,11 +42,11 @@ context('/src/Experiments/CollaborationAnnotation/Vue/', () => {
       })
 
       cy.get('.editor-1 .tiptap').type('{selectall}{backspace}Hello world{selectall}')
-      cy.get('button').contains('comment').eq(0).click()
+      cy.get('button').contains('Comment').eq(0).click()
       cy.wait(1000)
       cy.get('.editor-1 .tiptap').find('.annotation').click()
       cy.get('.comment').should('exist').contains('This is a test comment')
-      cy.get('button').contains('update').click()
+      cy.get('button').contains('Update').click()
       cy.wait(1000)
       cy.get('.comment').should('exist').contains('This is the new comment')
     })
@@ -57,11 +57,11 @@ context('/src/Experiments/CollaborationAnnotation/Vue/', () => {
       cy.stub(win, 'prompt', () => 'This is a test comment')
 
       cy.get('.editor-1 .tiptap').type('{selectall}{backspace}Hello world{selectall}')
-      cy.get('button').contains('comment').eq(0).click()
+      cy.get('button').contains('Comment').eq(0).click()
       cy.wait(1000)
       cy.get('.editor-1 .tiptap').find('.annotation').click()
       cy.get('.comment').should('exist').contains('This is a test comment')
-      cy.get('button').contains('remove').click()
+      cy.get('button').contains('Remove').click()
       cy.get('.tiptap .annotation').should('not.exist')
       cy.wait(1000)
       cy.get('.comment').should('not.exist')
diff --git a/demos/src/Experiments/CollaborationAnnotation/Vue/index.vue b/demos/src/Experiments/CollaborationAnnotation/Vue/index.vue
index abff9bbd6..bb71f77f0 100644
--- a/demos/src/Experiments/CollaborationAnnotation/Vue/index.vue
+++ b/demos/src/Experiments/CollaborationAnnotation/Vue/index.vue
@@ -1,31 +1,38 @@
 <template>
   <div>
-    <div v-if="editor">
-      <h2>
-        Original Editor
-      </h2>
-      <button @click="addComment" :disabled="!editor.can().addAnnotation()">
-        comment
-      </button>
+    <div v-if="editor" class="container">
+      <div class="control-group">
+        <h2>Original Editor</h2>
+        <div class="button-group">
+          <button @click="addComment" :disabled="!editor.can().addAnnotation()">
+            Comment
+          </button>
+        </div>
+      </div>
       <editor-content class="editor-1" :editor="editor" />
-      <div class="comment" v-for="comment in comments" :key="comment.id">
+
+      <div class="output-group" v-for="comment in comments" :key="comment.id">
         {{ comment }}
 
-        <button @click="updateComment(comment.id)">
-          update
-        </button>
+        <div class="button-group">
+          <button @click="updateComment(comment.id)">
+            Update
+          </button>
 
-        <button @click="deleteComment(comment.id)">
-          remove
-        </button>
+          <button @click="deleteComment(comment.id)">
+            Remove
+          </button>
+        </div>
       </div>
 
-      <h2>
-        Another Editor
-      </h2>
-      <button @click="addAnotherComment" :disabled="!anotherEditor.can().addAnnotation()">
-        comment
-      </button>
+      <div class="control-group">
+        <h2>Another Editor</h2>
+        <div class="button-group">
+          <button @click="addAnotherComment" :disabled="!anotherEditor.can().addAnnotation()">
+            Comment
+          </button>
+        </div>
+      </div>
       <editor-content class="editor-2" :editor="anotherEditor" />
     </div>
   </div>
@@ -80,7 +87,7 @@ export default {
           Annotations can be used to add additional information to the content, for example comments. They live on a different level than the actual editor content.
         </p>
         <p>
-          This example allows you to add plain text, but you’re free to add more complex data, for example JSON from another tiptap instance. :-)
+          This example allows you to add plain text, but you’re free to add more complex data, for example JSON from another Tiptap instance. :-)
         </p>
       `,
     })
@@ -138,8 +145,44 @@ export default {
 <style lang="scss">
 /* Basic editor styles */
 .tiptap {
-  > * + * {
-    margin-top: 0.75em;
+  :first-child {
+    margin-top: 0;
+  }
+
+  /* Heading styles */
+  h1,
+  h2,
+  h3,
+  h4,
+  h5,
+  h6 {
+    line-height: 1.1;
+    margin-top: 2.5rem;
+    text-wrap: pretty;
+  }
+
+  h1,
+  h2 {
+    margin-top: 3.5rem;
+    margin-bottom: 1.5rem;
+  }
+
+  h1 {
+    font-size: 1.4rem;
+  }
+
+  h2 {
+    font-size: 1.2rem;
+  }
+
+  h3 {
+    font-size: 1.1rem;
+  }
+
+  h4,
+  h5,
+  h6 {
+    font-size: 1rem;
   }
 }
 
diff --git a/demos/src/Experiments/Commands/Vue/CommandsList.vue b/demos/src/Experiments/Commands/Vue/CommandsList.vue
index 87ce1178e..dd5731e6b 100644
--- a/demos/src/Experiments/Commands/Vue/CommandsList.vue
+++ b/demos/src/Experiments/Commands/Vue/CommandsList.vue
@@ -1,14 +1,13 @@
 <template>
-  <div class="items">
+  <div class="dropdown-menu">
     <template v-if="items.length">
       <button
-        class="item"
         :class="{ 'is-selected': index === selectedIndex }"
         v-for="(item, index) in items"
         :key="index"
         @click="selectItem(index)"
       >
-        {{ item }}
+        {{ item.title }}
       </button>
     </template>
     <div class="item" v-else>
@@ -87,32 +86,35 @@ export default {
 </script>
 
 <style lang="scss">
-.items {
-  padding: 0.2rem;
+/* Dropdown menu */
+.dropdown-menu {
+  background: var(--white);
+  border: 1px solid var(--gray-1);
+  border-radius: 0.7rem;
+  box-shadow: var(--shadow);
+  display: flex;
+  flex-direction: column;
+  gap: 0.1rem;
+  overflow: auto;
+  padding: 0.4rem;
   position: relative;
-  border-radius: 0.5rem;
-  background: #FFF;
-  color: rgba(0, 0, 0, 0.8);
-  overflow: hidden;
-  font-size: 0.9rem;
-  box-shadow:
-    0 0 0 1px rgba(0, 0, 0, 0.05),
-    0px 10px 20px rgba(0, 0, 0, 0.1),
-  ;
-}
 
-.item {
-  display: block;
-  margin: 0;
-  width: 100%;
-  text-align: left;
-  background: transparent;
-  border-radius: 0.4rem;
-  border: 1px solid transparent;
-  padding: 0.2rem 0.4rem;
+  button {
+    align-items: center;
+    background-color: transparent;
+    display: flex;
+    gap: 0.25rem;
+    text-align: left;
+    width: 100%;
 
-  &.is-selected {
-    border-color: #000;
+    &:hover,
+    &:hover.is-selected {
+      background-color: var(--gray-3);
+    }
+
+    &.is-selected {
+      background-color: var(--gray-2);
+    }
   }
 }
 </style>
diff --git a/demos/src/Experiments/Commands/Vue/index.spec.js b/demos/src/Experiments/Commands/Vue/index.spec.js
index 1460ee071..8f310f279 100644
--- a/demos/src/Experiments/Commands/Vue/index.spec.js
+++ b/demos/src/Experiments/Commands/Vue/index.spec.js
@@ -19,8 +19,8 @@ context('/src/Experiments/Commands/Vue/', () => {
 
     items.forEach((item, i) => {
       cy.get('.tiptap').type('{selectall}{backspace}/')
-      cy.get('.tippy-content .items').should('exist')
-      cy.get('.tippy-content .items .item').eq(i).click()
+      cy.get('.tippy-content .dropdown-menu').should('exist')
+      cy.get('.tippy-content .dropdown-menu button').eq(i).click()
       cy.get('.tiptap').type(`I am a ${item.tag}`)
       cy.get(`.tiptap ${item.tag}`).should('exist').should('have.text', `I am a ${item.tag}`)
     })
@@ -28,17 +28,17 @@ context('/src/Experiments/Commands/Vue/', () => {
 
   it('should close the popup without any command via esc', () => {
     cy.get('.tiptap').type('{selectall}{backspace}/')
-    cy.get('.tippy-content .items').should('exist')
+    cy.get('.tippy-content .dropdown-menu').should('exist')
     cy.get('.tiptap').type('{esc}')
-    cy.get('.tippy-content .items').should('not.exist')
+    cy.get('.tippy-content .dropdown-menu').should('not.exist')
   })
 
   it('should open the popup when the cursor is after a slash', () => {
     cy.get('.tiptap').type('{selectall}{backspace}/')
-    cy.get('.tippy-content .items').should('exist')
+    cy.get('.tippy-content .dropdown-menu').should('exist')
     cy.get('.tiptap').type('{leftArrow}')
-    cy.get('.tippy-content .items').should('not.exist')
+    cy.get('.tippy-content .dropdown-menu').should('not.exist')
     cy.get('.tiptap').type('{rightArrow}')
-    cy.get('.tippy-content .items').should('exist')
+    cy.get('.tippy-content .dropdown-menu').should('exist')
   })
 })
diff --git a/demos/src/Experiments/Commands/Vue/index.vue b/demos/src/Experiments/Commands/Vue/index.vue
index ffd760547..74f240b7e 100644
--- a/demos/src/Experiments/Commands/Vue/index.vue
+++ b/demos/src/Experiments/Commands/Vue/index.vue
@@ -45,16 +45,95 @@ export default {
 </script>
 
 <style lang="scss">
+/* Basic editor styles */
 .tiptap {
-  > * + * {
-    margin-top: 0.75em;
+  :first-child {
+    margin-top: 0;
+  }
+
+  /* List styles */
+  ul,
+  ol {
+    padding: 0 1rem;
+    margin: 1.25rem 1rem 1.25rem 0.4rem;
+
+    li p {
+      margin-top: 0.25em;
+      margin-bottom: 0.25em;
+    }
+  }
+
+  /* Heading styles */
+  h1,
+  h2,
+  h3,
+  h4,
+  h5,
+  h6 {
+    line-height: 1.1;
+    margin-top: 2.5rem;
+    text-wrap: pretty;
+  }
+
+  h1,
+  h2 {
+    margin-top: 3.5rem;
+    margin-bottom: 1.5rem;
+  }
+
+  h1 {
+    font-size: 1.4rem;
+  }
+
+  h2 {
+    font-size: 1.2rem;
+  }
+
+  h3 {
+    font-size: 1.1rem;
+  }
+
+  h4,
+  h5,
+  h6 {
+    font-size: 1rem;
+  }
+
+  /* Code and preformatted text styles */
+  code {
+    background-color: var(--purple-light);
+    border-radius: 0.4rem;
+    color: var(--black);
+    font-size: 0.85rem;
+    padding: 0.25em 0.3em;
+  }
+
+  pre {
+    background: var(--black);
+    border-radius: 0.5rem;
+    color: var(--white);
+    font-family: 'JetBrainsMono', monospace;
+    margin: 1.5rem 0;
+    padding: 0.75rem 1rem;
+
+    code {
+      background: none;
+      color: inherit;
+      font-size: 0.8rem;
+      padding: 0;
+    }
+  }
+
+  blockquote {
+    border-left: 3px solid var(--gray-3);
+    margin: 1.5rem 0;
+    padding-left: 1rem;
+  }
+
+  hr {
+    border: none;
+    border-top: 1px solid var(--gray-2);
+    margin: 2rem 0;
   }
 }
-
-.mention {
-  border: 1px solid #000;
-  border-radius: 0.4rem;
-  padding: 0.1rem 0.3rem;
-  box-decoration-break: clone;
-}
 </style>
diff --git a/demos/src/Experiments/Commands/Vue/suggestion.js b/demos/src/Experiments/Commands/Vue/suggestion.js
index cfc28aad9..a83a81127 100644
--- a/demos/src/Experiments/Commands/Vue/suggestion.js
+++ b/demos/src/Experiments/Commands/Vue/suggestion.js
@@ -7,7 +7,7 @@ export default {
   items: ({ query }) => {
     return [
       {
-        title: 'H1',
+        title: 'Heading 1',
         command: ({ editor, range }) => {
           editor
             .chain()
@@ -18,7 +18,7 @@ export default {
         },
       },
       {
-        title: 'H2',
+        title: 'Heading 2',
         command: ({ editor, range }) => {
           editor
             .chain()
@@ -29,7 +29,7 @@ export default {
         },
       },
       {
-        title: 'bold',
+        title: 'Bold',
         command: ({ editor, range }) => {
           editor
             .chain()
@@ -40,7 +40,7 @@ export default {
         },
       },
       {
-        title: 'italic',
+        title: 'Italic',
         command: ({ editor, range }) => {
           editor
             .chain()
diff --git a/demos/src/Experiments/DestroyingEditor/Vue/index.vue b/demos/src/Experiments/DestroyingEditor/Vue/index.vue
index a878a34ba..ea54b19ae 100644
--- a/demos/src/Experiments/DestroyingEditor/Vue/index.vue
+++ b/demos/src/Experiments/DestroyingEditor/Vue/index.vue
@@ -1,9 +1,11 @@
 <template>
-  <div v-if="editor">
-    <button @click="() => editor.chain().toggleBold().focus().run()">Make bold</button>
-    <button @click="() => editor.destroy()">Destroy editor</button>
-  </div>
-  <div v-if="editor">
+  <div v-if="editor" class="container">
+    <div class="control-group">
+      <div class="button-group">
+        <button @click="() => editor.chain().toggleBold().focus().run()">Make bold</button>
+        <button @click="() => editor.destroy()">Destroy editor</button>
+      </div>
+    </div>
     <editor-content :editor="editor" />
   </div>
 </template>
@@ -41,9 +43,95 @@ export default {
 </script>
 
 <style lang="scss">
+/* Basic editor styles */
 .tiptap {
-  > * + * {
-    margin-top: 0.75em;
+  :first-child {
+    margin-top: 0;
+  }
+
+  /* List styles */
+  ul,
+  ol {
+    padding: 0 1rem;
+    margin: 1.25rem 1rem 1.25rem 0.4rem;
+
+    li p {
+      margin-top: 0.25em;
+      margin-bottom: 0.25em;
+    }
+  }
+
+  /* Heading styles */
+  h1,
+  h2,
+  h3,
+  h4,
+  h5,
+  h6 {
+    line-height: 1.1;
+    margin-top: 2.5rem;
+    text-wrap: pretty;
+  }
+
+  h1,
+  h2 {
+    margin-top: 3.5rem;
+    margin-bottom: 1.5rem;
+  }
+
+  h1 {
+    font-size: 1.4rem;
+  }
+
+  h2 {
+    font-size: 1.2rem;
+  }
+
+  h3 {
+    font-size: 1.1rem;
+  }
+
+  h4,
+  h5,
+  h6 {
+    font-size: 1rem;
+  }
+
+  /* Code and preformatted text styles */
+  code {
+    background-color: var(--purple-light);
+    border-radius: 0.4rem;
+    color: var(--black);
+    font-size: 0.85rem;
+    padding: 0.25em 0.3em;
+  }
+
+  pre {
+    background: var(--black);
+    border-radius: 0.5rem;
+    color: var(--white);
+    font-family: 'JetBrainsMono', monospace;
+    margin: 1.5rem 0;
+    padding: 0.75rem 1rem;
+
+    code {
+      background: none;
+      color: inherit;
+      font-size: 0.8rem;
+      padding: 0;
+    }
+  }
+
+  blockquote {
+    border-left: 3px solid var(--gray-3);
+    margin: 1.5rem 0;
+    padding-left: 1rem;
+  }
+
+  hr {
+    border: none;
+    border-top: 1px solid var(--gray-2);
+    margin: 2rem 0;
   }
 }
 </style>
diff --git a/demos/src/Experiments/Embeds/Vue/index.vue b/demos/src/Experiments/Embeds/Vue/index.vue
index 1674afed3..390cbf097 100644
--- a/demos/src/Experiments/Embeds/Vue/index.vue
+++ b/demos/src/Experiments/Embeds/Vue/index.vue
@@ -1,9 +1,12 @@
 <template>
-  <div v-if="editor">
-    <button @click="addIframe">
-      add iframe
-    </button>
-
+  <div v-if="editor" class="container">
+    <div class="control-group">
+      <div class="button-group">
+        <button @click="addIframe">
+          Add iFrame
+        </button>
+      </div>
+    </div>
     <editor-content :editor="editor" />
   </div>
 </template>
diff --git a/demos/src/Experiments/ExtensionStorage/React/index.jsx b/demos/src/Experiments/ExtensionStorage/React/index.jsx
index edb3dcf67..010a88c78 100644
--- a/demos/src/Experiments/ExtensionStorage/React/index.jsx
+++ b/demos/src/Experiments/ExtensionStorage/React/index.jsx
@@ -18,7 +18,7 @@ export default () => {
     ],
     content: `
       <p>
-        This is a radically reduced version of tiptap. It has support for a document, with paragraphs and text. That’s it. It’s probably too much for real minimalists though.
+        This is a radically reduced version of Tiptap. It has support for a document, with paragraphs and text. That’s it. It’s probably too much for real minimalists though.
       </p>
       <p>
         The paragraph extension is not really required, but you need at least one node. Sure, that node can be something different.
@@ -28,8 +28,10 @@ export default () => {
 
   return (
     <>
-      reactive storage: {editor?.storage.custom.foo}
       <EditorContent editor={editor} />
+      <div className="output-group">
+        Reactive storage: {editor?.storage.custom.foo}
+      </div>
     </>
   )
 }
diff --git a/demos/src/Experiments/ExtensionStorage/React/styles.scss b/demos/src/Experiments/ExtensionStorage/React/styles.scss
index 5e207df49..f42af27b1 100644
--- a/demos/src/Experiments/ExtensionStorage/React/styles.scss
+++ b/demos/src/Experiments/ExtensionStorage/React/styles.scss
@@ -1,6 +1,6 @@
 /* Basic editor styles */
 .tiptap {
-  > * + * {
-    margin-top: 0.75em;
+  :first-child {
+    margin-top: 0;
   }
-}
+}
\ No newline at end of file
diff --git a/demos/src/Experiments/ExtensionStorage/Vue/index.vue b/demos/src/Experiments/ExtensionStorage/Vue/index.vue
index 85bfcf2fe..bfde3c9c3 100644
--- a/demos/src/Experiments/ExtensionStorage/Vue/index.vue
+++ b/demos/src/Experiments/ExtensionStorage/Vue/index.vue
@@ -1,6 +1,10 @@
 <template>
-  reactive storage: {{ editor?.storage.custom.foo }}
-  <editor-content :editor="editor" />
+  <div class="container">
+    <editor-content :editor="editor" />
+    <div class="output-group">
+      Reactive storage: {{ editor?.storage.custom.foo }}
+    </div>
+  </div>
 </template>
 
 <script>
@@ -32,7 +36,7 @@ export default {
       ],
       content: `
         <p>
-          This is a radically reduced version of tiptap. It has support for a document, with paragraphs and text. That’s it. It’s probably too much for real minimalists though.
+          This is a radically reduced version of Tiptap. It has support for a document, with paragraphs and text. That’s it. It’s probably too much for real minimalists though.
         </p>
         <p>
           The paragraph extension is not really required, but you need at least one node. Sure, that node can be something different.
@@ -50,8 +54,8 @@ export default {
 <style lang="scss">
 /* Basic editor styles */
 .tiptap {
-  > * + * {
-    margin-top: 0.75em;
+  :first-child {
+    margin-top: 0;
   }
 }
 </style>
diff --git a/demos/src/Experiments/Figure/Vue/index.vue b/demos/src/Experiments/Figure/Vue/index.vue
index a8f6074d4..77d8fe1a0 100644
--- a/demos/src/Experiments/Figure/Vue/index.vue
+++ b/demos/src/Experiments/Figure/Vue/index.vue
@@ -1,24 +1,30 @@
 <template>
-  <div v-if="editor">
-    <button @click="addFigure">
-      figure
-    </button>
-    <button
-      @click="editor.chain().focus().imageToFigure().run()"
-      :disabled="!editor.can().imageToFigure()"
-    >
-      image to figure
-    </button>
-    <button
-      @click="editor.chain().focus().figureToImage().run()"
-      :disabled="!editor.can().figureToImage()"
-    >
-      figure to image
-    </button>
+  <div v-if="editor" class="container">
+    <div class="control-group">
+      <div class="button-group">
+        <button @click="addFigure">
+          Add image with caption
+        </button>
+        <button
+          @click="editor.chain().focus().imageToFigure().run()"
+          :disabled="!editor.can().imageToFigure()"
+        >
+          Add caption to image
+        </button>
+        <button
+          @click="editor.chain().focus().figureToImage().run()"
+          :disabled="!editor.can().figureToImage()"
+        >
+          Remove caption from image
+        </button>
+      </div>
+    </div>
     <editor-content :editor="editor" />
 
-    <h2>HTML</h2>
-    {{ editor.getHTML() }}
+    <div class="output-group">
+      <label>HTML</label>
+      <code>{{ editor.getHTML() }}</code>
+    </div>
   </div>
 </template>
 
@@ -65,14 +71,14 @@ export default {
       content: `
         <p>Figure + Figcaption</p>
         <figure>
-          <img src="https://source.unsplash.com/8xznAGy4HcY/800x400" alt="Random photo of something" title="Who’s dat?">
+          <img src="https://placehold.co/800x400/orange/white" alt="Random photo of something" title="Who’s dat?">
           <figcaption>
             <p>Amazing caption</p>
           </figcaption>
         </figure>
-        <img src="https://source.unsplash.com/K9QHL52rE2k/800x400">
-        <img src="https://source.unsplash.com/8xznAGy4HcY/800x400">
-        <img src="https://source.unsplash.com/K9QHL52rE2k/800x400">
+        <img src="https://placehold.co/800x400/green/white">
+        <img src="https://placehold.co/800x400/blue/white">
+        <img src="https://placehold.co/800x400/black/white">
         <p>That’s it.</p>
       `,
     })
@@ -85,32 +91,136 @@ export default {
 </script>
 
 <style lang="scss">
+/* Basic editor styles */
 .tiptap {
-  > * + * {
-    margin-top: 0.75em;
+  :first-child {
+    margin-top: 0;
   }
 
-  figure {
-    max-width: 25rem;
-    border: 3px solid #0D0D0D;
-    border-radius: 0.5rem;
-    margin: 1rem 0;
-    padding: 0.5rem;
+  /* List styles */
+  ul,
+  ol {
+    padding: 0 1rem;
+    margin: 1.25rem 1rem 1.25rem 0.4rem;
+
+    li p {
+      margin-top: 0.25em;
+      margin-bottom: 0.25em;
+    }
   }
 
-  figcaption {
-    margin-top: 0.25rem;
-    text-align: center;
-    padding: 0.5rem;
-    border: 2px dashed #0D0D0D20;
+  /* Heading styles */
+  h1,
+  h2,
+  h3,
+  h4,
+  h5,
+  h6 {
+    line-height: 1.1;
+    margin-top: 2.5rem;
+    text-wrap: pretty;
+  }
+
+  h1,
+  h2 {
+    margin-top: 3.5rem;
+    margin-bottom: 1.5rem;
+  }
+
+  h1 {
+    font-size: 1.4rem;
+  }
+
+  h2 {
+    font-size: 1.2rem;
+  }
+
+  h3 {
+    font-size: 1.1rem;
+  }
+
+  h4,
+  h5,
+  h6 {
+    font-size: 1rem;
+  }
+
+  /* Code and preformatted text styles */
+  code {
+    background-color: var(--purple-light);
+    border-radius: 0.4rem;
+    color: var(--black);
+    font-size: 0.85rem;
+    padding: 0.25em 0.3em;
+  }
+
+  pre {
+    background: var(--black);
     border-radius: 0.5rem;
+    color: var(--white);
+    font-family: 'JetBrainsMono', monospace;
+    margin: 1.5rem 0;
+    padding: 0.75rem 1rem;
+
+    code {
+      background: none;
+      color: inherit;
+      font-size: 0.8rem;
+      padding: 0;
+    }
+  }
+
+  blockquote {
+    border-left: 3px solid var(--gray-3);
+    margin: 1.5rem 0;
+    padding-left: 1rem;
+  }
+
+  hr {
+    border: none;
+    border-top: 1px solid var(--gray-2);
+    margin: 2rem 0;
   }
 
   img {
     display: block;
-    max-width: min(100%, 25rem);
     height: auto;
+    margin: 1.5rem 0;
+    max-width: 100%;
+
+    &.ProseMirror-selectednode {
+      outline: 3px solid var(--purple);
+    }
+  }
+
+  /* Figure */
+  figure {
+    align-items: start;
+    border: 2px solid var(--black);
     border-radius: 0.5rem;
+    display: flex;
+    flex-direction: column;
+    gap: 0.5rem;
+    margin: 1rem 0;
+    padding: 0.5rem;
+    width: fit-content;
+
+    > *:not(figcaption) {
+      margin: 0;
+      max-width: 100%;
+    }
+
+    &:has(figcaption:active) {
+      border-color: var(--purple);
+    }
+
+    figcaption {
+      border-radius: 0.5rem;
+      border: 2px dashed #0D0D0D20;
+      padding: 0.5rem;
+      text-align: center;
+      width: 100%;
+    }
   }
 }
 </style>
diff --git a/demos/src/Experiments/GenericFigure/Vue/index.vue b/demos/src/Experiments/GenericFigure/Vue/index.vue
index 6568e34dd..88741b885 100644
--- a/demos/src/Experiments/GenericFigure/Vue/index.vue
+++ b/demos/src/Experiments/GenericFigure/Vue/index.vue
@@ -1,17 +1,21 @@
 <template>
-  <div v-if="editor">
-    <button @click="addCapturedTable">
-      add table
-    </button>
-    <button @click="addCapturedImage">
-      add image
-    </button>
-    <button @click="removeCapturedTable">
-      remove table
-    </button>
-    <button @click="removeCapturedImage">
-      remove image
-    </button>
+  <div v-if="editor" class="container">
+    <div class="control-group">
+      <div class="button-group">
+        <button @click="addCapturedTable">
+          Add table with caption
+        </button>
+        <button @click="addCapturedImage">
+          Add image with caption
+        </button>
+        <button @click="removeCapturedTable">
+          Remove table with caption
+        </button>
+        <button @click="removeCapturedImage">
+          Remove image with caption
+        </button>
+      </div>
+    </div>
     <editor-content :editor="editor" />
   </div>
 </template>
@@ -62,14 +66,14 @@ export default {
               content: [
                 {
                   type: 'text',
-                  text: 'image caption',
+                  text: 'Image caption',
                 },
               ],
             },
             {
               type: 'image',
               attrs: {
-                src: 'https://source.unsplash.com/K9QHL52rE2k/800x400',
+                src: 'https://placehold.co/800x400/orange/white',
               },
             },
           ],
@@ -89,7 +93,7 @@ export default {
               content: [
                 {
                   type: 'text',
-                  text: 'table caption',
+                  text: 'Table caption',
                 },
               ],
             },
@@ -107,7 +111,7 @@ export default {
                           content: [
                             {
                               type: 'text',
-                              text: 'cell 1',
+                              text: 'Cell 1',
                             },
                           ],
                         },
@@ -121,7 +125,7 @@ export default {
                           content: [
                             {
                               type: 'text',
-                              text: 'cell 2',
+                              text: 'Cell 2',
                             },
                           ],
                         },
@@ -172,10 +176,10 @@ export default {
           <figcaption>
             Image caption
           </figcaption>
-          <img src="https://source.unsplash.com/8xznAGy4HcY/800x400" alt="Random photo of something" title="Who’s dat?">
+          <img src="https://placehold.co/800x400/black/white" alt="Random photo of something" title="Who’s dat?">
         </figure>
         <p>Some text</p>
-        <img src="https://source.unsplash.com/K9QHL52rE2k/800x400">
+        <img src="https://placehold.co/800x400">
         <p>Some text</p>
         <figure data-type="capturedTable">
           <figcaption>
@@ -189,20 +193,20 @@ export default {
               </tr>
               <tr>
                 <td>Cyndi Lauper</td>
-                <td>singer</td>
-                <td>songwriter</td>
-                <td>actress</td>
+                <td>Singer</td>
+                <td>Songwriter</td>
+                <td>Actress</td>
               </tr>
               <tr>
                 <td>Marie Curie</td>
-                <td>scientist</td>
-                <td>chemist</td>
-                <td>physicist</td>
+                <td>Scientist</td>
+                <td>Chemist</td>
+                <td>Physicist</td>
               </tr>
               <tr>
                 <td>Indira Gandhi</td>
-                <td>prime minister</td>
-                <td colspan="2">politician</td>
+                <td>Prime minister</td>
+                <td colspan="2">Politician</td>
               </tr>
             </tbody>
           </table>
@@ -216,20 +220,20 @@ export default {
             </tr>
             <tr>
               <td>Cyndi Lauper</td>
-              <td>singer</td>
-              <td>songwriter</td>
-              <td>actress</td>
+              <td>Singer</td>
+              <td>Songwriter</td>
+              <td>Actress</td>
             </tr>
             <tr>
               <td>Marie Curie</td>
-              <td>scientist</td>
-              <td>chemist</td>
-              <td>physicist</td>
+              <td>Scientist</td>
+              <td>Chemist</td>
+              <td>Physicist</td>
             </tr>
             <tr>
               <td>Indira Gandhi</td>
-              <td>prime minister</td>
-              <td colspan="2">politician</td>
+              <td>Prime minister</td>
+              <td colspan="2">Politician</td>
             </tr>
           </tbody>
         </table>
@@ -244,57 +248,123 @@ export default {
 </script>
 
 <style lang="scss">
+/* Basic editor styles */
 .tiptap {
-  > * + * {
-    margin-top: 0.75em;
+  :first-child {
+    margin-top: 0;
   }
 
-  figure {
-    max-width: 25rem;
-    border: 3px solid #0D0D0D;
-    border-radius: 0.5rem;
-    margin: 1rem 0;
-    padding: 0.5rem;
+  /* List styles */
+  ul,
+  ol {
+    padding: 0 1rem;
+    margin: 1.25rem 1rem 1.25rem 0.4rem;
+
+    li p {
+      margin-top: 0.25em;
+      margin-bottom: 0.25em;
+    }
   }
 
-  figcaption {
-    margin: 0.25rem 0;
-    text-align: center;
-    padding: 0.5rem;
-    border: 2px dashed #0D0D0D20;
+  /* Heading styles */
+  h1,
+  h2,
+  h3,
+  h4,
+  h5,
+  h6 {
+    line-height: 1.1;
+    margin-top: 2.5rem;
+    text-wrap: pretty;
+  }
+
+  h1,
+  h2 {
+    margin-top: 3.5rem;
+    margin-bottom: 1.5rem;
+  }
+
+  h1 {
+    font-size: 1.4rem;
+  }
+
+  h2 {
+    font-size: 1.2rem;
+  }
+
+  h3 {
+    font-size: 1.1rem;
+  }
+
+  h4,
+  h5,
+  h6 {
+    font-size: 1rem;
+  }
+
+  /* Code and preformatted text styles */
+  code {
+    background-color: var(--purple-light);
+    border-radius: 0.4rem;
+    color: var(--black);
+    font-size: 0.85rem;
+    padding: 0.25em 0.3em;
+  }
+
+  pre {
+    background: var(--black);
     border-radius: 0.5rem;
+    color: var(--white);
+    font-family: 'JetBrainsMono', monospace;
+    margin: 1.5rem 0;
+    padding: 0.75rem 1rem;
 
-    &:first-child {
-      margin-top: 0;
+    code {
+      background: none;
+      color: inherit;
+      font-size: 0.8rem;
+      padding: 0;
     }
+  }
 
-    &:last-child {
-      margin-bottom: 0;
-    }
+  blockquote {
+    border-left: 3px solid var(--gray-3);
+    margin: 1.5rem 0;
+    padding-left: 1rem;
+  }
+
+  hr {
+    border: none;
+    border-top: 1px solid var(--gray-2);
+    margin: 2rem 0;
   }
 
   img {
     display: block;
-    max-width: min(100%, 25rem);
     height: auto;
-    border-radius: 0.5rem;
+    margin: 1.5rem 0;
+    max-width: 100%;
+
+    &.ProseMirror-selectednode {
+      outline: 3px solid var(--purple);
+    }
   }
 
   table {
     border-collapse: collapse;
-    table-layout: fixed;
-    width: 100%;
     margin: 0;
     overflow: hidden;
+    table-layout: fixed;
+    width: 100%;
 
     td,
     th {
-      min-width: 1em;
-      border: 2px solid #ced4da;
-      padding: 3px 5px;
-      vertical-align: top;
+      border: 1px solid var(--gray-3);
       box-sizing: border-box;
+      min-width: 1em;
+      padding: 6px 8px;
       position: relative;
+      vertical-align: top;
 
       > * {
         margin-bottom: 0;
@@ -302,28 +372,68 @@ export default {
     }
 
     th {
+      background-color: var(--gray-1);
       font-weight: bold;
       text-align: left;
-      background-color: #f1f3f5;
     }
 
     .selectedCell:after {
-      z-index: 2;
-      position: absolute;
+      background: var(--gray-2);
       content: "";
       left: 0; right: 0; top: 0; bottom: 0;
-      background: rgba(200, 200, 255, 0.4);
       pointer-events: none;
+      position: absolute;
+      z-index: 2;
     }
 
     .column-resize-handle {
+      background-color: var(--purple);
+      bottom: -2px;
+      pointer-events: none;
       position: absolute;
       right: -2px;
       top: 0;
-      bottom: -2px;
       width: 4px;
-      background-color: #adf;
-      pointer-events: none;
+    }
+  }
+
+  .tableWrapper {
+    margin: 1.5rem 0;
+    overflow-x: auto;
+  }
+
+  .resize-cursor {
+    cursor: ew-resize;
+    cursor: col-resize;
+  }
+
+  /* Figure */
+  figure {
+    align-items: start;
+    border: 2px solid var(--black);
+    border-radius: 0.5rem;
+    display: flex;
+    flex-direction: column;
+    gap: 0.5rem;
+    margin: 1rem 0;
+    padding: 0.5rem;
+    width: fit-content;
+
+    > *:not(figcaption) {
+      margin: 0;
+      max-width: 100%;
+    }
+
+    &:has(figcaption:active) {
+      border-color: var(--purple);
+    }
+
+    figcaption {
+      border-radius: 0.5rem;
+      border: 2px dashed #0D0D0D20;
+      padding: 0.5rem;
+      text-align: center;
+      width: 100%;
     }
   }
 }
diff --git a/demos/src/Experiments/GlobalDragHandle/Vue/index.vue b/demos/src/Experiments/GlobalDragHandle/Vue/index.vue
index 782816b21..8f02c22ef 100644
--- a/demos/src/Experiments/GlobalDragHandle/Vue/index.vue
+++ b/demos/src/Experiments/GlobalDragHandle/Vue/index.vue
@@ -28,14 +28,14 @@ export default {
         DragHandle,
       ],
       content: `
-        <p>paragraph 1</p>
-        <p>paragraph 2</p>
-        <p>paragraph 3</p>
+        <p>Paragraph 1</p>
+        <p>Paragraph 2</p>
+        <p>Paragraph 3</p>
         <ul>
-          <li>list item 1</li>
-          <li>list item 2</li>
+          <li>List item 1</li>
+          <li>List item 2</li>
         </ul>
-        <pre>code</pre>
+        <pre>Code</pre>
       `,
       onUpdate: () => {
         // eslint-disable-next-line
diff --git a/demos/src/Experiments/IsolatingClear/React/index.jsx b/demos/src/Experiments/IsolatingClear/React/index.jsx
index 7298fecfa..9771849c6 100644
--- a/demos/src/Experiments/IsolatingClear/React/index.jsx
+++ b/demos/src/Experiments/IsolatingClear/React/index.jsx
@@ -33,168 +33,170 @@ const MenuBar = ({ editor }) => {
   }
 
   return (
-    <>
-      <button
-        onClick={() => editor.chain().focus().toggleBold().run()}
-        disabled={
-          !editor.can()
-            .chain()
-            .focus()
-            .toggleBold()
-            .run()
-        }
-        className={editor.isActive('bold') ? 'is-active' : ''}
-      >
-        bold
-      </button>
-      <button
-        onClick={() => editor.chain().focus().toggleItalic().run()}
-        disabled={
-          !editor.can()
-            .chain()
-            .focus()
-            .toggleItalic()
-            .run()
-        }
-        className={editor.isActive('italic') ? 'is-active' : ''}
-      >
-        italic
-      </button>
-      <button
-        onClick={() => editor.chain().focus().toggleStrike().run()}
-        disabled={
-          !editor.can()
-            .chain()
-            .focus()
-            .toggleStrike()
-            .run()
-        }
-        className={editor.isActive('strike') ? 'is-active' : ''}
-      >
-        strike
-      </button>
-      <button
-        onClick={() => editor.chain().focus().toggleCode().run()}
-        disabled={
-          !editor.can()
-            .chain()
-            .focus()
-            .toggleCode()
-            .run()
-        }
-        className={editor.isActive('code') ? 'is-active' : ''}
-      >
-        code
-      </button>
-      <button onClick={() => editor.chain().focus().unsetAllMarks().run()}>
-        clear marks
-      </button>
-      <button onClick={() => editor.chain().focus().clearNodes().run()}>
-        clear nodes
-      </button>
-      <button
-        onClick={() => editor.chain().focus().setParagraph().run()}
-        className={editor.isActive('paragraph') ? 'is-active' : ''}
-      >
-        paragraph
-      </button>
-      <button
-        onClick={() => editor.chain().focus().toggleHeading({ level: 1 }).run()}
-        className={editor.isActive('heading', { level: 1 }) ? 'is-active' : ''}
-      >
-        h1
-      </button>
-      <button
-        onClick={() => editor.chain().focus().toggleHeading({ level: 2 }).run()}
-        className={editor.isActive('heading', { level: 2 }) ? 'is-active' : ''}
-      >
-        h2
-      </button>
-      <button
-        onClick={() => editor.chain().focus().toggleHeading({ level: 3 }).run()}
-        className={editor.isActive('heading', { level: 3 }) ? 'is-active' : ''}
-      >
-        h3
-      </button>
-      <button
-        onClick={() => editor.chain().focus().toggleHeading({ level: 4 }).run()}
-        className={editor.isActive('heading', { level: 4 }) ? 'is-active' : ''}
-      >
-        h4
-      </button>
-      <button
-        onClick={() => editor.chain().focus().toggleHeading({ level: 5 }).run()}
-        className={editor.isActive('heading', { level: 5 }) ? 'is-active' : ''}
-      >
-        h5
-      </button>
-      <button
-        onClick={() => editor.chain().focus().toggleHeading({ level: 6 }).run()}
-        className={editor.isActive('heading', { level: 6 }) ? 'is-active' : ''}
-      >
-        h6
-      </button>
-      <button
-        onClick={() => editor.chain().focus().toggleBulletList().run()}
-        className={editor.isActive('bulletList') ? 'is-active' : ''}
-      >
-        bullet list
-      </button>
-      <button
-        onClick={() => editor.chain().focus().toggleOrderedList().run()}
-        className={editor.isActive('orderedList') ? 'is-active' : ''}
-      >
-        ordered list
-      </button>
-      <button
-        onClick={() => editor.chain().focus().toggleCodeBlock().run()}
-        className={editor.isActive('codeBlock') ? 'is-active' : ''}
-      >
-        code block
-      </button>
-      <button
-        onClick={() => editor.chain().focus().toggleBlockquote().run()}
-        className={editor.isActive('blockquote') ? 'is-active' : ''}
-      >
-        blockquote
-      </button>
-      <button onClick={() => editor.chain().focus().setHorizontalRule().run()}>
-        horizontal rule
-      </button>
-      <button onClick={() => editor.chain().focus().setHardBreak().run()}>
-        hard break
-      </button>
-      <button
-        onClick={() => editor.chain().focus().undo().run()}
-        disabled={
-          !editor.can()
-            .chain()
-            .focus()
-            .undo()
-            .run()
-        }
-      >
-        undo
-      </button>
-      <button
-        onClick={() => editor.chain().focus().redo().run()}
-        disabled={
-          !editor.can()
-            .chain()
-            .focus()
-            .redo()
-            .run()
-        }
-      >
-        redo
-      </button>
-      <button
-        onClick={() => editor.chain().focus().setColor('#958DF1').run()}
-        className={editor.isActive('textStyle', { color: '#958DF1' }) ? 'is-active' : ''}
-      >
-        purple
-      </button>
-    </>
+    <div className="control-group">
+      <div className="button-group">
+        <button
+          onClick={() => editor.chain().focus().toggleBold().run()}
+          disabled={
+            !editor.can()
+              .chain()
+              .focus()
+              .toggleBold()
+              .run()
+          }
+          className={editor.isActive('bold') ? 'is-active' : ''}
+        >
+          Bold
+        </button>
+        <button
+          onClick={() => editor.chain().focus().toggleItalic().run()}
+          disabled={
+            !editor.can()
+              .chain()
+              .focus()
+              .toggleItalic()
+              .run()
+          }
+          className={editor.isActive('italic') ? 'is-active' : ''}
+        >
+          Italic
+        </button>
+        <button
+          onClick={() => editor.chain().focus().toggleStrike().run()}
+          disabled={
+            !editor.can()
+              .chain()
+              .focus()
+              .toggleStrike()
+              .run()
+          }
+          className={editor.isActive('strike') ? 'is-active' : ''}
+        >
+          Strike
+        </button>
+        <button
+          onClick={() => editor.chain().focus().toggleCode().run()}
+          disabled={
+            !editor.can()
+              .chain()
+              .focus()
+              .toggleCode()
+              .run()
+          }
+          className={editor.isActive('code') ? 'is-active' : ''}
+        >
+          Code
+        </button>
+        <button onClick={() => editor.chain().focus().unsetAllMarks().run()}>
+          Clear marks
+        </button>
+        <button onClick={() => editor.chain().focus().clearNodes().run()}>
+          Clear nodes
+        </button>
+        <button
+          onClick={() => editor.chain().focus().setParagraph().run()}
+          className={editor.isActive('paragraph') ? 'is-active' : ''}
+        >
+          Paragraph
+        </button>
+        <button
+          onClick={() => editor.chain().focus().toggleHeading({ level: 1 }).run()}
+          className={editor.isActive('heading', { level: 1 }) ? 'is-active' : ''}
+        >
+          H1
+        </button>
+        <button
+          onClick={() => editor.chain().focus().toggleHeading({ level: 2 }).run()}
+          className={editor.isActive('heading', { level: 2 }) ? 'is-active' : ''}
+        >
+          H2
+        </button>
+        <button
+          onClick={() => editor.chain().focus().toggleHeading({ level: 3 }).run()}
+          className={editor.isActive('heading', { level: 3 }) ? 'is-active' : ''}
+        >
+          H3
+        </button>
+        <button
+          onClick={() => editor.chain().focus().toggleHeading({ level: 4 }).run()}
+          className={editor.isActive('heading', { level: 4 }) ? 'is-active' : ''}
+        >
+          H4
+        </button>
+        <button
+          onClick={() => editor.chain().focus().toggleHeading({ level: 5 }).run()}
+          className={editor.isActive('heading', { level: 5 }) ? 'is-active' : ''}
+        >
+          H5
+        </button>
+        <button
+          onClick={() => editor.chain().focus().toggleHeading({ level: 6 }).run()}
+          className={editor.isActive('heading', { level: 6 }) ? 'is-active' : ''}
+        >
+          H6
+        </button>
+        <button
+          onClick={() => editor.chain().focus().toggleBulletList().run()}
+          className={editor.isActive('bulletList') ? 'is-active' : ''}
+        >
+          Bullet list
+        </button>
+        <button
+          onClick={() => editor.chain().focus().toggleOrderedList().run()}
+          className={editor.isActive('orderedList') ? 'is-active' : ''}
+        >
+          Ordered list
+        </button>
+        <button
+          onClick={() => editor.chain().focus().toggleCodeBlock().run()}
+          className={editor.isActive('codeBlock') ? 'is-active' : ''}
+        >
+          Code block
+        </button>
+        <button
+          onClick={() => editor.chain().focus().toggleBlockquote().run()}
+          className={editor.isActive('blockquote') ? 'is-active' : ''}
+        >
+          Blockquote
+        </button>
+        <button onClick={() => editor.chain().focus().setHorizontalRule().run()}>
+          Horizontal rule
+        </button>
+        <button onClick={() => editor.chain().focus().setHardBreak().run()}>
+          Hard break
+        </button>
+        <button
+          onClick={() => editor.chain().focus().undo().run()}
+          disabled={
+            !editor.can()
+              .chain()
+              .focus()
+              .undo()
+              .run()
+          }
+        >
+          Undo
+        </button>
+        <button
+          onClick={() => editor.chain().focus().redo().run()}
+          disabled={
+            !editor.can()
+              .chain()
+              .focus()
+              .redo()
+              .run()
+          }
+        >
+          Redo
+        </button>
+        <button
+          onClick={() => editor.chain().focus().setColor('#958DF1').run()}
+          className={editor.isActive('textStyle', { color: '#958DF1' }) ? 'is-active' : ''}
+        >
+          Purple
+        </button>
+      </div>
+    </div>
   )
 }
 
@@ -210,9 +212,9 @@ export default () => {
   })
 
   return (
-    <div>
+    <>
       <MenuBar editor={editor} />
       <EditorContent editor={editor} />
-    </div>
+    </>
   )
 }
diff --git a/demos/src/Experiments/IsolatingClear/React/index.spec.js b/demos/src/Experiments/IsolatingClear/React/index.spec.js
index b23e72c17..005560dee 100644
--- a/demos/src/Experiments/IsolatingClear/React/index.spec.js
+++ b/demos/src/Experiments/IsolatingClear/React/index.spec.js
@@ -21,41 +21,41 @@ context('/src/Examples/Default/React/', () => {
   })
 
   const buttonMarks = [
-    { label: 'bold', tag: 'strong' },
-    { label: 'italic', tag: 'em' },
-    { label: 'strike', tag: 's' },
+    { label: 'Bold', tag: 'strong' },
+    { label: 'Italic', tag: 'em' },
+    { label: 'Strike', tag: 's' },
   ]
 
   buttonMarks.forEach(m => {
     it(`should disable ${m.label} when the code tag is enabled for cursor`, () => {
       cy.get('.tiptap').type('{selectall}Hello world')
-      cy.get('button').contains('code').click()
+      cy.get('button').contains('Code').click()
       cy.get('button').contains(m.label).should('be.disabled')
     })
 
     it(`should enable ${m.label} when the code tag is disabled for cursor`, () => {
       cy.get('.tiptap').type('{selectall}Hello world')
-      cy.get('button').contains('code').click()
-      cy.get('button').contains('code').click()
+      cy.get('button').contains('Code').click()
+      cy.get('button').contains('Code').click()
       cy.get('button').contains(m.label).should('not.be.disabled')
     })
 
     it(`should disable ${m.label} when the code tag is enabled for selection`, () => {
       cy.get('.tiptap').type('{selectall}Hello world{selectall}')
-      cy.get('button').contains('code').click()
+      cy.get('button').contains('Code').click()
       cy.get('button').contains(m.label).should('be.disabled')
     })
 
     it(`should enable ${m.label} when the code tag is disabled for selection`, () => {
       cy.get('.tiptap').type('{selectall}Hello world{selectall}')
-      cy.get('button').contains('code').click()
-      cy.get('button').contains('code').click()
+      cy.get('button').contains('Code').click()
+      cy.get('button').contains('Code').click()
       cy.get('button').contains(m.label).should('not.be.disabled')
     })
 
     it(`should apply ${m.label} when the button is pressed`, () => {
       cy.get('.tiptap').type('{selectall}Hello world')
-      cy.get('button').contains('paragraph').click()
+      cy.get('button').contains('Paragraph').click()
       cy.get('.tiptap').type('{selectall}')
       cy.get('button').contains(m.label).click()
       cy.get(`.tiptap ${m.tag}`).should('exist').should('have.text', 'Hello world')
@@ -64,40 +64,40 @@ context('/src/Examples/Default/React/', () => {
 
   it('should clear marks when the button is pressed', () => {
     cy.get('.tiptap').type('{selectall}Hello world')
-    cy.get('button').contains('paragraph').click()
+    cy.get('button').contains('Paragraph').click()
     cy.get('.tiptap').type('{selectall}')
-    cy.get('button').contains('bold').click()
+    cy.get('button').contains('Bold').click()
     cy.get('.tiptap strong').should('exist').should('have.text', 'Hello world')
-    cy.get('button').contains('clear marks').click()
+    cy.get('button').contains('Clear marks').click()
     cy.get('.tiptap strong').should('not.exist')
   })
 
   it('should clear nodes when the button is pressed', () => {
     cy.get('.tiptap').type('{selectall}Hello world')
-    cy.get('button').contains('bullet list').click()
+    cy.get('button').contains('Bullet list').click()
     cy.get('.tiptap ul').should('exist').should('have.text', 'Hello world')
     cy.get('.tiptap').type('{enter}A second item{enter}A third item{selectall}')
-    cy.get('button').contains('clear nodes').click()
+    cy.get('button').contains('Clear nodes').click()
     cy.get('.tiptap ul').should('not.exist')
     cy.get('.tiptap p').should('have.length', 3)
   })
 
   const buttonNodes = [
-    { label: 'h1', tag: 'h1' },
-    { label: 'h2', tag: 'h2' },
-    { label: 'h3', tag: 'h3' },
-    { label: 'h4', tag: 'h4' },
-    { label: 'h5', tag: 'h5' },
-    { label: 'h6', tag: 'h6' },
-    { label: 'bullet list', tag: 'ul' },
-    { label: 'ordered list', tag: 'ol' },
-    { label: 'code block', tag: 'pre code' },
-    { label: 'blockquote', tag: 'blockquote' },
+    { label: 'H1', tag: 'h1' },
+    { label: 'H2', tag: 'h2' },
+    { label: 'H3', tag: 'h3' },
+    { label: 'H4', tag: 'h4' },
+    { label: 'H5', tag: 'h5' },
+    { label: 'H6', tag: 'h6' },
+    { label: 'Bullet list', tag: 'ul' },
+    { label: 'Ordered list', tag: 'ol' },
+    { label: 'Code block', tag: 'pre code' },
+    { label: 'Blockquote', tag: 'blockquote' },
   ]
 
   buttonNodes.forEach(n => {
     it(`should set ${n.label} when the button is pressed`, () => {
-      cy.get('button').contains('paragraph').click()
+      cy.get('button').contains('Paragraph').click()
       cy.get('.tiptap').type('{selectall}Hello world{selectall}')
 
       cy.get('button').contains(n.label).click()
@@ -109,35 +109,35 @@ context('/src/Examples/Default/React/', () => {
 
   it('should add a hr when on the same line as a node', () => {
     cy.get('.tiptap').type('{rightArrow}')
-    cy.get('button').contains('horizontal rule').click()
+    cy.get('button').contains('Horizontal rule').click()
     cy.get('.tiptap hr').should('exist')
     cy.get('.tiptap h1').should('exist')
   })
 
   it('should add a hr when on a new line', () => {
     cy.get('.tiptap').type('{rightArrow}{enter}')
-    cy.get('button').contains('horizontal rule').click()
+    cy.get('button').contains('Horizontal rule').click()
     cy.get('.tiptap hr').should('exist')
     cy.get('.tiptap h1').should('exist')
   })
 
   it('should add a br', () => {
     cy.get('.tiptap').type('{rightArrow}')
-    cy.get('button').contains('hard break').click()
+    cy.get('button').contains('Hard break').click()
     cy.get('.tiptap h1 br').should('exist')
   })
 
   it('should undo', () => {
     cy.get('.tiptap').type('{selectall}{backspace}')
-    cy.get('button').contains('undo').click()
+    cy.get('button').contains('Undo').click()
     cy.get('.tiptap').should('contain', 'Hello world')
   })
 
   it('should redo', () => {
     cy.get('.tiptap').type('{selectall}{backspace}')
-    cy.get('button').contains('undo').click()
+    cy.get('button').contains('Undo').click()
     cy.get('.tiptap').should('contain', 'Hello world')
-    cy.get('button').contains('redo').click()
+    cy.get('button').contains('Redo').click()
     cy.get('.tiptap').should('not.contain', 'Hello world')
   })
 })
diff --git a/demos/src/Experiments/IsolatingClear/React/styles.scss b/demos/src/Experiments/IsolatingClear/React/styles.scss
index 61119625f..a55bf759f 100644
--- a/demos/src/Experiments/IsolatingClear/React/styles.scss
+++ b/demos/src/Experiments/IsolatingClear/React/styles.scss
@@ -1,62 +1,99 @@
 /* Basic editor styles */
 .tiptap {
-  > * + * {
-    margin-top: 0.75em;
+  :first-child {
+    margin-top: 0;
   }
 
-  ul,
+  /* List styles */
+  ul, 
   ol {
     padding: 0 1rem;
-  }
-
-  h1,
-  h2,
-  h3,
-  h4,
-  h5,
-  h6 {
-    line-height: 1.1;
-  }
-
-  code {
-    background-color: rgba(#616161, 0.1);
-    color: #616161;
-  }
-
-  pre {
-    background: #0D0D0D;
-    color: #FFF;
-    font-family: 'JetBrainsMono', monospace;
-    padding: 0.75rem 1rem;
-    border-radius: 0.5rem;
-
-    code {
-      color: inherit;
-      padding: 0;
-      background: none;
-      font-size: 0.8rem;
+    margin: 1.25rem 1rem 1.25rem 0.4rem;
+    
+    li p {
+      margin-top: 0.25em;
+      margin-bottom: 0.25em;
     }
   }
 
-  img {
-    max-width: 100%;
-    height: auto;
+  /* Heading styles */
+  h1, 
+  h2, 
+  h3, 
+  h4, 
+  h5, 
+  h6 {
+    line-height: 1.1;
+    margin-top: 2.5rem;
+    text-wrap: pretty;
+  }
+
+  h1, 
+  h2 {
+    margin-top: 3.5rem;
+    margin-bottom: 1.5rem;
+  }
+
+  h1 { 
+    font-size: 1.4rem; 
+  }
+
+  h2 { 
+    font-size: 1.2rem; 
+  }
+
+  h3 { 
+    font-size: 1.1rem; 
+  }
+
+  h4, 
+  h5, 
+  h6 { 
+    font-size: 1rem; 
+  }
+
+  /* Code and preformatted text styles */
+  code {
+    background-color: var(--purple-light);
+    border-radius: 0.4rem;
+    color: var(--black);
+    font-size: 0.85rem;
+    padding: 0.25em 0.3em;
+  }
+
+  pre {
+    background: var(--black);
+    border-radius: 0.5rem;
+    color: var(--white);
+    font-family: 'JetBrainsMono', monospace;
+    margin: 1.5rem 0;
+    padding: 0.75rem 1rem;
+
+    code {
+      background: none;
+      color: inherit;
+      font-size: 0.8rem;
+      padding: 0;
+    }
   }
 
   blockquote {
+    border-left: 3px solid var(--gray-3);
+    margin: 1.5rem 0;
     padding-left: 1rem;
-    border-left: 2px solid rgba(#0D0D0D, 0.1);
   }
 
   hr {
     border: none;
-    border-top: 2px solid rgba(#0D0D0D, 0.1);
+    border-top: 1px solid var(--gray-2);
     margin: 2rem 0;
   }
 
+  /* Demo styles */
   div[data-wrapper-block] {
     border: 2px solid #000;
-    padding: 1rem;
+    border-radius: 0.4rem;
     margin: 1rem 0;
+    padding: 1rem;
   }
 }
diff --git a/demos/src/Experiments/Linter/Vue/index.vue b/demos/src/Experiments/Linter/Vue/index.vue
index d0e5aebd4..632f429f6 100644
--- a/demos/src/Experiments/Linter/Vue/index.vue
+++ b/demos/src/Experiments/Linter/Vue/index.vue
@@ -62,36 +62,76 @@ export default {
 }
 </script>
 
-<style lang="scss">
-.problem {
-  background: #fdd;
-  border-bottom: 1px solid #f22;
-  margin-bottom: -1px;
-}
-
-.lint-icon {
-  display: inline-block;
-  position: absolute;
-  right: 2px;
-  cursor: pointer;
-  border-radius: 100px;
-  background: #f22;
-  color: white;
-  font-family: times, georgia, serif;
-  font-size: 15px;
-  font-weight: bold;
-  width: 1.1em;
-  height: 1.1em;
-  text-align: center;
-  padding-left: .5px;
-  line-height: 1.1em
-}
-
-.lint-icon:before {
-  content: "!";
-}
-
+<style lang="scss">/* Basic editor styles */
 .tiptap {
-  padding-right: 20px;
+  padding-right: 1.25rem;
+
+  :first-child {
+    margin-top: 0;
+  }
+
+  /* Heading styles */
+  h1,
+  h2,
+  h3,
+  h4,
+  h5,
+  h6 {
+    line-height: 1.1;
+    margin-top: 2.5rem;
+    text-wrap: pretty;
+  }
+
+  h1,
+  h2 {
+    margin-top: 3.5rem;
+    margin-bottom: 1.5rem;
+  }
+
+  h1 {
+    font-size: 1.4rem;
+  }
+
+  h2 {
+    font-size: 1.2rem;
+  }
+
+  h3 {
+    font-size: 1.1rem;
+  }
+
+  h4,
+  h5,
+  h6 {
+    font-size: 1rem;
+  }
+
+  .problem {
+    background: #fdd;
+    border-bottom: 1px solid #f22;
+    margin-bottom: -1px;
+  }
+
+  .lint-icon {
+    background: #f22;
+    border-radius: 100%;
+    color: white;
+    cursor: pointer;
+    display: inline-block;
+    font-family: times, georgia, serif;
+    font-size: 15px;
+    font-weight: bold;
+    height: 1.1em;
+    line-height: 1.1em;
+    padding-left: 0.5px;
+    position: absolute;
+    right: 2px;
+    text-align: center;
+    width: 1.1em;
+  }
+
+  .lint-icon:before {
+    content: "!";
+  }
 }
 </style>
diff --git a/demos/src/Experiments/MultipleEditors/Vue/index.vue b/demos/src/Experiments/MultipleEditors/Vue/index.vue
index 8a3561fce..7c6b6fbe7 100644
--- a/demos/src/Experiments/MultipleEditors/Vue/index.vue
+++ b/demos/src/Experiments/MultipleEditors/Vue/index.vue
@@ -1,36 +1,38 @@
 <template>
-  <div class="form">
-    <div class="form__label">
-      Title
-    </div>
-    <div v-if="title" class="form__item form__item--title">
-      <editor-content :editor="title" />
-    </div>
-    <div class="form__label">
-      Tasks
-    </div>
-    <div v-if="tasks" class="form__item form__item--tasks">
-      <editor-content :editor="tasks" />
-    </div>
-    <div class="form__label">
-      Description
-    </div>
-    <div v-if="description" class="form__item form__item--description">
-      <editor-content :editor="description" />
-    </div>
-    <div class="form__label">
-      JSON
-    </div>
-    <div class="form__item form__item--json">
-      <code>{{ json }}</code>
+  <div class="container">
+    <div class="multi-editor-group">
+      <div class="form">
+        <label class="label-large">Title</label>
+        <div v-if="title" class="form__item">
+          <editor-content :editor="title" />
+        </div>
+      </div>
+      <div class="form">
+        <label class="label-large">Tasks</label>
+        <div v-if="tasks" class="form__item">
+          <editor-content :editor="tasks" />
+        </div>
+      </div>
+      <div class="form">
+        <label class="label-large">Description</label>
+        <div v-if="description" class="form__item">
+          <editor-content :editor="description" />
+        </div>
+      </div>
     </div>
   </div>
+
+  <div class="output-group">
+    <label>JSON</label>
+    <code>{{ json }}</code>
+  </div>
 </template>
 
 <script>
 import Bold from '@tiptap/extension-bold'
 import Collaboration from '@tiptap/extension-collaboration'
 import Document from '@tiptap/extension-document'
+import Heading from '@tiptap/extension-heading'
 import Paragraph from '@tiptap/extension-paragraph'
 import TaskItem from '@tiptap/extension-task-item'
 import TaskList from '@tiptap/extension-task-list'
@@ -39,8 +41,8 @@ import { Editor, EditorContent } from '@tiptap/vue-3'
 import { yDocToProsemirrorJSON } from 'y-prosemirror'
 import * as Y from 'yjs'
 
-const ParagraphDocument = Document.extend({
-  content: 'paragraph',
+const HeadingDocument = Document.extend({
+  content: 'heading',
 })
 
 const TaskListDocument = Document.extend({
@@ -68,15 +70,17 @@ export default {
   mounted() {
     this.title = new Editor({
       extensions: [
-        ParagraphDocument,
-        Paragraph,
+        HeadingDocument,
+        Heading.configure({
+          levels: [2],
+        }),
         Text,
         Collaboration.configure({
           document: this.ydoc,
           field: 'title',
         }),
       ],
-      content: '<p>No matter what you do, this will be a single paragraph.',
+      content: '<h2>No matter what you do, this will be a single heading.</h2>',
     })
 
     this.tasks = new Editor({
@@ -142,18 +146,41 @@ export default {
 </script>
 
 <style lang="scss">
+
+/* Basic editor styles */
 .tiptap {
-  > * + * {
-    margin-top: 0.75em;
+  :first-child {
+    margin-top: 0;
   }
 
+  /* Heading style */
+  h2 {
+    font-size: 1.2rem;
+    margin-bottom: 1.5rem;
+    margin-top: 3.5rem;
+  }
+
+  /* List styles */
+  ul,
+  ol {
+    padding: 0 1rem;
+    margin: 1.25rem 1rem 1.25rem 0.4rem;
+
+    li p {
+      margin-top: 0.25em;
+      margin-bottom: 0.25em;
+    }
+  }
+
+  /* Task list specific styles */
   ul[data-type="taskList"] {
     list-style: none;
+    margin-left: 0;
     padding: 0;
 
     li {
+      align-items: flex-start;
       display: flex;
-      align-items: center;
 
       > label {
         flex: 0 0 auto;
@@ -165,49 +192,38 @@ export default {
         flex: 1 1 auto;
       }
     }
+
+    input[type="checkbox"] {
+      cursor: pointer;
+    }
+
+    ul[data-type="taskList"] {
+      margin: 0;
+    }
   }
 }
 
-.form__label {
-  color: #868e96;
-  text-transform: uppercase;
-  font-weight: bold;
-  font-size: 0.7rem;
-  letter-spacing: 1px;
-}
+/* Multi editor form group */
+.multi-editor-group {
+  display: flex;
+  flex-direction: column;
+  gap: 2rem;
+  margin: 1.5rem;
 
-.form__item {
-  margin: 0 0 1rem;
-  padding: 0.75rem 1rem;
-  border-radius: 5px;
-  border: 1px solid #e9ecef;
-  transition: .1s all ease-in-out;
+  .form {
+    display: flex;
+    flex-direction: column;
+    gap: 0.5rem;
 
-  &:hover {
-    border-color: #68CEF8;
-  }
+    .form__item {
+      border-radius: 5px;
+      border: 1px solid var(--gray-3);
+      transition: .1s all ease-in-out;
 
-  &--title {
-    font-size: 1.5rem;
-  }
-
-  &--json {
-    background: #0D0D0D;
-    color: #FFF;
-    font-size: 0.8rem;
-  }
-}
-
-pre {
-  font-family: 'JetBrainsMono', monospace;
-  padding: 0.75rem 1rem;
-  border-radius: 0.5rem;
-
-  code {
-    color: inherit;
-    padding: 0;
-    background: none;
-    font-size: 0.8rem;
+      &:hover {
+        border-color: var(--purple);
+      }
+    }
   }
 }
 </style>
diff --git a/demos/src/Experiments/OnUpdateRerender/React/index.jsx b/demos/src/Experiments/OnUpdateRerender/React/index.jsx
index ef9d86693..a7629a8f7 100644
--- a/demos/src/Experiments/OnUpdateRerender/React/index.jsx
+++ b/demos/src/Experiments/OnUpdateRerender/React/index.jsx
@@ -17,7 +17,7 @@ const TiptapComponent = ({
     ],
     content: `
       <p>
-        This is a radically reduced version of tiptap. It has support for a document, with paragraphs and text. That’s it. It’s probably too much for real minimalists though.
+        This is a radically reduced version of Tiptap. It has support for a document, with paragraphs and text. That’s it. It’s probably too much for real minimalists though.
       </p>
       <p>
         The paragraph extension is not really required, but you need at least one node. Sure, that node can be something different.
@@ -39,9 +39,13 @@ export default () => {
   }
 
   return (
-    <div>
-      <button onClick={() => setIndex(index + 1)}>INC</button> = {index}
+    <>
+      <div className="control-group">
+        <div className="button-group">
+          <button onClick={() => setIndex(index + 1)}>INC</button> = {index}
+        </div>
+      </div>
       <TiptapComponent onUpdate={handleUpdate} />
-    </div>
+    </>
   )
 }
diff --git a/demos/src/Experiments/OnUpdateRerender/React/styles.scss b/demos/src/Experiments/OnUpdateRerender/React/styles.scss
index 5e207df49..afd5ba214 100644
--- a/demos/src/Experiments/OnUpdateRerender/React/styles.scss
+++ b/demos/src/Experiments/OnUpdateRerender/React/styles.scss
@@ -1,6 +1,6 @@
 /* Basic editor styles */
 .tiptap {
-  > * + * {
-    margin-top: 0.75em;
+  :first-child {
+    margin-top: 0;
   }
 }
diff --git a/demos/src/Experiments/OnUpdateRerender/Vue/TiptapComponent.vue b/demos/src/Experiments/OnUpdateRerender/Vue/TiptapComponent.vue
index 54878f936..5eee4becf 100644
--- a/demos/src/Experiments/OnUpdateRerender/Vue/TiptapComponent.vue
+++ b/demos/src/Experiments/OnUpdateRerender/Vue/TiptapComponent.vue
@@ -33,7 +33,7 @@ export default {
       ],
       content: `
         <p>
-          This is a radically reduced version of tiptap. It has support for a document, with paragraphs and text. That’s it. It’s probably too much for real minimalists though.
+          This is a radically reduced version of Tiptap. It has support for a document, with paragraphs and text. That’s it. It’s probably too much for real minimalists though.
         </p>
         <p>
           The paragraph extension is not really required, but you need at least one node. Sure, that node can be something different.
diff --git a/demos/src/Experiments/OnUpdateRerender/Vue/index.vue b/demos/src/Experiments/OnUpdateRerender/Vue/index.vue
index 12055dee1..6f0505264 100644
--- a/demos/src/Experiments/OnUpdateRerender/Vue/index.vue
+++ b/demos/src/Experiments/OnUpdateRerender/Vue/index.vue
@@ -1,6 +1,12 @@
 <template>
-  <div><button @click="countUp">INC</button> = {{ count }}</div>
-  <TiptapComponent :count="count" />
+  <div class="container">
+    <div class="control-group">
+      <div class="button-group">
+        <button @click="countUp">INC</button> = {{ count }}
+      </div>
+    </div>
+    <TiptapComponent :count="count" />
+  </div>
 </template>
 
 <script>
@@ -24,3 +30,12 @@ export default {
   },
 }
 </script>
+
+<style lang="scss">
+/* Basic editor styles */
+.tiptap {
+  :first-child {
+    margin-top: 0;
+  }
+}
+</style>
diff --git a/demos/src/Experiments/Tailwind/JS/index.html b/demos/src/Experiments/Tailwind/JS/index.html
index 2a8a6785c..c3821dd93 100644
--- a/demos/src/Experiments/Tailwind/JS/index.html
+++ b/demos/src/Experiments/Tailwind/JS/index.html
@@ -24,7 +24,7 @@ const editor = new Editor({
       Hi there,
     </h2>
     <p>
-      this is a basic <em>basic</em> example of <strong>tiptap</strong>. Sure, there are all kind of basic text styles you’d probably expect from a text editor. But wait until you see the lists:
+      this is a basic <em>basic</em> example of <strong>Tiptap</strong>. Sure, there are all kind of basic text styles you’d probably expect from a text editor. But wait until you see the lists:
     </p>
     <ul>
       <li>
diff --git a/demos/src/Experiments/TrailingNode/Vue/index.vue b/demos/src/Experiments/TrailingNode/Vue/index.vue
index 134dd5cee..5576c58df 100644
--- a/demos/src/Experiments/TrailingNode/Vue/index.vue
+++ b/demos/src/Experiments/TrailingNode/Vue/index.vue
@@ -41,24 +41,95 @@ export default {
 </script>
 
 <style lang="scss">
+/* Basic editor styles */
 .tiptap {
-  > * + * {
-    margin-top: 0.75em;
+  :first-child {
+    margin-top: 0;
+  }
+
+  /* List styles */
+  ul,
+  ol {
+    padding: 0 1rem;
+    margin: 1.25rem 1rem 1.25rem 0.4rem;
+
+    li p {
+      margin-top: 0.25em;
+      margin-bottom: 0.25em;
+    }
+  }
+
+  /* Heading styles */
+  h1,
+  h2,
+  h3,
+  h4,
+  h5,
+  h6 {
+    line-height: 1.1;
+    margin-top: 2.5rem;
+    text-wrap: pretty;
+  }
+
+  h1,
+  h2 {
+    margin-top: 3.5rem;
+    margin-bottom: 1.5rem;
+  }
+
+  h1 {
+    font-size: 1.4rem;
+  }
+
+  h2 {
+    font-size: 1.2rem;
+  }
+
+  h3 {
+    font-size: 1.1rem;
+  }
+
+  h4,
+  h5,
+  h6 {
+    font-size: 1rem;
+  }
+
+  /* Code and preformatted text styles */
+  code {
+    background-color: var(--purple-light);
+    border-radius: 0.4rem;
+    color: var(--black);
+    font-size: 0.85rem;
+    padding: 0.25em 0.3em;
   }
 
   pre {
-    background: #0D0D0D;
-    color: #FFF;
-    font-family: 'JetBrainsMono', monospace;
-    padding: 0.75rem 1rem;
+    background: var(--black);
     border-radius: 0.5rem;
+    color: var(--white);
+    font-family: 'JetBrainsMono', monospace;
+    margin: 1.5rem 0;
+    padding: 0.75rem 1rem;
 
     code {
-      color: inherit;
-      padding: 0;
       background: none;
+      color: inherit;
       font-size: 0.8rem;
+      padding: 0;
     }
   }
+
+  blockquote {
+    border-left: 3px solid var(--gray-3);
+    margin: 1.5rem 0;
+    padding-left: 1rem;
+  }
+
+  hr {
+    border: none;
+    border-top: 1px solid var(--gray-2);
+    margin: 2rem 0;
+  }
 }
 </style>
diff --git a/demos/src/Extensions/BubbleMenu/React/index.jsx b/demos/src/Extensions/BubbleMenu/React/index.jsx
index 7cb621185..4e2ad1038 100644
--- a/demos/src/Extensions/BubbleMenu/React/index.jsx
+++ b/demos/src/Extensions/BubbleMenu/React/index.jsx
@@ -28,29 +28,35 @@ export default () => {
 
   return (
     <>
-      <div>
-        <input type="checkbox" checked={isEditable} onChange={() => setIsEditable(!isEditable)} />
-        Editable
+
+      <div className="control-group">
+        <label>
+          <input type="checkbox" checked={isEditable} onChange={() => setIsEditable(!isEditable)} />
+          Editable
+        </label>
       </div>
+
       {editor && <BubbleMenu editor={editor} tippyOptions={{ duration: 100 }}>
-        <button
-          onClick={() => editor.chain().focus().toggleBold().run()}
-          className={editor.isActive('bold') ? 'is-active' : ''}
-        >
-          bold
-        </button>
-        <button
-          onClick={() => editor.chain().focus().toggleItalic().run()}
-          className={editor.isActive('italic') ? 'is-active' : ''}
-        >
-          italic
-        </button>
-        <button
-          onClick={() => editor.chain().focus().toggleStrike().run()}
-          className={editor.isActive('strike') ? 'is-active' : ''}
-        >
-          strike
-        </button>
+        <div className="bubble-menu">
+          <button
+            onClick={() => editor.chain().focus().toggleBold().run()}
+            className={editor.isActive('bold') ? 'is-active' : ''}
+          >
+            Bold
+          </button>
+          <button
+            onClick={() => editor.chain().focus().toggleItalic().run()}
+            className={editor.isActive('italic') ? 'is-active' : ''}
+          >
+            Italic
+          </button>
+          <button
+            onClick={() => editor.chain().focus().toggleStrike().run()}
+            className={editor.isActive('strike') ? 'is-active' : ''}
+          >
+            Strike
+          </button>
+        </div>
       </BubbleMenu>}
       <EditorContent editor={editor} />
     </>
diff --git a/demos/src/Extensions/BubbleMenu/React/styles.scss b/demos/src/Extensions/BubbleMenu/React/styles.scss
index 72b4f078c..3b380512a 100644
--- a/demos/src/Extensions/BubbleMenu/React/styles.scss
+++ b/demos/src/Extensions/BubbleMenu/React/styles.scss
@@ -1,9 +1,117 @@
+/* Basic editor styles */
 .tiptap {
-  > * + * {
-    margin-top: 0.75em;
+  :first-child {
+    margin-top: 0;
+  }
+
+  /* List styles */
+  ul, 
+  ol {
+    padding: 0 1rem;
+    margin: 1.25rem 1rem 1.25rem 0.4rem;
+    
+    li p {
+      margin-top: 0.25em;
+      margin-bottom: 0.25em;
+    }
+  }
+
+  /* Heading styles */
+  h1, 
+  h2, 
+  h3, 
+  h4, 
+  h5, 
+  h6 {
+    line-height: 1.1;
+    margin-top: 2.5rem;
+    text-wrap: pretty;
+  }
+
+  h1, 
+  h2 {
+    margin-top: 3.5rem;
+    margin-bottom: 1.5rem;
+  }
+
+  h1 { 
+    font-size: 1.4rem; 
+  }
+
+  h2 { 
+    font-size: 1.2rem; 
+  }
+
+  h3 { 
+    font-size: 1.1rem; 
+  }
+
+  h4, 
+  h5, 
+  h6 { 
+    font-size: 1rem; 
+  }
+
+  /* Code and preformatted text styles */
+  code {
+    background-color: var(--purple-light);
+    border-radius: 0.4rem;
+    color: var(--black);
+    font-size: 0.85rem;
+    padding: 0.25em 0.3em;
+  }
+
+  pre {
+    background: var(--black);
+    border-radius: 0.5rem;
+    color: var(--white);
+    font-family: 'JetBrainsMono', monospace;
+    margin: 1.5rem 0;
+    padding: 0.75rem 1rem;
+
+    code {
+      background: none;
+      color: inherit;
+      font-size: 0.8rem;
+      padding: 0;
+    }
+  }
+
+  blockquote {
+    border-left: 3px solid var(--gray-3);
+    margin: 1.5rem 0;
+    padding-left: 1rem;
+  }
+
+  hr {
+    border: none;
+    border-top: 1px solid var(--gray-2);
+    margin: 2rem 0;
   }
 }
 
-input[type="checkbox"] {
-  margin-right: 8px;
+/* Bubble menu */
+.bubble-menu {
+  background-color: var(--white);
+  border: 1px solid var(--gray-1);
+  border-radius: 0.7rem;
+  box-shadow: var(--shadow);
+  display: flex;
+  padding: 0.2rem;
+
+  button {
+    background-color: unset;
+
+    &:hover {
+      background-color: var(--gray-3);
+    }
+
+    &.is-active {
+      background-color: var(--purple);
+
+      &:hover {
+        background-color: var(--purple-contrast);
+      }
+    }
+  }
 }
diff --git a/demos/src/Extensions/BubbleMenu/Vue/index.vue b/demos/src/Extensions/BubbleMenu/Vue/index.vue
index 31d68d23b..dd971d6aa 100644
--- a/demos/src/Extensions/BubbleMenu/Vue/index.vue
+++ b/demos/src/Extensions/BubbleMenu/Vue/index.vue
@@ -1,23 +1,27 @@
 <template>
-  <div>
-    <div>
-      <input type="checkbox" :checked="isEditable" @change="() => isEditable = !isEditable">
-      Editable
+  <div class="container">
+    <div class="control-group">
+      <label>
+        <input type="checkbox" :checked="isEditable" @change="() => isEditable = !isEditable">
+        Editable
+      </label>
     </div>
     <bubble-menu
       :editor="editor"
       :tippy-options="{ duration: 100 }"
       v-if="editor"
     >
-      <button @click="editor.chain().focus().toggleBold().run()" :class="{ 'is-active': editor.isActive('bold') }">
-        bold
-      </button>
-      <button @click="editor.chain().focus().toggleItalic().run()" :class="{ 'is-active': editor.isActive('italic') }">
-        italic
-      </button>
-      <button @click="editor.chain().focus().toggleStrike().run()" :class="{ 'is-active': editor.isActive('strike') }">
-        strike
-      </button>
+      <div class="bubble-menu">
+        <button @click="editor.chain().focus().toggleBold().run()" :class="{ 'is-active': editor.isActive('bold') }">
+          Bold
+        </button>
+        <button @click="editor.chain().focus().toggleItalic().run()" :class="{ 'is-active': editor.isActive('italic') }">
+          Italic
+        </button>
+        <button @click="editor.chain().focus().toggleStrike().run()" :class="{ 'is-active': editor.isActive('strike') }">
+          Strike
+        </button>
+      </div>
     </bubble-menu>
     <editor-content :editor="editor" />
   </div>
@@ -53,7 +57,7 @@ export default {
       ],
       content: `
         <p>
-          Hey, try to select some text here. You’ll see a formatting menu pop up. And as always, you are in full control about content and styling of this menu.
+          Hey, try to select some text here. There will popup a menu for selecting some inline styles. Remember: you have full control about content and styling of this menu.
         </p>
       `,
     })
@@ -68,12 +72,119 @@ export default {
 <style lang="scss">
 /* Basic editor styles */
 .tiptap {
-  > * + * {
-    margin-top: 0.75em;
+  :first-child {
+    margin-top: 0;
+  }
+
+  /* List styles */
+  ul,
+  ol {
+    padding: 0 1rem;
+    margin: 1.25rem 1rem 1.25rem 0.4rem;
+
+    li p {
+      margin-top: 0.25em;
+      margin-bottom: 0.25em;
+    }
+  }
+
+  /* Heading styles */
+  h1,
+  h2,
+  h3,
+  h4,
+  h5,
+  h6 {
+    line-height: 1.1;
+    margin-top: 2.5rem;
+    text-wrap: pretty;
+  }
+
+  h1,
+  h2 {
+    margin-top: 3.5rem;
+    margin-bottom: 1.5rem;
+  }
+
+  h1 {
+    font-size: 1.4rem;
+  }
+
+  h2 {
+    font-size: 1.2rem;
+  }
+
+  h3 {
+    font-size: 1.1rem;
+  }
+
+  h4,
+  h5,
+  h6 {
+    font-size: 1rem;
+  }
+
+  /* Code and preformatted text styles */
+  code {
+    background-color: var(--purple-light);
+    border-radius: 0.4rem;
+    color: var(--black);
+    font-size: 0.85rem;
+    padding: 0.25em 0.3em;
+  }
+
+  pre {
+    background: var(--black);
+    border-radius: 0.5rem;
+    color: var(--white);
+    font-family: 'JetBrainsMono', monospace;
+    margin: 1.5rem 0;
+    padding: 0.75rem 1rem;
+
+    code {
+      background: none;
+      color: inherit;
+      font-size: 0.8rem;
+      padding: 0;
+    }
+  }
+
+  blockquote {
+    border-left: 3px solid var(--gray-3);
+    margin: 1.5rem 0;
+    padding-left: 1rem;
+  }
+
+  hr {
+    border: none;
+    border-top: 1px solid var(--gray-2);
+    margin: 2rem 0;
   }
 }
 
-input[type="checkbox"] {
-  margin-right: 4px;
+/* Bubble menu */
+.bubble-menu {
+  background-color: var(--white);
+  border: 1px solid var(--gray-1);
+  border-radius: 0.7rem;
+  box-shadow: var(--shadow);
+  display: flex;
+  padding: 0.2rem;
+
+  button {
+    background-color: unset;
+
+    &:hover {
+      background-color: var(--gray-3);
+    }
+
+    &.is-active {
+      background-color: var(--purple);
+
+      &:hover {
+        background-color: var(--purple-contrast);
+      }
+    }
+  }
 }
 </style>
diff --git a/demos/src/Extensions/CharacterCount/React/index.jsx b/demos/src/Extensions/CharacterCount/React/index.jsx
index c33d235f1..1b25f91bf 100644
--- a/demos/src/Extensions/CharacterCount/React/index.jsx
+++ b/demos/src/Extensions/CharacterCount/React/index.jsx
@@ -30,15 +30,48 @@ export default () => {
     return null
   }
 
+  const percentage = editor
+    ? Math.round((100 / limit) * editor.storage.characterCount.characters())
+    : 0
+
   return (
-    <div>
+    <>
       <EditorContent editor={editor} />
 
-      <div className="character-count">
-        {editor.storage.characterCount.characters()}/{limit} characters
+      <div className={`character-count ${editor.storage.characterCount.characters() === limit ? 'character-count--warning' : ''}`}>
+        <svg
+          height="20"
+          width="20"
+          viewBox="0 0 20 20"
+        >
+          <circle
+            r="10"
+            cx="10"
+            cy="10"
+            fill="#e9ecef"
+          />
+          <circle
+            r="5"
+            cx="10"
+            cy="10"
+            fill="transparent"
+            stroke="currentColor"
+            strokeWidth="10"
+            strokeDasharray={`calc(${percentage} * 31.4 / 100) 31.4`}
+            transform="rotate(-90) translate(-20)"
+          />
+          <circle
+            r="6"
+            cx="10"
+            cy="10"
+            fill="white"
+          />
+        </svg>
+
+        {editor.storage.characterCount.characters()} / {limit} characters
         <br />
         {editor.storage.characterCount.words()} words
       </div>
-    </div>
+    </>
   )
 }
diff --git a/demos/src/Extensions/CharacterCount/React/styles.scss b/demos/src/Extensions/CharacterCount/React/styles.scss
index b5436eebc..26f0f98ee 100644
--- a/demos/src/Extensions/CharacterCount/React/styles.scss
+++ b/demos/src/Extensions/CharacterCount/React/styles.scss
@@ -1,11 +1,25 @@
 /* Basic editor styles */
 .tiptap {
-  > * + * {
-    margin-top: 0.75em;
+  :first-child {
+    margin-top: 0;
   }
 }
 
+/* Character count */
 .character-count {
-  color: #868e96;
-  margin-top: 1rem;
+  align-items: center;
+  color: var(--gray-5);
+  display: flex;
+  font-size: 0.75rem;
+  gap: .5rem;
+  margin: 1.5rem;
+
+  svg {
+    color: var(--purple);
+  }
+
+  &--warning,
+  &--warning svg {
+    color: var(--red);
+  }
 }
diff --git a/demos/src/Extensions/CharacterCount/Vue/index.vue b/demos/src/Extensions/CharacterCount/Vue/index.vue
index 83d6b1ec8..1d0c18734 100644
--- a/demos/src/Extensions/CharacterCount/Vue/index.vue
+++ b/demos/src/Extensions/CharacterCount/Vue/index.vue
@@ -1,9 +1,38 @@
 <template>
-  <div>
+  <div class="container" v-if="editor">
     <editor-content :editor="editor" />
 
-    <div class="character-count" v-if="editor">
-      {{ editor.storage.characterCount.characters() }}/{{ limit }} characters
+    <div :class="{'character-count': true, 'character-count--warning': editor.storage.characterCount.characters() === limit}">
+      <svg
+        height="20"
+        width="20"
+        viewBox="0 0 20 20"
+      >
+        <circle
+          r="10"
+          cx="10"
+          cy="10"
+          fill="#e9ecef"
+        />
+        <circle
+          r="5"
+          cx="10"
+          cy="10"
+          fill="transparent"
+          stroke="currentColor"
+          stroke-width="10"
+          :stroke-dasharray="`calc(${percentage} * 31.4 / 100) 31.4`"
+          transform="rotate(-90) translate(-20)"
+        />
+        <circle
+          r="6"
+          cx="10"
+          cy="10"
+          fill="white"
+        />
+      </svg>
+
+      {{ editor.storage.characterCount.characters() }} / {{ limit }} characters
       <br>
       {{ editor.storage.characterCount.words() }} words
     </div>
@@ -47,6 +76,12 @@ export default {
     })
   },
 
+  computed: {
+    percentage() {
+      return Math.round((100 / this.limit) * this.editor.storage.characterCount.characters())
+    },
+  },
+
   beforeUnmount() {
     this.editor.destroy()
   },
@@ -56,13 +91,27 @@ export default {
 <style lang="scss">
 /* Basic editor styles */
 .tiptap {
-  > * + * {
-    margin-top: 0.75em;
+  :first-child {
+    margin-top: 0;
   }
 }
 
+/* Character count */
 .character-count {
-  margin-top: 1rem;
-  color: #868e96;
+  align-items: center;
+  color: var(--gray-5);
+  display: flex;
+  font-size: 0.75rem;
+  gap: .5rem;
+  margin: 1.5rem;
+
+  svg {
+    color: var(--purple);
+  }
+
+  &--warning,
+  &--warning svg {
+    color: var(--red);
+  }
 }
 </style>
diff --git a/demos/src/Extensions/Collaboration/React/styles.scss b/demos/src/Extensions/Collaboration/React/styles.scss
index c445f1efc..5507b20e8 100644
--- a/demos/src/Extensions/Collaboration/React/styles.scss
+++ b/demos/src/Extensions/Collaboration/React/styles.scss
@@ -1,15 +1,15 @@
 /* Basic editor styles */
-tiptap {
-  > * + * {
-    margin-top: 0.75em;
+.tiptap {
+  :first-child {
+    margin-top: 0;
+  }
+
+  /* Placeholder (at the top) */
+  p.is-editor-empty:first-child::before {
+    color: var(--gray-4);
+    content: attr(data-placeholder);
+    float: left;
+    height: 0;
+    pointer-events: none;
   }
 }
-
-/* Placeholder (at the top) */
-tiptap p.is-editor-empty:first-child::before {
-  color: #adb5bd;
-  content: attr(data-placeholder);
-  float: left;
-  height: 0;
-  pointer-events: none;
-}
diff --git a/demos/src/Extensions/Collaboration/Vue/index.vue b/demos/src/Extensions/Collaboration/Vue/index.vue
index ed750353b..9f6545451 100644
--- a/demos/src/Extensions/Collaboration/Vue/index.vue
+++ b/demos/src/Extensions/Collaboration/Vue/index.vue
@@ -53,18 +53,18 @@ export default {
 
 <style lang="scss">
 /* Basic editor styles */
-tiptap {
-  > * + * {
-    margin-top: 0.75em;
+.tiptap {
+  :first-child {
+    margin-top: 0;
+  }
+
+  /* Placeholder (at the top) */
+  p.is-editor-empty:first-child::before {
+    color: var(--gray-4);
+    content: attr(data-placeholder);
+    float: left;
+    height: 0;
+    pointer-events: none;
   }
 }
-
-/* Placeholder (at the top) */
-tiptap p.is-editor-empty:first-child::before {
-  content: attr(data-placeholder);
-  float: left;
-  color: #adb5bd;
-  pointer-events: none;
-  height: 0;
-}
 </style>
diff --git a/demos/src/Extensions/CollaborationCursor/React/styles.scss b/demos/src/Extensions/CollaborationCursor/React/styles.scss
index 69851675f..578e350f9 100644
--- a/demos/src/Extensions/CollaborationCursor/React/styles.scss
+++ b/demos/src/Extensions/CollaborationCursor/React/styles.scss
@@ -1,42 +1,46 @@
 /* Basic editor styles */
 .tiptap {
-  > * + * {
-    margin-top: 0.75em;
+  :first-child {
+    margin-top: 0;
+  }
+
+  /* Placeholder (at the top) */
+  p.is-editor-empty:first-child::before {
+    color: var(--gray-4);
+    content: attr(data-placeholder);
+    float: left;
+    height: 0;
+    pointer-events: none;
+  }
+
+  p {
+    word-break: break-all;
+  }
+
+  /* Give a remote user a caret */
+  .collaboration-cursor__caret {
+    border-left: 1px solid #0d0d0d;
+    border-right: 1px solid #0d0d0d;
+    margin-left: -1px;
+    margin-right: -1px;
+    pointer-events: none;
+    position: relative;
+    word-break: normal;
+  }
+
+  /* Render the username above the caret */
+  .collaboration-cursor__label {
+    border-radius: 3px 3px 3px 0;
+    color: #0d0d0d;
+    font-size: 12px;
+    font-style: normal;
+    font-weight: 600;
+    left: -1px;
+    line-height: normal;
+    padding: 0.1rem 0.3rem;
+    position: absolute;
+    top: -1.4em;
+    user-select: none;
+    white-space: nowrap;
   }
 }
-
-/* Placeholder (at the top) */
-.tiptap p.is-editor-empty:first-child::before {
-  color: #adb5bd;
-  content: attr(data-placeholder);
-  float: left;
-  height: 0;
-  pointer-events: none;
-}
-
-/* Give a remote user a caret */
-.collaboration-cursor__caret {
-  border-left: 1px solid #0d0d0d;
-  border-right: 1px solid #0d0d0d;
-  margin-left: -1px;
-  margin-right: -1px;
-  pointer-events: none;
-  position: relative;
-  word-break: normal;
-}
-
-/* Render the username above the caret */
-.collaboration-cursor__label {
-  border-radius: 3px 3px 3px 0;
-  color: #0d0d0d;
-  font-size: 12px;
-  font-style: normal;
-  font-weight: 600;
-  left: -1px;
-  line-height: normal;
-  padding: 0.1rem 0.3rem;
-  position: absolute;
-  top: -1.4em;
-  user-select: none;
-  white-space: nowrap;
-}
diff --git a/demos/src/Extensions/CollaborationCursor/Vue/index.vue b/demos/src/Extensions/CollaborationCursor/Vue/index.vue
index 327de6bc4..e2a5826e3 100644
--- a/demos/src/Extensions/CollaborationCursor/Vue/index.vue
+++ b/demos/src/Extensions/CollaborationCursor/Vue/index.vue
@@ -62,44 +62,48 @@ export default {
 <style lang="scss">
 /* Basic editor styles */
 .tiptap {
-  > * + * {
-    margin-top: 0.75em;
+  :first-child {
+    margin-top: 0;
+  }
+
+  /* Placeholder (at the top) */
+  p.is-editor-empty:first-child::before {
+    color: var(--gray-4);
+    content: attr(data-placeholder);
+    float: left;
+    height: 0;
+    pointer-events: none;
+  }
+
+  p {
+    word-break: break-all;
+  }
+
+  /* Give a remote user a caret */
+  .collaboration-cursor__caret {
+    border-left: 1px solid #0d0d0d;
+    border-right: 1px solid #0d0d0d;
+    margin-left: -1px;
+    margin-right: -1px;
+    pointer-events: none;
+    position: relative;
+    word-break: normal;
+  }
+
+  /* Render the username above the caret */
+  .collaboration-cursor__label {
+    border-radius: 3px 3px 3px 0;
+    color: #0d0d0d;
+    font-size: 12px;
+    font-style: normal;
+    font-weight: 600;
+    left: -1px;
+    line-height: normal;
+    padding: 0.1rem 0.3rem;
+    position: absolute;
+    top: -1.4em;
+    user-select: none;
+    white-space: nowrap;
   }
 }
-
-/* Placeholder (at the top) */
-.tiptap p.is-editor-empty:first-child::before {
-  content: attr(data-placeholder);
-  float: left;
-  color: #adb5bd;
-  pointer-events: none;
-  height: 0;
-}
-
-/* Give a remote user a caret */
-.collaboration-cursor__caret {
-  position: relative;
-  margin-left: -1px;
-  margin-right: -1px;
-  border-left: 1px solid #0D0D0D;
-  border-right: 1px solid #0D0D0D;
-  word-break: normal;
-  pointer-events: none;
-}
-
-/* Render the username above the caret */
-.collaboration-cursor__label {
-  position: absolute;
-  top: -1.4em;
-  left: -1px;
-  font-size: 12px;
-  font-style: normal;
-  font-weight: 600;
-  line-height: normal;
-  user-select: none;
-  color: #0D0D0D;
-  padding: 0.1rem 0.3rem;
-  border-radius: 3px 3px 3px 0;
-  white-space: nowrap;
-}
 </style>
diff --git a/demos/src/Extensions/Color/React/index.jsx b/demos/src/Extensions/Color/React/index.jsx
index 3a706fa1b..bc4c6c17c 100644
--- a/demos/src/Extensions/Color/React/index.jsx
+++ b/demos/src/Extensions/Color/React/index.jsx
@@ -1,3 +1,5 @@
+import './styles.scss'
+
 import { Color } from '@tiptap/extension-color'
 import Document from '@tiptap/extension-document'
 import Paragraph from '@tiptap/extension-paragraph'
@@ -19,70 +21,74 @@ export default () => {
   }
 
   return (
-    <div>
-      <input
-        type="color"
-        onInput={event => editor.chain().focus().setColor(event.target.value).run()}
-        value={editor.getAttributes('textStyle').color}
-        data-testid="setColor"
-      />
-      <button
-        onClick={() => editor.chain().focus().setColor('#958DF1').run()}
-        className={editor.isActive('textStyle', { color: '#958DF1' }) ? 'is-active' : ''}
-        data-testid="setPurple"
-      >
-        purple
-      </button>
-      <button
-        onClick={() => editor.chain().focus().setColor('#F98181').run()}
-        className={editor.isActive('textStyle', { color: '#F98181' }) ? 'is-active' : ''}
-        data-testid="setRed"
-      >
-        red
-      </button>
-      <button
-        onClick={() => editor.chain().focus().setColor('#FBBC88').run()}
-        className={editor.isActive('textStyle', { color: '#FBBC88' }) ? 'is-active' : ''}
-        data-testid="setOrange"
-      >
-        orange
-      </button>
-      <button
-        onClick={() => editor.chain().focus().setColor('#FAF594').run()}
-        className={editor.isActive('textStyle', { color: '#FAF594' }) ? 'is-active' : ''}
-        data-testid="setYellow"
-      >
-        yellow
-      </button>
-      <button
-        onClick={() => editor.chain().focus().setColor('#70CFF8').run()}
-        className={editor.isActive('textStyle', { color: '#70CFF8' }) ? 'is-active' : ''}
-        data-testid="setBlue"
-      >
-        blue
-      </button>
-      <button
-        onClick={() => editor.chain().focus().setColor('#94FADB').run()}
-        className={editor.isActive('textStyle', { color: '#94FADB' }) ? 'is-active' : ''}
-        data-testid="setTeal"
-      >
-        teal
-      </button>
-      <button
-        onClick={() => editor.chain().focus().setColor('#B9F18D').run()}
-        className={editor.isActive('textStyle', { color: '#B9F18D' }) ? 'is-active' : ''}
-        data-testid="setGreen"
-      >
-        green
-      </button>
-      <button
-        onClick={() => editor.chain().focus().unsetColor().run()}
-        data-testid="unsetColor"
-      >
-        unsetColor
-      </button>
+    <>
+      <div className="control-group">
+        <div className="button-group">
+          <input
+            type="color"
+            onInput={event => editor.chain().focus().setColor(event.target.value).run()}
+            value={editor.getAttributes('textStyle').color}
+            data-testid="setColor"
+          />
+          <button
+            onClick={() => editor.chain().focus().setColor('#958DF1').run()}
+            className={editor.isActive('textStyle', { color: '#958DF1' }) ? 'is-active' : ''}
+            data-testid="setPurple"
+          >
+            Purple
+          </button>
+          <button
+            onClick={() => editor.chain().focus().setColor('#F98181').run()}
+            className={editor.isActive('textStyle', { color: '#F98181' }) ? 'is-active' : ''}
+            data-testid="setRed"
+          >
+            Red
+          </button>
+          <button
+            onClick={() => editor.chain().focus().setColor('#FBBC88').run()}
+            className={editor.isActive('textStyle', { color: '#FBBC88' }) ? 'is-active' : ''}
+            data-testid="setOrange"
+          >
+            Orange
+          </button>
+          <button
+            onClick={() => editor.chain().focus().setColor('#FAF594').run()}
+            className={editor.isActive('textStyle', { color: '#FAF594' }) ? 'is-active' : ''}
+            data-testid="setYellow"
+          >
+            Yellow
+          </button>
+          <button
+            onClick={() => editor.chain().focus().setColor('#70CFF8').run()}
+            className={editor.isActive('textStyle', { color: '#70CFF8' }) ? 'is-active' : ''}
+            data-testid="setBlue"
+          >
+            Blue
+          </button>
+          <button
+            onClick={() => editor.chain().focus().setColor('#94FADB').run()}
+            className={editor.isActive('textStyle', { color: '#94FADB' }) ? 'is-active' : ''}
+            data-testid="setTeal"
+          >
+            Teal
+          </button>
+          <button
+            onClick={() => editor.chain().focus().setColor('#B9F18D').run()}
+            className={editor.isActive('textStyle', { color: '#B9F18D' }) ? 'is-active' : ''}
+            data-testid="setGreen"
+          >
+            Green
+          </button>
+          <button
+            onClick={() => editor.chain().focus().unsetColor().run()}
+            data-testid="unsetColor"
+          >
+            Unset color
+          </button>
+        </div>
+      </div>
 
       <EditorContent editor={editor} />
-    </div>
+    </>
   )
 }
diff --git a/demos/src/GuideNodeViews/TableOfContents/React/styles.scss b/demos/src/Extensions/Color/React/styles.scss
similarity index 53%
rename from demos/src/GuideNodeViews/TableOfContents/React/styles.scss
rename to demos/src/Extensions/Color/React/styles.scss
index 5e207df49..afd5ba214 100644
--- a/demos/src/GuideNodeViews/TableOfContents/React/styles.scss
+++ b/demos/src/Extensions/Color/React/styles.scss
@@ -1,6 +1,6 @@
 /* Basic editor styles */
 .tiptap {
-  > * + * {
-    margin-top: 0.75em;
+  :first-child {
+    margin-top: 0;
   }
 }
diff --git a/demos/src/Extensions/Color/Vue/index.vue b/demos/src/Extensions/Color/Vue/index.vue
index 3046df05b..dbd592444 100644
--- a/demos/src/Extensions/Color/Vue/index.vue
+++ b/demos/src/Extensions/Color/Vue/index.vue
@@ -1,35 +1,38 @@
 <template>
-  <div v-if="editor">
-    <input
-      type="color"
-      @input="editor.chain().focus().setColor($event.target.value).run()"
-      :value="editor.getAttributes('textStyle').color"
-    >
-    <button @click="editor.chain().focus().setColor('#958DF1').run()" :class="{ 'is-active': editor.isActive('textStyle', { color: '#958DF1' })}">
-      purple
-    </button>
-    <button @click="editor.chain().focus().setColor('#F98181').run()" :class="{ 'is-active': editor.isActive('textStyle', { color: '#F98181' })}">
-      red
-    </button>
-    <button @click="editor.chain().focus().setColor('#FBBC88').run()" :class="{ 'is-active': editor.isActive('textStyle', { color: '#FBBC88' })}">
-      orange
-    </button>
-    <button @click="editor.chain().focus().setColor('#FAF594').run()" :class="{ 'is-active': editor.isActive('textStyle', { color: '#FAF594' })}">
-      yellow
-    </button>
-    <button @click="editor.chain().focus().setColor('#70CFF8').run()" :class="{ 'is-active': editor.isActive('textStyle', { color: '#70CFF8' })}">
-      blue
-    </button>
-    <button @click="editor.chain().focus().setColor('#94FADB').run()" :class="{ 'is-active': editor.isActive('textStyle', { color: '#94FADB' })}">
-      teal
-    </button>
-    <button @click="editor.chain().focus().setColor('#B9F18D').run()" :class="{ 'is-active': editor.isActive('textStyle', { color: '#B9F18D' })}">
-      green
-    </button>
-    <button @click="editor.chain().focus().unsetColor().run()">
-      unsetColor
-    </button>
-
+  <div v-if="editor" class="container">
+    <div class="control-group">
+      <div class="button-group">
+        <input
+          type="color"
+          @input="editor.chain().focus().setColor($event.target.value).run()"
+          :value="editor.getAttributes('textStyle').color"
+        >
+        <button @click="editor.chain().focus().setColor('#958DF1').run()" :class="{ 'is-active': editor.isActive('textStyle', { color: '#958DF1' })}">
+          Purple
+        </button>
+        <button @click="editor.chain().focus().setColor('#F98181').run()" :class="{ 'is-active': editor.isActive('textStyle', { color: '#F98181' })}">
+          Red
+        </button>
+        <button @click="editor.chain().focus().setColor('#FBBC88').run()" :class="{ 'is-active': editor.isActive('textStyle', { color: '#FBBC88' })}">
+          Orange
+        </button>
+        <button @click="editor.chain().focus().setColor('#FAF594').run()" :class="{ 'is-active': editor.isActive('textStyle', { color: '#FAF594' })}">
+          Yellow
+        </button>
+        <button @click="editor.chain().focus().setColor('#70CFF8').run()" :class="{ 'is-active': editor.isActive('textStyle', { color: '#70CFF8' })}">
+          Blue
+        </button>
+        <button @click="editor.chain().focus().setColor('#94FADB').run()" :class="{ 'is-active': editor.isActive('textStyle', { color: '#94FADB' })}">
+          Teal
+        </button>
+        <button @click="editor.chain().focus().setColor('#B9F18D').run()" :class="{ 'is-active': editor.isActive('textStyle', { color: '#B9F18D' })}">
+          Green
+        </button>
+        <button @click="editor.chain().focus().unsetColor().run()">
+          Unset color
+        </button>
+      </div>
+    </div>
     <editor-content :editor="editor" />
   </div>
 </template>
@@ -73,3 +76,12 @@ export default {
   },
 }
 </script>
+
+<style lang="scss">
+/* Basic editor styles */
+.tiptap {
+  :first-child {
+    margin-top: 0;
+  }
+}
+</style>
diff --git a/demos/src/Extensions/Dropcursor/React/index.jsx b/demos/src/Extensions/Dropcursor/React/index.jsx
index 418b27e74..7dc3a4091 100644
--- a/demos/src/Extensions/Dropcursor/React/index.jsx
+++ b/demos/src/Extensions/Dropcursor/React/index.jsx
@@ -13,7 +13,7 @@ export default () => {
     extensions: [Document, Paragraph, Text, Image, Dropcursor],
     content: `
         <p>Try to drag around the image. While you drag, the editor should show a decoration under your cursor. The so called dropcursor.</p>
-        <img src="https://source.unsplash.com/8xznAGy4HcY/800x400" />
+        <img src="https://placehold.co/800x400" />
       `,
   })
 
diff --git a/demos/src/Extensions/Dropcursor/React/styles.scss b/demos/src/Extensions/Dropcursor/React/styles.scss
index 940039123..51aa105ad 100644
--- a/demos/src/Extensions/Dropcursor/React/styles.scss
+++ b/demos/src/Extensions/Dropcursor/React/styles.scss
@@ -1,11 +1,17 @@
 /* Basic editor styles */
 .tiptap {
-  > * + * {
-    margin-top: 0.75em;
+  :first-child {
+    margin-top: 0;
   }
 
   img {
+    display: block;
     height: auto;
+    margin: 1.5rem 0;
     max-width: 100%;
+
+    &.ProseMirror-selectednode {
+      outline: 3px solid var(--purple);
+    }
   }
 }
diff --git a/demos/src/Extensions/Dropcursor/Vue/index.vue b/demos/src/Extensions/Dropcursor/Vue/index.vue
index 6094d85a2..bfc2edcbf 100644
--- a/demos/src/Extensions/Dropcursor/Vue/index.vue
+++ b/demos/src/Extensions/Dropcursor/Vue/index.vue
@@ -32,7 +32,7 @@ export default {
       ],
       content: `
         <p>Try to drag around the image. While you drag, the editor should show a decoration under your cursor. The so called dropcursor.</p>
-        <img src="https://source.unsplash.com/8xznAGy4HcY/800x400" />
+        <img src="https://placehold.co/800x400" />
       `,
     })
   },
@@ -46,13 +46,19 @@ export default {
 <style lang="scss">
 /* Basic editor styles */
 .tiptap {
-  > * + * {
-    margin-top: 0.75em;
+  :first-child {
+    margin-top: 0;
   }
 
   img {
-    max-width: 100%;
+    display: block;
     height: auto;
+    margin: 1.5rem 0;
+    max-width: 100%;
+
+    &.ProseMirror-selectednode {
+      outline: 3px solid var(--purple);
+    }
   }
 }
 </style>
diff --git a/demos/src/Extensions/FloatingMenu/React/index.jsx b/demos/src/Extensions/FloatingMenu/React/index.jsx
index f1a1d6aa8..7fcb176de 100644
--- a/demos/src/Extensions/FloatingMenu/React/index.jsx
+++ b/demos/src/Extensions/FloatingMenu/React/index.jsx
@@ -27,29 +27,33 @@ export default () => {
 
   return (
     <>
-      <div>
-        <input type="checkbox" checked={isEditable} onChange={() => setIsEditable(!isEditable)} />
-        Editable
+      <div className="control-group">
+        <label>
+          <input type="checkbox" checked={isEditable} onChange={() => setIsEditable(!isEditable)} />
+          Editable
+        </label>
       </div>
       {editor && <FloatingMenu editor={editor} tippyOptions={{ duration: 100 }}>
-        <button
-          onClick={() => editor.chain().focus().toggleHeading({ level: 1 }).run()}
-          className={editor.isActive('heading', { level: 1 }) ? 'is-active' : ''}
-        >
-          h1
-        </button>
-        <button
-          onClick={() => editor.chain().focus().toggleHeading({ level: 2 }).run()}
-          className={editor.isActive('heading', { level: 2 }) ? 'is-active' : ''}
-        >
-          h2
-        </button>
-        <button
-          onClick={() => editor.chain().focus().toggleBulletList().run()}
-          className={editor.isActive('bulletList') ? 'is-active' : ''}
-        >
-          bullet list
-        </button>
+        <div className="floating-menu">
+          <button
+            onClick={() => editor.chain().focus().toggleHeading({ level: 1 }).run()}
+            className={editor.isActive('heading', { level: 1 }) ? 'is-active' : ''}
+          >
+            H1
+          </button>
+          <button
+            onClick={() => editor.chain().focus().toggleHeading({ level: 2 }).run()}
+            className={editor.isActive('heading', { level: 2 }) ? 'is-active' : ''}
+          >
+            H2
+          </button>
+          <button
+            onClick={() => editor.chain().focus().toggleBulletList().run()}
+            className={editor.isActive('bulletList') ? 'is-active' : ''}
+          >
+            Bullet list
+          </button>
+        </div>
       </FloatingMenu>}
       <EditorContent editor={editor} />
     </>
diff --git a/demos/src/Extensions/FloatingMenu/React/styles.scss b/demos/src/Extensions/FloatingMenu/React/styles.scss
index 1c9f0f6cd..bf227c736 100644
--- a/demos/src/Extensions/FloatingMenu/React/styles.scss
+++ b/demos/src/Extensions/FloatingMenu/React/styles.scss
@@ -1,10 +1,118 @@
+/* Basic editor styles */
 .tiptap {
-  > * + * {
-    margin-top: 0.75em;
+  :first-child {
+    margin-top: 0;
   }
 
-  ul,
+  /* List styles */
+  ul, 
   ol {
     padding: 0 1rem;
+    margin: 1.25rem 1rem 1.25rem 0.4rem;
+    
+    li p {
+      margin-top: 0.25em;
+      margin-bottom: 0.25em;
+    }
+  }
+
+  /* Heading styles */
+  h1, 
+  h2, 
+  h3, 
+  h4, 
+  h5, 
+  h6 {
+    line-height: 1.1;
+    margin-top: 2.5rem;
+    text-wrap: pretty;
+  }
+
+  h1, 
+  h2 {
+    margin-top: 3.5rem;
+    margin-bottom: 1.5rem;
+  }
+
+  h1 { 
+    font-size: 1.4rem; 
+  }
+
+  h2 { 
+    font-size: 1.2rem; 
+  }
+
+  h3 { 
+    font-size: 1.1rem; 
+  }
+
+  h4, 
+  h5, 
+  h6 { 
+    font-size: 1rem; 
+  }
+
+  /* Code and preformatted text styles */
+  code {
+    background-color: var(--purple-light);
+    border-radius: 0.4rem;
+    color: var(--black);
+    font-size: 0.85rem;
+    padding: 0.25em 0.3em;
+  }
+
+  pre {
+    background: var(--black);
+    border-radius: 0.5rem;
+    color: var(--white);
+    font-family: 'JetBrainsMono', monospace;
+    margin: 1.5rem 0;
+    padding: 0.75rem 1rem;
+
+    code {
+      background: none;
+      color: inherit;
+      font-size: 0.8rem;
+      padding: 0;
+    }
+  }
+
+  blockquote {
+    border-left: 3px solid var(--gray-3);
+    margin: 1.5rem 0;
+    padding-left: 1rem;
+  }
+
+  hr {
+    border: none;
+    border-top: 1px solid var(--gray-2);
+    margin: 2rem 0;
+  }
+}
+
+/* Floating menu */
+.floating-menu {
+  display: flex;
+  background-color: var(--gray-3);
+  padding: 0.1rem;
+  border-radius: 0.5rem;
+
+  button {
+    background-color: unset;
+    padding: 0.275rem 0.425rem;
+    border-radius: 0.3rem;
+
+    &:hover {
+      background-color: var(--gray-3);
+    }
+
+    &.is-active {
+      background-color: var(--white);
+      color: var(--purple);
+
+      &:hover {
+        color: var(--purple-contrast);
+      }
+    }
   }
 }
diff --git a/demos/src/Extensions/FloatingMenu/Vue/index.vue b/demos/src/Extensions/FloatingMenu/Vue/index.vue
index b32dafce6..17f865d1e 100644
--- a/demos/src/Extensions/FloatingMenu/Vue/index.vue
+++ b/demos/src/Extensions/FloatingMenu/Vue/index.vue
@@ -1,19 +1,23 @@
 <template>
-  <div>
-    <div>
-      <input type="checkbox" :checked="isEditable" @change="() => isEditable = !isEditable">
-      Editable
+  <div class="container">
+    <div class="control-group">
+      <label>
+        <input type="checkbox" :checked="isEditable" @change="() => isEditable = !isEditable">
+        Editable
+      </label>
     </div>
     <floating-menu :editor="editor" :tippy-options="{ duration: 100 }" v-if="editor">
-      <button @click="editor.chain().focus().toggleHeading({ level: 1 }).run()" :class="{ 'is-active': editor.isActive('heading', { level: 1 }) }">
-        H1
-      </button>
-      <button @click="editor.chain().focus().toggleHeading({ level: 2 }).run()" :class="{ 'is-active': editor.isActive('heading', { level: 2 }) }">
-        H2
-      </button>
-      <button @click="editor.chain().focus().toggleBulletList().run()" :class="{ 'is-active': editor.isActive('bulletList') }">
-        Bullet List
-      </button>
+      <div class="floating-menu">
+        <button @click="editor.chain().focus().toggleHeading({ level: 1 }).run()" :class="{ 'is-active': editor.isActive('heading', { level: 1 }) }">
+          H1
+        </button>
+        <button @click="editor.chain().focus().toggleHeading({ level: 2 }).run()" :class="{ 'is-active': editor.isActive('heading', { level: 2 }) }">
+          H2
+        </button>
+        <button @click="editor.chain().focus().toggleBulletList().run()" :class="{ 'is-active': editor.isActive('bulletList') }">
+          Bullet list
+        </button>
+      </div>
     </floating-menu>
     <editor-content :editor="editor" />
   </div>
@@ -65,13 +69,120 @@ export default {
 <style lang="scss">
 /* Basic editor styles */
 .tiptap {
-  > * + * {
-    margin-top: 0.75em;
+  :first-child {
+    margin-top: 0;
   }
 
+  /* List styles */
   ul,
   ol {
     padding: 0 1rem;
+    margin: 1.25rem 1rem 1.25rem 0.4rem;
+
+    li p {
+      margin-top: 0.25em;
+      margin-bottom: 0.25em;
+    }
+  }
+
+  /* Heading styles */
+  h1,
+  h2,
+  h3,
+  h4,
+  h5,
+  h6 {
+    line-height: 1.1;
+    margin-top: 2.5rem;
+    text-wrap: pretty;
+  }
+
+  h1,
+  h2 {
+    margin-top: 3.5rem;
+    margin-bottom: 1.5rem;
+  }
+
+  h1 {
+    font-size: 1.4rem;
+  }
+
+  h2 {
+    font-size: 1.2rem;
+  }
+
+  h3 {
+    font-size: 1.1rem;
+  }
+
+  h4,
+  h5,
+  h6 {
+    font-size: 1rem;
+  }
+
+  /* Code and preformatted text styles */
+  code {
+    background-color: var(--purple-light);
+    border-radius: 0.4rem;
+    color: var(--black);
+    font-size: 0.85rem;
+    padding: 0.25em 0.3em;
+  }
+
+  pre {
+    background: var(--black);
+    border-radius: 0.5rem;
+    color: var(--white);
+    font-family: 'JetBrainsMono', monospace;
+    margin: 1.5rem 0;
+    padding: 0.75rem 1rem;
+
+    code {
+      background: none;
+      color: inherit;
+      font-size: 0.8rem;
+      padding: 0;
+    }
+  }
+
+  blockquote {
+    border-left: 3px solid var(--gray-3);
+    margin: 1.5rem 0;
+    padding-left: 1rem;
+  }
+
+  hr {
+    border: none;
+    border-top: 1px solid var(--gray-2);
+    margin: 2rem 0;
+  }
+}
+
+/* Floating menu */
+.floating-menu {
+  display: flex;
+  background-color: var(--gray-3);
+  padding: 0.1rem;
+  border-radius: 0.5rem;
+
+  button {
+    background-color: unset;
+    padding: 0.275rem 0.425rem;
+    border-radius: 0.3rem;
+
+    &:hover {
+      background-color: var(--gray-3);
+    }
+
+    &.is-active {
+      background-color: var(--white);
+      color: var(--purple);
+
+      &:hover {
+        color: var(--purple-contrast);
+      }
+    }
   }
 }
 </style>
diff --git a/demos/src/Extensions/Focus/React/styles.scss b/demos/src/Extensions/Focus/React/styles.scss
index c7a751e81..9ec31f8e5 100644
--- a/demos/src/Extensions/Focus/React/styles.scss
+++ b/demos/src/Extensions/Focus/React/styles.scss
@@ -1,30 +1,33 @@
-.has-focus {
-  border-radius: 3px;
-  box-shadow: 0 0 0 3px #68cef8;
-}
-
 /* Basic editor styles */
 .tiptap {
-  > * + * {
-    margin-top: 0.75em;
+  :first-child {
+    margin-top: 0;
   }
 
-  ul,
+  /* List styles */
+  ul, 
   ol {
     padding: 0 1rem;
+    margin: 1.25rem 1rem 1.25rem 0.4rem;
+    
+    li p {
+      margin-top: 0.25em;
+      margin-bottom: 0.25em;
+    }
   }
 
-  blockquote {
-    border-left: 2px solid rgba(#0d0d0d, 0.1);
-    padding-left: 1rem;
-  }
-
+  /* Code and preformatted text styles */
   code {
-    background-color: rgba(#616161, 0.1);
-    border-radius: 0.25em;
-    box-decoration-break: clone;
-    color: #616161;
-    font-size: 0.9rem;
-    padding: 0.25em;
+    background-color: var(--purple-light);
+    border-radius: 0.4rem;
+    color: var(--black);
+    font-size: 0.85rem;
+    padding: 0.25em 0.3em;
+  }
+
+  // Focus styles
+  .has-focus {
+    border-radius: 3px;
+    box-shadow: 0 0 0 2px var(--purple);
   }
 }
diff --git a/demos/src/Extensions/Focus/Vue/index.vue b/demos/src/Extensions/Focus/Vue/index.vue
index d2c2ef075..37b6fec3c 100644
--- a/demos/src/Extensions/Focus/Vue/index.vue
+++ b/demos/src/Extensions/Focus/Vue/index.vue
@@ -57,34 +57,37 @@ export default {
 </script>
 
 <style lang="scss">
-.has-focus {
-  border-radius: 3px;
-  box-shadow: 0 0 0 3px #68cef8;
-}
-
 /* Basic editor styles */
 .tiptap {
-  > * + * {
-    margin-top: 0.75em;
+  :first-child {
+    margin-top: 0;
   }
 
+  /* List styles */
   ul,
   ol {
     padding: 0 1rem;
+    margin: 1.25rem 1rem 1.25rem 0.4rem;
+
+    li p {
+      margin-top: 0.25em;
+      margin-bottom: 0.25em;
+    }
   }
 
-  blockquote {
-    padding-left: 1rem;
-    border-left: 2px solid rgba(#0D0D0D, 0.1);
-  }
-
+  /* Code and preformatted text styles */
   code {
-    font-size: 0.9rem;
-    padding: 0.25em;
-    border-radius: 0.25em;
-    background-color: rgba(#616161, 0.1);
-    color: #616161;
-    box-decoration-break: clone;
+    background-color: var(--purple-light);
+    border-radius: 0.4rem;
+    color: var(--black);
+    font-size: 0.85rem;
+    padding: 0.25em 0.3em;
+  }
+
+  // Focus styles
+  .has-focus {
+    border-radius: 3px;
+    box-shadow: 0 0 0 2px var(--purple);
   }
 }
 </style>
diff --git a/demos/src/Extensions/FontFamily/React/index.jsx b/demos/src/Extensions/FontFamily/React/index.jsx
index 1bbde3e36..41ef25bde 100644
--- a/demos/src/Extensions/FontFamily/React/index.jsx
+++ b/demos/src/Extensions/FontFamily/React/index.jsx
@@ -26,65 +26,68 @@ export default () => {
   }
 
   return (
-    <div>
-      <button
-        onClick={() => editor.chain().focus().setFontFamily('Inter').run()}
-        className={editor.isActive('textStyle', { fontFamily: 'Inter' }) ? 'is-active' : ''}
-        data-test-id="inter"
-      >
-        Inter
-      </button>
-      <button
-        onClick={() => editor.chain().focus().setFontFamily('Comic Sans MS, Comic Sans').run()}
-        className={
-          editor.isActive('textStyle', { fontFamily: 'Comic Sans MS, Comic Sans' })
-            ? 'is-active'
-            : ''
-        }
-        data-test-id="comic-sans"
-      >
-        Comic Sans
-      </button>
-      <button
-        onClick={() => editor.chain().focus().setFontFamily('serif').run()}
-        className={editor.isActive('textStyle', { fontFamily: 'serif' }) ? 'is-active' : ''}
-        data-test-id="serif"
-      >
-        serif
-      </button>
-      <button
-        onClick={() => editor.chain().focus().setFontFamily('monospace').run()}
-        className={editor.isActive('textStyle', { fontFamily: 'monospace' }) ? 'is-active' : ''}
-        data-test-id="monospace"
-      >
-        monospace
-      </button>
-      <button
-        onClick={() => editor.chain().focus().setFontFamily('cursive').run()}
-        className={editor.isActive('textStyle', { fontFamily: 'cursive' }) ? 'is-active' : ''}
-        data-test-id="cursive"
-      >
-        cursive
-      </button>
-      <button
-        onClick={() => editor.chain().focus().setFontFamily('var(--title-font-family)').run()}
-        className={editor.isActive('textStyle', { fontFamily: 'var(--title-font-family)' }) ? 'is-active' : ''}
-        data-test-id="css-variable"
-      >
-        CSS variable
-      </button>
-      <button
-        onClick={() => editor.chain().focus().setFontFamily('"Comic Sans MS", "Comic Sans"').run()}
-        className={editor.isActive('textStyle', { fontFamily: '"Comic Sans"' }) ? 'is-active' : ''}
-        data-test-id="comic-sans-quoted"
-      >
-        Comic Sans quoted
-      </button>
-      <button onClick={() => editor.chain().focus().unsetFontFamily().run()} data-test-id="unsetFontFamily">
-        unsetFontFamily
-      </button>
-
+    <>
+      <div className="control-group">
+        <div className="button-group">
+          <button
+            onClick={() => editor.chain().focus().setFontFamily('Inter').run()}
+            className={editor.isActive('textStyle', { fontFamily: 'Inter' }) ? 'is-active' : ''}
+            data-test-id="inter"
+          >
+            Inter
+          </button>
+          <button
+            onClick={() => editor.chain().focus().setFontFamily('Comic Sans MS, Comic Sans').run()}
+            className={
+              editor.isActive('textStyle', { fontFamily: 'Comic Sans MS, Comic Sans' })
+                ? 'is-active'
+                : ''
+            }
+            data-test-id="comic-sans"
+          >
+            Comic Sans
+          </button>
+          <button
+            onClick={() => editor.chain().focus().setFontFamily('serif').run()}
+            className={editor.isActive('textStyle', { fontFamily: 'serif' }) ? 'is-active' : ''}
+            data-test-id="serif"
+          >
+            Serif
+          </button>
+          <button
+            onClick={() => editor.chain().focus().setFontFamily('monospace').run()}
+            className={editor.isActive('textStyle', { fontFamily: 'monospace' }) ? 'is-active' : ''}
+            data-test-id="monospace"
+          >
+            Monospace
+          </button>
+          <button
+            onClick={() => editor.chain().focus().setFontFamily('cursive').run()}
+            className={editor.isActive('textStyle', { fontFamily: 'cursive' }) ? 'is-active' : ''}
+            data-test-id="cursive"
+          >
+            Cursive
+          </button>
+          <button
+            onClick={() => editor.chain().focus().setFontFamily('var(--title-font-family)').run()}
+            className={editor.isActive('textStyle', { fontFamily: 'var(--title-font-family)' }) ? 'is-active' : ''}
+            data-test-id="css-variable"
+          >
+            CSS variable
+          </button>
+          <button
+            onClick={() => editor.chain().focus().setFontFamily('"Comic Sans MS", "Comic Sans"').run()}
+            className={editor.isActive('textStyle', { fontFamily: '"Comic Sans"' }) ? 'is-active' : ''}
+            data-test-id="comic-sans-quoted"
+          >
+            Comic Sans quoted
+          </button>
+          <button onClick={() => editor.chain().focus().unsetFontFamily().run()} data-test-id="unsetFontFamily">
+            Unset font family
+          </button>
+        </div>
+      </div>
       <EditorContent editor={editor} />
-    </div>
+    </>
   )
 }
diff --git a/demos/src/Extensions/FontFamily/React/styles.scss b/demos/src/Extensions/FontFamily/React/styles.scss
index 6a1386a78..bea34fb1c 100644
--- a/demos/src/Extensions/FontFamily/React/styles.scss
+++ b/demos/src/Extensions/FontFamily/React/styles.scss
@@ -1,15 +1,10 @@
+/* Basic editor styles */
+.tiptap {
+  :first-child {
+    margin-top: 0;
+  }
+}
 
 html {
   --title-font-family: 'Helvetica', sans-serif;
 }
-
-.tiptap {
-  > * + * {
-    margin-top: 0.75em;
-  }
-
-  ul,
-  ol {
-    padding: 0 1rem;
-  }
-}
diff --git a/demos/src/Extensions/FontFamily/Vue/index.vue b/demos/src/Extensions/FontFamily/Vue/index.vue
index 325a8793c..852cf3fa4 100644
--- a/demos/src/Extensions/FontFamily/Vue/index.vue
+++ b/demos/src/Extensions/FontFamily/Vue/index.vue
@@ -1,24 +1,27 @@
 <template>
-  <div v-if="editor">
-    <button @click="editor.chain().focus().setFontFamily('Inter').run()" :class="{ 'is-active': editor.isActive('textStyle', { fontFamily: 'Inter' }) }">
-      Inter
-    </button>
-    <button @click="editor.chain().focus().setFontFamily('Comic Sans MS, Comic Sans').run()" :class="{ 'is-active': editor.isActive('textStyle', { fontFamily: 'Comic Sans MS, Comic Sans' }) }">
-      Comic Sans
-    </button>
-    <button @click="editor.chain().focus().setFontFamily('serif').run()" :class="{ 'is-active': editor.isActive('textStyle', { fontFamily: 'serif' }) }">
-      serif
-    </button>
-    <button @click="editor.chain().focus().setFontFamily('monospace').run()" :class="{ 'is-active': editor.isActive('textStyle', { fontFamily: 'monospace' }) }">
-      monospace
-    </button>
-    <button @click="editor.chain().focus().setFontFamily('cursive').run()" :class="{ 'is-active': editor.isActive('textStyle', { fontFamily: 'cursive' }) }">
-      cursive
-    </button>
-    <button @click="editor.chain().focus().unsetFontFamily().run()">
-      unsetFontFamily
-    </button>
-
+  <div v-if="editor" class="container">
+    <div class="control-group">
+      <div class="button-group">
+        <button @click="editor.chain().focus().setFontFamily('Inter').run()" :class="{ 'is-active': editor.isActive('textStyle', { fontFamily: 'Inter' }) }">
+          Inter
+        </button>
+        <button @click="editor.chain().focus().setFontFamily('Comic Sans MS, Comic Sans').run()" :class="{ 'is-active': editor.isActive('textStyle', { fontFamily: 'Comic Sans MS, Comic Sans' }) }">
+          Comic Sans
+        </button>
+        <button @click="editor.chain().focus().setFontFamily('serif').run()" :class="{ 'is-active': editor.isActive('textStyle', { fontFamily: 'serif' }) }">
+          Serif
+        </button>
+        <button @click="editor.chain().focus().setFontFamily('monospace').run()" :class="{ 'is-active': editor.isActive('textStyle', { fontFamily: 'monospace' }) }">
+          Monospace
+        </button>
+        <button @click="editor.chain().focus().setFontFamily('cursive').run()" :class="{ 'is-active': editor.isActive('textStyle', { fontFamily: 'cursive' }) }">
+          Cursive
+        </button>
+        <button @click="editor.chain().focus().unsetFontFamily().run()">
+          Unset font family
+        </button>
+      </div>
+    </div>
     <editor-content :editor="editor" />
   </div>
 </template>
@@ -66,3 +69,12 @@ export default {
   },
 }
 </script>
+
+<style lang="scss">
+/* Basic editor styles */
+.tiptap {
+  :first-child {
+    margin-top: 0;
+  }
+}
+</style>
diff --git a/demos/src/Extensions/Gapcursor/React/index.jsx b/demos/src/Extensions/Gapcursor/React/index.jsx
index b0510c2f1..a9c2e5b44 100644
--- a/demos/src/Extensions/Gapcursor/React/index.jsx
+++ b/demos/src/Extensions/Gapcursor/React/index.jsx
@@ -13,7 +13,7 @@ export default () => {
     extensions: [Document, Paragraph, Text, Image, Gapcursor],
     content: `
         <p>Try to move the cursor after the image with your arrow keys! You should see a horizontal blinking cursor below the image. This is the gapcursor.</p>
-        <img src="https://source.unsplash.com/8xznAGy4HcY/800x400" />
+        <img src="https://placehold.co/800x400" />
       `,
   })
 
diff --git a/demos/src/Extensions/Gapcursor/React/styles.scss b/demos/src/Extensions/Gapcursor/React/styles.scss
index 940039123..51aa105ad 100644
--- a/demos/src/Extensions/Gapcursor/React/styles.scss
+++ b/demos/src/Extensions/Gapcursor/React/styles.scss
@@ -1,11 +1,17 @@
 /* Basic editor styles */
 .tiptap {
-  > * + * {
-    margin-top: 0.75em;
+  :first-child {
+    margin-top: 0;
   }
 
   img {
+    display: block;
     height: auto;
+    margin: 1.5rem 0;
     max-width: 100%;
+
+    &.ProseMirror-selectednode {
+      outline: 3px solid var(--purple);
+    }
   }
 }
diff --git a/demos/src/Extensions/Gapcursor/Vue/index.vue b/demos/src/Extensions/Gapcursor/Vue/index.vue
index 5a1b0efe2..99ef32596 100644
--- a/demos/src/Extensions/Gapcursor/Vue/index.vue
+++ b/demos/src/Extensions/Gapcursor/Vue/index.vue
@@ -32,7 +32,7 @@ export default {
       ],
       content: `
         <p>Try to move the cursor after the image with your arrow keys! You should see a horizontal blinking cursor below the image. This is the gapcursor.</p>
-        <img src="https://source.unsplash.com/8xznAGy4HcY/800x400" />
+        <img src="https://placehold.co/800x400" />
       `,
     })
   },
@@ -46,13 +46,19 @@ export default {
 <style lang="scss">
 /* Basic editor styles */
 .tiptap {
-  > * + * {
-    margin-top: 0.75em;
+  :first-child {
+    margin-top: 0;
   }
 
   img {
-    max-width: 100%;
+    display: block;
     height: auto;
+    margin: 1.5rem 0;
+    max-width: 100%;
+
+    &.ProseMirror-selectednode {
+      outline: 3px solid var(--purple);
+    }
   }
 }
 </style>
diff --git a/demos/src/Extensions/History/React/index.jsx b/demos/src/Extensions/History/React/index.jsx
index addb44b7c..ee32463b0 100644
--- a/demos/src/Extensions/History/React/index.jsx
+++ b/demos/src/Extensions/History/React/index.jsx
@@ -1,3 +1,5 @@
+import './styles.scss'
+
 import Document from '@tiptap/extension-document'
 import History from '@tiptap/extension-history'
 import Paragraph from '@tiptap/extension-paragraph'
@@ -23,15 +25,19 @@ export default () => {
   }
 
   return (
-    <div>
-      <button onClick={() => editor.chain().focus().undo().run()} disabled={!editor.can().undo()}>
-        undo
-      </button>
-      <button onClick={() => editor.chain().focus().redo().run()} disabled={!editor.can().redo()}>
-        redo
-      </button>
+    <>
+      <div className="control-group">
+        <div className="button-group">
+          <button onClick={() => editor.chain().focus().undo().run()} disabled={!editor.can().undo()}>
+            Undo
+          </button>
+          <button onClick={() => editor.chain().focus().redo().run()} disabled={!editor.can().redo()}>
+            Redo
+          </button>
+        </div>
+      </div>
 
       <EditorContent editor={editor} />
-    </div>
+    </>
   )
 }
diff --git a/demos/src/Extensions/History/React/styles.scss b/demos/src/Extensions/History/React/styles.scss
new file mode 100644
index 000000000..afd5ba214
--- /dev/null
+++ b/demos/src/Extensions/History/React/styles.scss
@@ -0,0 +1,6 @@
+/* Basic editor styles */
+.tiptap {
+  :first-child {
+    margin-top: 0;
+  }
+}
diff --git a/demos/src/Extensions/History/Vue/index.vue b/demos/src/Extensions/History/Vue/index.vue
index 536db0822..33ec10b18 100644
--- a/demos/src/Extensions/History/Vue/index.vue
+++ b/demos/src/Extensions/History/Vue/index.vue
@@ -1,18 +1,21 @@
 <template>
-  <div v-if="editor">
-    <button
-      @click="editor.chain().focus().undo().run()"
-      :disabled="!editor.can().undo()"
-    >
-      undo
-    </button>
-    <button
-      @click="editor.chain().focus().redo().run()"
-      :disabled="!editor.can().redo()"
-    >
-      redo
-    </button>
-
+  <div v-if="editor" class="container">
+    <div class="control-group">
+      <div class="button-group">
+        <button
+          @click="editor.chain().focus().undo().run()"
+          :disabled="!editor.can().undo()"
+        >
+          Undo
+        </button>
+        <button
+          @click="editor.chain().focus().redo().run()"
+          :disabled="!editor.can().redo()"
+        >
+          Redo
+        </button>
+      </div>
+    </div>
     <editor-content :editor="editor" />
   </div>
 </template>
@@ -59,3 +62,12 @@ export default {
   },
 }
 </script>
+
+<style lang="scss">
+/* Basic editor styles */
+.tiptap {
+  :first-child {
+    margin-top: 0;
+  }
+}
+</style>
diff --git a/demos/src/Extensions/ListKeymap/React/index.jsx b/demos/src/Extensions/ListKeymap/React/index.jsx
index 87a34be1d..b822c28d1 100644
--- a/demos/src/Extensions/ListKeymap/React/index.jsx
+++ b/demos/src/Extensions/ListKeymap/React/index.jsx
@@ -26,30 +26,34 @@ export default () => {
 
   return (
     <>
-      <button
-        onClick={() => editor.chain().focus().toggleBulletList().run()}
-        className={editor.isActive('bulletList') ? 'is-active' : ''}
-      >
-        toggleBulletList
-      </button>
-      <button
-        onClick={() => editor.chain().focus().splitListItem('listItem').run()}
-        disabled={!editor.can().splitListItem('listItem')}
-      >
-        splitListItem
-      </button>
-      <button
-        onClick={() => editor.chain().focus().sinkListItem('listItem').run()}
-        disabled={!editor.can().sinkListItem('listItem')}
-      >
-        sinkListItem
-      </button>
-      <button
-        onClick={() => editor.chain().focus().liftListItem('listItem').run()}
-        disabled={!editor.can().liftListItem('listItem')}
-      >
-        liftListItem
-      </button>
+      <div className="control-group">
+        <div className="button-group">
+          <button
+            onClick={() => editor.chain().focus().toggleBulletList().run()}
+            className={editor.isActive('bulletList') ? 'is-active' : ''}
+          >
+            Toggle bullet list
+          </button>
+          <button
+            onClick={() => editor.chain().focus().splitListItem('listItem').run()}
+            disabled={!editor.can().splitListItem('listItem')}
+          >
+            Split list item
+          </button>
+          <button
+            onClick={() => editor.chain().focus().sinkListItem('listItem').run()}
+            disabled={!editor.can().sinkListItem('listItem')}
+          >
+            Sink list item
+          </button>
+          <button
+            onClick={() => editor.chain().focus().liftListItem('listItem').run()}
+            disabled={!editor.can().liftListItem('listItem')}
+          >
+            Lift list item
+          </button>
+        </div>
+      </div>
 
       <EditorContent editor={editor} />
     </>
diff --git a/demos/src/Extensions/ListKeymap/React/styles.scss b/demos/src/Extensions/ListKeymap/React/styles.scss
index bb33a9715..83cabbd9f 100644
--- a/demos/src/Extensions/ListKeymap/React/styles.scss
+++ b/demos/src/Extensions/ListKeymap/React/styles.scss
@@ -1,11 +1,18 @@
 /* Basic editor styles */
 .tiptap {
-  > * + * {
-    margin-top: 0.75em;
+  :first-child {
+    margin-top: 0;
   }
 
-  ul,
+  /* List styles */
+  ul, 
   ol {
     padding: 0 1rem;
+    margin: 1.25rem 1rem 1.25rem 0.4rem;
+    
+    li p {
+      margin-top: 0.25em;
+      margin-bottom: 0.25em;
+    }
   }
 }
diff --git a/demos/src/Extensions/Placeholder/React/styles.scss b/demos/src/Extensions/Placeholder/React/styles.scss
index 5a8b4b37d..879b4954e 100644
--- a/demos/src/Extensions/Placeholder/React/styles.scss
+++ b/demos/src/Extensions/Placeholder/React/styles.scss
@@ -1,24 +1,109 @@
 /* Basic editor styles */
 .tiptap {
-  > * + * {
-    margin-top: 0.75em;
+  :first-child {
+    margin-top: 0;
   }
-}
 
-/* Placeholder (at the top) */
-.tiptap .is-editor-empty:first-child::before {
-  color: #adb5bd;
-  content: attr(data-placeholder);
-  float: left;
-  height: 0;
-  pointer-events: none;
-}
+  /* List styles */
+  ul, 
+  ol {
+    padding: 0 1rem;
+    margin: 1.25rem 1rem 1.25rem 0.4rem;
+    
+    li p {
+      margin-top: 0.25em;
+      margin-bottom: 0.25em;
+    }
+  }
 
-/* Placeholder (on every new line) */
-/*.tiptap p.is-empty::before {
-  color: #adb5bd;
-  content: attr(data-placeholder);
-  float: left;
-  height: 0;
-  pointer-events: none;
-}*/
+  /* Heading styles */
+  h1, 
+  h2, 
+  h3, 
+  h4, 
+  h5, 
+  h6 {
+    line-height: 1.1;
+    margin-top: 2.5rem;
+    text-wrap: pretty;
+  }
+
+  h1, 
+  h2 {
+    margin-top: 3.5rem;
+    margin-bottom: 1.5rem;
+  }
+
+  h1 { 
+    font-size: 1.4rem; 
+  }
+
+  h2 { 
+    font-size: 1.2rem; 
+  }
+
+  h3 { 
+    font-size: 1.1rem; 
+  }
+
+  h4, 
+  h5, 
+  h6 { 
+    font-size: 1rem; 
+  }
+
+  /* Code and preformatted text styles */
+  code {
+    background-color: var(--purple-light);
+    border-radius: 0.4rem;
+    color: var(--black);
+    font-size: 0.85rem;
+    padding: 0.25em 0.3em;
+  }
+
+  pre {
+    background: var(--black);
+    border-radius: 0.5rem;
+    color: var(--white);
+    font-family: 'JetBrainsMono', monospace;
+    margin: 1.5rem 0;
+    padding: 0.75rem 1rem;
+
+    code {
+      background: none;
+      color: inherit;
+      font-size: 0.8rem;
+      padding: 0;
+    }
+  }
+
+  blockquote {
+    border-left: 3px solid var(--gray-3);
+    margin: 1.5rem 0;
+    padding-left: 1rem;
+  }
+
+  hr {
+    border: none;
+    border-top: 1px solid var(--gray-2);
+    margin: 2rem 0;
+  }
+    
+  /* Placeholder (at the top) */
+  p.is-editor-empty:first-child::before {
+    color: var(--gray-4);
+    content: attr(data-placeholder);
+    float: left;
+    height: 0;
+    pointer-events: none;
+  }
+
+  /* Placeholder (on every new line) */
+  /* .is-empty::before {
+    color: var(--gray-4);
+    content: attr(data-placeholder);
+    float: left;
+    height: 0;
+    pointer-events: none;
+  } */
+}
diff --git a/demos/src/Extensions/Placeholder/Vue/index.vue b/demos/src/Extensions/Placeholder/Vue/index.vue
index 6c332ff4b..7e0608ed6 100644
--- a/demos/src/Extensions/Placeholder/Vue/index.vue
+++ b/demos/src/Extensions/Placeholder/Vue/index.vue
@@ -47,26 +47,111 @@ export default {
 <style lang="scss">
 /* Basic editor styles */
 .tiptap {
-  > * + * {
-    margin-top: 0.75em;
+  :first-child {
+    margin-top: 0;
   }
-}
 
-/* Placeholder (at the top) */
-.tiptap p.is-editor-empty:first-child::before {
-  content: attr(data-placeholder);
-  float: left;
-  color: #adb5bd;
-  pointer-events: none;
-  height: 0;
-}
+  /* List styles */
+  ul,
+  ol {
+    padding: 0 1rem;
+    margin: 1.25rem 1rem 1.25rem 0.4rem;
 
-/* Placeholder (on every new line) */
-/*.tiptap p.is-empty::before {
-  content: attr(data-placeholder);
-  float: left;
-  color: #adb5bd;
-  pointer-events: none;
-  height: 0;
-}*/
+    li p {
+      margin-top: 0.25em;
+      margin-bottom: 0.25em;
+    }
+  }
+
+  /* Heading styles */
+  h1,
+  h2,
+  h3,
+  h4,
+  h5,
+  h6 {
+    line-height: 1.1;
+    margin-top: 2.5rem;
+    text-wrap: pretty;
+  }
+
+  h1,
+  h2 {
+    margin-top: 3.5rem;
+    margin-bottom: 1.5rem;
+  }
+
+  h1 {
+    font-size: 1.4rem;
+  }
+
+  h2 {
+    font-size: 1.2rem;
+  }
+
+  h3 {
+    font-size: 1.1rem;
+  }
+
+  h4,
+  h5,
+  h6 {
+    font-size: 1rem;
+  }
+
+  /* Code and preformatted text styles */
+  code {
+    background-color: var(--purple-light);
+    border-radius: 0.4rem;
+    color: var(--black);
+    font-size: 0.85rem;
+    padding: 0.25em 0.3em;
+  }
+
+  pre {
+    background: var(--black);
+    border-radius: 0.5rem;
+    color: var(--white);
+    font-family: 'JetBrainsMono', monospace;
+    margin: 1.5rem 0;
+    padding: 0.75rem 1rem;
+
+    code {
+      background: none;
+      color: inherit;
+      font-size: 0.8rem;
+      padding: 0;
+    }
+  }
+
+  blockquote {
+    border-left: 3px solid var(--gray-3);
+    margin: 1.5rem 0;
+    padding-left: 1rem;
+  }
+
+  hr {
+    border: none;
+    border-top: 1px solid var(--gray-2);
+    margin: 2rem 0;
+  }
+
+  /* Placeholder (at the top) */
+  p.is-editor-empty:first-child::before {
+    color: var(--gray-4);
+    content: attr(data-placeholder);
+    float: left;
+    height: 0;
+    pointer-events: none;
+  }
+
+  /* Placeholder (on every new line) */
+  /* .is-empty::before {
+    color: var(--gray-4);
+    content: attr(data-placeholder);
+    float: left;
+    height: 0;
+    pointer-events: none;
+  } */
+}
 </style>
diff --git a/demos/src/Extensions/TextAlign/React/index.jsx b/demos/src/Extensions/TextAlign/React/index.jsx
index bf8d96825..fb31f6869 100644
--- a/demos/src/Extensions/TextAlign/React/index.jsx
+++ b/demos/src/Extensions/TextAlign/React/index.jsx
@@ -1,3 +1,5 @@
+import './styles.scss'
+
 import Document from '@tiptap/extension-document'
 import Heading from '@tiptap/extension-heading'
 import Paragraph from '@tiptap/extension-paragraph'
@@ -29,33 +31,37 @@ export default () => {
   }
 
   return (
-    <div>
-      <button
-        onClick={() => editor.chain().focus().setTextAlign('left').run()}
-        className={editor.isActive({ textAlign: 'left' }) ? 'is-active' : ''}
-      >
-        left
-      </button>
-      <button
-        onClick={() => editor.chain().focus().setTextAlign('center').run()}
-        className={editor.isActive({ textAlign: 'center' }) ? 'is-active' : ''}
-      >
-        center
-      </button>
-      <button
-        onClick={() => editor.chain().focus().setTextAlign('right').run()}
-        className={editor.isActive({ textAlign: 'right' }) ? 'is-active' : ''}
-      >
-        right
-      </button>
-      <button
-        onClick={() => editor.chain().focus().setTextAlign('justify').run()}
-        className={editor.isActive({ textAlign: 'justify' }) ? 'is-active' : ''}
-      >
-        justify
-      </button>
-      <button onClick={() => editor.chain().focus().unsetTextAlign().run()}>unsetTextAlign</button>
+    <>
+      <div className="control-group">
+        <div className="button-group">
+          <button
+            onClick={() => editor.chain().focus().setTextAlign('left').run()}
+            className={editor.isActive({ textAlign: 'left' }) ? 'is-active' : ''}
+          >
+            Left
+          </button>
+          <button
+            onClick={() => editor.chain().focus().setTextAlign('center').run()}
+            className={editor.isActive({ textAlign: 'center' }) ? 'is-active' : ''}
+          >
+            Center
+          </button>
+          <button
+            onClick={() => editor.chain().focus().setTextAlign('right').run()}
+            className={editor.isActive({ textAlign: 'right' }) ? 'is-active' : ''}
+          >
+            Right
+          </button>
+          <button
+            onClick={() => editor.chain().focus().setTextAlign('justify').run()}
+            className={editor.isActive({ textAlign: 'justify' }) ? 'is-active' : ''}
+          >
+            Justify
+          </button>
+          <button onClick={() => editor.chain().focus().unsetTextAlign().run()}>Unset text align</button>
+        </div>
+      </div>
       <EditorContent editor={editor} />
-    </div>
+    </>
   )
 }
diff --git a/demos/src/Extensions/TextAlign/React/styles.scss b/demos/src/Extensions/TextAlign/React/styles.scss
new file mode 100644
index 000000000..ec1db9057
--- /dev/null
+++ b/demos/src/Extensions/TextAlign/React/styles.scss
@@ -0,0 +1,42 @@
+/* Basic editor styles */
+.tiptap {
+  :first-child {
+    margin-top: 0;
+  }
+
+  /* Heading styles */
+  h1, 
+  h2, 
+  h3, 
+  h4, 
+  h5, 
+  h6 {
+    line-height: 1.1;
+    margin-top: 2.5rem;
+    text-wrap: pretty;
+  }
+
+  h1, 
+  h2 {
+    margin-top: 3.5rem;
+    margin-bottom: 1.5rem;
+  }
+
+  h1 { 
+    font-size: 1.4rem; 
+  }
+
+  h2 { 
+    font-size: 1.2rem; 
+  }
+
+  h3 { 
+    font-size: 1.1rem; 
+  }
+
+  h4, 
+  h5, 
+  h6 { 
+    font-size: 1rem; 
+  }
+}
diff --git a/demos/src/Extensions/TextAlign/Vue/index.vue b/demos/src/Extensions/TextAlign/Vue/index.vue
index edd9bbf4f..f339d030f 100644
--- a/demos/src/Extensions/TextAlign/Vue/index.vue
+++ b/demos/src/Extensions/TextAlign/Vue/index.vue
@@ -1,20 +1,24 @@
 <template>
-  <div v-if="editor">
-    <button @click="editor.chain().focus().setTextAlign('left').run()" :class="{ 'is-active': editor.isActive({ textAlign: 'left' }) }">
-      left
-    </button>
-    <button @click="editor.chain().focus().setTextAlign('center').run()" :class="{ 'is-active': editor.isActive({ textAlign: 'center' }) }">
-      center
-    </button>
-    <button @click="editor.chain().focus().setTextAlign('right').run()" :class="{ 'is-active': editor.isActive({ textAlign: 'right' }) }">
-      right
-    </button>
-    <button @click="editor.chain().focus().setTextAlign('justify').run()" :class="{ 'is-active': editor.isActive({ textAlign: 'justify' }) }">
-      justify
-    </button>
-    <button @click="editor.chain().focus().unsetTextAlign().run()">
-      unsetTextAlign
-    </button>
+  <div v-if="editor" class="container">
+    <div class="control-group">
+      <div class="button-group">
+        <button @click="editor.chain().focus().setTextAlign('left').run()" :class="{ 'is-active': editor.isActive({ textAlign: 'left' }) }">
+          Left
+        </button>
+        <button @click="editor.chain().focus().setTextAlign('center').run()" :class="{ 'is-active': editor.isActive({ textAlign: 'center' }) }">
+          Center
+        </button>
+        <button @click="editor.chain().focus().setTextAlign('right').run()" :class="{ 'is-active': editor.isActive({ textAlign: 'right' }) }">
+          Right
+        </button>
+        <button @click="editor.chain().focus().setTextAlign('justify').run()" :class="{ 'is-active': editor.isActive({ textAlign: 'justify' }) }">
+          Justify
+        </button>
+        <button @click="editor.chain().focus().unsetTextAlign().run()">
+          Unset text align
+        </button>
+      </div>
+    </div>
     <editor-content :editor="editor" />
   </div>
 </template>
@@ -62,3 +66,48 @@ export default {
   },
 }
 </script>
+
+<style lang="scss">
+/* Basic editor styles */
+.tiptap {
+  :first-child {
+    margin-top: 0;
+  }
+
+  /* Heading styles */
+  h1,
+  h2,
+  h3,
+  h4,
+  h5,
+  h6 {
+    line-height: 1.1;
+    margin-top: 2.5rem;
+    text-wrap: pretty;
+  }
+
+  h1,
+  h2 {
+    margin-top: 3.5rem;
+    margin-bottom: 1.5rem;
+  }
+
+  h1 {
+    font-size: 1.4rem;
+  }
+
+  h2 {
+    font-size: 1.2rem;
+  }
+
+  h3 {
+    font-size: 1.1rem;
+  }
+
+  h4,
+  h5,
+  h6 {
+    font-size: 1rem;
+  }
+}
+</style>
diff --git a/demos/src/Extensions/Typography/React/index.jsx b/demos/src/Extensions/Typography/React/index.jsx
index 002e59854..37c7a6807 100644
--- a/demos/src/Extensions/Typography/React/index.jsx
+++ b/demos/src/Extensions/Typography/React/index.jsx
@@ -1,3 +1,5 @@
+import './styles.scss'
+
 import Document from '@tiptap/extension-document'
 import Paragraph from '@tiptap/extension-paragraph'
 import Text from '@tiptap/extension-text'
diff --git a/demos/src/Extensions/Typography/React/styles.scss b/demos/src/Extensions/Typography/React/styles.scss
new file mode 100644
index 000000000..afd5ba214
--- /dev/null
+++ b/demos/src/Extensions/Typography/React/styles.scss
@@ -0,0 +1,6 @@
+/* Basic editor styles */
+.tiptap {
+  :first-child {
+    margin-top: 0;
+  }
+}
diff --git a/demos/src/Extensions/Typography/Vue/index.vue b/demos/src/Extensions/Typography/Vue/index.vue
index 57eb5ac74..63d585ba7 100644
--- a/demos/src/Extensions/Typography/Vue/index.vue
+++ b/demos/src/Extensions/Typography/Vue/index.vue
@@ -40,3 +40,12 @@ export default {
   },
 }
 </script>
+
+<style lang="scss">
+/* Basic editor styles */
+.tiptap {
+  :first-child {
+    margin-top: 0;
+  }
+}
+</style>
diff --git a/demos/src/GuideContent/ExportHTML/React/index.jsx b/demos/src/GuideContent/ExportHTML/React/index.jsx
index aed03881c..05af0d91b 100644
--- a/demos/src/GuideContent/ExportHTML/React/index.jsx
+++ b/demos/src/GuideContent/ExportHTML/React/index.jsx
@@ -54,31 +54,33 @@ export default () => {
 
   return (
     <>
-      <div className="actions">
-        <button className="button" onClick={setContent}>
-          Set Content
-        </button>
-        <button className="button" onClick={clearContent}>
-          Clear Content
-        </button>
-        <button
-          onClick={() => editor.chain().focus().toggleBold().run()}
-          className={editor.isActive('bold') ? 'is-active' : ''}
-        >
-          Bold
-        </button>
-        <button
-          onClick={() => editor.chain().focus().toggleItalic().run()}
-          className={editor.isActive('italic') ? 'is-active' : ''}
-        >
-          Italic
-        </button>
+      <div className="control-group">
+        <div className="button-group">
+          <button className="button" onClick={setContent}>
+            Set content
+          </button>
+          <button className="button" onClick={clearContent}>
+            Clear content
+          </button>
+          <button
+            onClick={() => editor.chain().focus().toggleBold().run()}
+            className={editor.isActive('bold') ? 'is-active' : ''}
+          >
+            Bold
+          </button>
+          <button
+            onClick={() => editor.chain().focus().toggleItalic().run()}
+            className={editor.isActive('italic') ? 'is-active' : ''}
+          >
+            Italic
+          </button>
+        </div>
       </div>
 
       <EditorContent editor={editor} />
 
-      <div className="export">
-        <h3>HTML</h3>
+      <div className="output-group">
+        <label>HTML</label>
         <pre>
           <code>{html}</code>
         </pre>
diff --git a/demos/src/GuideContent/ExportHTML/React/styles.scss b/demos/src/GuideContent/ExportHTML/React/styles.scss
index c9ddc5738..7694d7322 100644
--- a/demos/src/GuideContent/ExportHTML/React/styles.scss
+++ b/demos/src/GuideContent/ExportHTML/React/styles.scss
@@ -1,56 +1,72 @@
-/* Style the export */
-.export {
-  padding: 1rem 0 0;
-
-  h3 {
-    margin: 1rem 0 0.5rem;
-  }
-
-  pre {
-    border-radius: 5px;
-    color: #333;
-  }
-
-  code {
-    background-color: #e9ecef;
-    color: #495057;
-    display: block;
-    font-size: 0.8rem;
-    padding: 0.75rem 1rem;
-    white-space: pre-wrap;
-  }
-}
-
 /* Basic editor styles */
 .tiptap {
-  > * + * {
-    margin-top: 0.75em;
+  :first-child {
+    margin-top: 0;
   }
 
-  ul,
+  /* List styles */
+  ul, 
   ol {
     padding: 0 1rem;
+    margin: 1.25rem 1rem 1.25rem 0.4rem;
+    
+    li p {
+      margin-top: 0.25em;
+      margin-bottom: 0.25em;
+    }
   }
 
-  h1,
-  h2,
-  h3,
-  h4,
-  h5,
+  /* Heading styles */
+  h1, 
+  h2, 
+  h3, 
+  h4, 
+  h5, 
   h6 {
     line-height: 1.1;
+    margin-top: 2.5rem;
+    text-wrap: pretty;
   }
 
+  h1, 
+  h2 {
+    margin-top: 3.5rem;
+    margin-bottom: 1.5rem;
+  }
+
+  h1 { 
+    font-size: 1.4rem; 
+  }
+
+  h2 { 
+    font-size: 1.2rem; 
+  }
+
+  h3 { 
+    font-size: 1.1rem; 
+  }
+
+  h4, 
+  h5, 
+  h6 { 
+    font-size: 1rem; 
+  }
+
+  /* Code and preformatted text styles */
   code {
-    background-color: rgba(#616161, 0.1);
-    color: #616161;
+    background-color: var(--purple-light);
+    border-radius: 0.4rem;
+    color: var(--black);
+    font-size: 0.85rem;
+    padding: 0.25em 0.3em;
   }
 
   pre {
-    background: #0d0d0d;
+    background: var(--black);
     border-radius: 0.5rem;
-    color: #fff;
-    font-family: "JetBrainsMono", monospace;
+    color: var(--white);
+    font-family: 'JetBrainsMono', monospace;
+    margin: 1.5rem 0;
     padding: 0.75rem 1rem;
 
     code {
@@ -61,17 +77,15 @@
     }
   }
 
-  img {
-    height: auto;
-    max-width: 100%;
+  blockquote {
+    border-left: 3px solid var(--gray-3);
+    margin: 1.5rem 0;
+    padding-left: 1rem;
   }
 
   hr {
-    margin: 1rem 0;
-  }
-
-  blockquote {
-    border-left: 2px solid rgba(#0d0d0d, 0.1);
-    padding-left: 1rem;
+    border: none;
+    border-top: 1px solid var(--gray-2);
+    margin: 2rem 0;
   }
 }
diff --git a/demos/src/GuideContent/ExportHTML/Vue/index.vue b/demos/src/GuideContent/ExportHTML/Vue/index.vue
index 769af300b..25e6104d0 100644
--- a/demos/src/GuideContent/ExportHTML/Vue/index.vue
+++ b/demos/src/GuideContent/ExportHTML/Vue/index.vue
@@ -1,24 +1,26 @@
 <template>
-  <div>
-    <div class="actions" v-if="editor">
-      <button class="button" @click="setContent">
-        Set Content
-      </button>
-      <button class="button" @click="clearContent">
-        Clear Content
-      </button>
-      <button @click="editor.chain().focus().toggleBold().run()" :class="{ 'is-active': editor.isActive('bold') }">
-        Bold
-      </button>
-      <button @click="editor.chain().focus().toggleItalic().run()" :class="{ 'is-active': editor.isActive('italic') }">
-        Italic
-      </button>
+  <div v-if="editor" class="container">
+    <div class="control-group">
+      <div class="button-group">
+        <button class="button" @click="setContent">
+          Set content
+        </button>
+        <button class="button" @click="clearContent">
+          Clear content
+        </button>
+        <button @click="editor.chain().focus().toggleBold().run()" :class="{ 'is-active': editor.isActive('bold') }">
+          Bold
+        </button>
+        <button @click="editor.chain().focus().toggleItalic().run()" :class="{ 'is-active': editor.isActive('italic') }">
+          Italic
+        </button>
+      </div>
     </div>
 
     <editor-content :editor="editor" />
 
-    <div class="export">
-      <h3>HTML</h3>
+    <div class="output-group">
+      <label>HTML</label>
       <pre><code>{{ html }}</code></pre>
     </div>
   </div>
@@ -90,40 +92,25 @@ export default {
 </script>
 
 <style lang="scss">
-/* Style the export */
-.export {
-  padding: 1rem 0 0;
-
-  h3 {
-    margin: 1rem 0 0.5rem;
-  }
-
-  pre {
-    border-radius: 5px;
-    color: #333;
-  }
-
-  code {
-    display: block;
-    white-space: pre-wrap;
-    font-size: 0.8rem;
-    padding: 0.75rem 1rem;
-    background-color:#e9ecef;
-    color: #495057;
-  }
-}
-
 /* Basic editor styles */
 .tiptap {
-  > * + * {
-    margin-top: 0.75em;
+  :first-child {
+    margin-top: 0;
   }
 
+  /* List styles */
   ul,
   ol {
     padding: 0 1rem;
+    margin: 1.25rem 1rem 1.25rem 0.4rem;
+
+    li p {
+      margin-top: 0.25em;
+      margin-bottom: 0.25em;
+    }
   }
 
+  /* Heading styles */
   h1,
   h2,
   h3,
@@ -131,40 +118,69 @@ export default {
   h5,
   h6 {
     line-height: 1.1;
+    margin-top: 2.5rem;
+    text-wrap: pretty;
   }
 
+  h1,
+  h2 {
+    margin-top: 3.5rem;
+    margin-bottom: 1.5rem;
+  }
+
+  h1 {
+    font-size: 1.4rem;
+  }
+
+  h2 {
+    font-size: 1.2rem;
+  }
+
+  h3 {
+    font-size: 1.1rem;
+  }
+
+  h4,
+  h5,
+  h6 {
+    font-size: 1rem;
+  }
+
+  /* Code and preformatted text styles */
   code {
-    background-color: rgba(#616161, 0.1);
-    color: #616161;
+    background-color: var(--purple-light);
+    border-radius: 0.4rem;
+    color: var(--black);
+    font-size: 0.85rem;
+    padding: 0.25em 0.3em;
   }
 
   pre {
-    background: #0D0D0D;
-    color: #FFF;
-    font-family: 'JetBrainsMono', monospace;
-    padding: 0.75rem 1rem;
+    background: var(--black);
     border-radius: 0.5rem;
+    color: var(--white);
+    font-family: 'JetBrainsMono', monospace;
+    margin: 1.5rem 0;
+    padding: 0.75rem 1rem;
 
     code {
-      color: inherit;
-      padding: 0;
       background: none;
+      color: inherit;
       font-size: 0.8rem;
+      padding: 0;
     }
   }
 
-  img {
-    max-width: 100%;
-    height: auto;
+  blockquote {
+    border-left: 3px solid var(--gray-3);
+    margin: 1.5rem 0;
+    padding-left: 1rem;
   }
 
   hr {
-    margin: 1rem 0;
-  }
-
-  blockquote {
-    padding-left: 1rem;
-    border-left: 2px solid rgba(#0D0D0D, 0.1);
+    border: none;
+    border-top: 1px solid var(--gray-2);
+    margin: 2rem 0;
   }
 }
 </style>
diff --git a/demos/src/GuideContent/ExportJSON/React/index.jsx b/demos/src/GuideContent/ExportJSON/React/index.jsx
index 15bd1bf02..c2a0fcd3d 100644
--- a/demos/src/GuideContent/ExportJSON/React/index.jsx
+++ b/demos/src/GuideContent/ExportJSON/React/index.jsx
@@ -63,31 +63,33 @@ export default () => {
 
   return (
     <>
-      <div className="actions">
-        <button className="button" onClick={setContent}>
-          Set Content
-        </button>
-        <button className="button" onClick={clearContent}>
-          Clear Content
-        </button>
-        <button
-          onClick={() => editor.chain().focus().toggleBold().run()}
-          className={editor.isActive('bold') ? 'is-active' : ''}
-        >
-          Bold
-        </button>
-        <button
-          onClick={() => editor.chain().focus().toggleItalic().run()}
-          className={editor.isActive('italic') ? 'is-active' : ''}
-        >
-          Italic
-        </button>
+      <div className="control-group">
+        <div className="button-group">
+          <button className="button" onClick={setContent}>
+            Set content
+          </button>
+          <button className="button" onClick={clearContent}>
+            Clear content
+          </button>
+          <button
+            onClick={() => editor.chain().focus().toggleBold().run()}
+            className={editor.isActive('bold') ? 'is-active' : ''}
+          >
+            Bold
+          </button>
+          <button
+            onClick={() => editor.chain().focus().toggleItalic().run()}
+            className={editor.isActive('italic') ? 'is-active' : ''}
+          >
+            Italic
+          </button>
+        </div>
       </div>
 
       <EditorContent editor={editor} />
 
-      <div className="export">
-        <h3>JSON</h3>
+      <div className="output-group">
+        <label>JSON</label>
         <pre>
           <code>{JSON.stringify(json, null, 2)}</code>
         </pre>
diff --git a/demos/src/GuideContent/ExportJSON/React/styles.scss b/demos/src/GuideContent/ExportJSON/React/styles.scss
index c9ddc5738..7694d7322 100644
--- a/demos/src/GuideContent/ExportJSON/React/styles.scss
+++ b/demos/src/GuideContent/ExportJSON/React/styles.scss
@@ -1,56 +1,72 @@
-/* Style the export */
-.export {
-  padding: 1rem 0 0;
-
-  h3 {
-    margin: 1rem 0 0.5rem;
-  }
-
-  pre {
-    border-radius: 5px;
-    color: #333;
-  }
-
-  code {
-    background-color: #e9ecef;
-    color: #495057;
-    display: block;
-    font-size: 0.8rem;
-    padding: 0.75rem 1rem;
-    white-space: pre-wrap;
-  }
-}
-
 /* Basic editor styles */
 .tiptap {
-  > * + * {
-    margin-top: 0.75em;
+  :first-child {
+    margin-top: 0;
   }
 
-  ul,
+  /* List styles */
+  ul, 
   ol {
     padding: 0 1rem;
+    margin: 1.25rem 1rem 1.25rem 0.4rem;
+    
+    li p {
+      margin-top: 0.25em;
+      margin-bottom: 0.25em;
+    }
   }
 
-  h1,
-  h2,
-  h3,
-  h4,
-  h5,
+  /* Heading styles */
+  h1, 
+  h2, 
+  h3, 
+  h4, 
+  h5, 
   h6 {
     line-height: 1.1;
+    margin-top: 2.5rem;
+    text-wrap: pretty;
   }
 
+  h1, 
+  h2 {
+    margin-top: 3.5rem;
+    margin-bottom: 1.5rem;
+  }
+
+  h1 { 
+    font-size: 1.4rem; 
+  }
+
+  h2 { 
+    font-size: 1.2rem; 
+  }
+
+  h3 { 
+    font-size: 1.1rem; 
+  }
+
+  h4, 
+  h5, 
+  h6 { 
+    font-size: 1rem; 
+  }
+
+  /* Code and preformatted text styles */
   code {
-    background-color: rgba(#616161, 0.1);
-    color: #616161;
+    background-color: var(--purple-light);
+    border-radius: 0.4rem;
+    color: var(--black);
+    font-size: 0.85rem;
+    padding: 0.25em 0.3em;
   }
 
   pre {
-    background: #0d0d0d;
+    background: var(--black);
     border-radius: 0.5rem;
-    color: #fff;
-    font-family: "JetBrainsMono", monospace;
+    color: var(--white);
+    font-family: 'JetBrainsMono', monospace;
+    margin: 1.5rem 0;
     padding: 0.75rem 1rem;
 
     code {
@@ -61,17 +77,15 @@
     }
   }
 
-  img {
-    height: auto;
-    max-width: 100%;
+  blockquote {
+    border-left: 3px solid var(--gray-3);
+    margin: 1.5rem 0;
+    padding-left: 1rem;
   }
 
   hr {
-    margin: 1rem 0;
-  }
-
-  blockquote {
-    border-left: 2px solid rgba(#0d0d0d, 0.1);
-    padding-left: 1rem;
+    border: none;
+    border-top: 1px solid var(--gray-2);
+    margin: 2rem 0;
   }
 }
diff --git a/demos/src/GuideContent/ExportJSON/Vue/index.vue b/demos/src/GuideContent/ExportJSON/Vue/index.vue
index 69af684aa..9b7162ccf 100644
--- a/demos/src/GuideContent/ExportJSON/Vue/index.vue
+++ b/demos/src/GuideContent/ExportJSON/Vue/index.vue
@@ -1,24 +1,26 @@
 <template>
-  <div>
-    <div class="actions" v-if="editor">
-      <button class="button" @click="setContent">
-        Set Content
-      </button>
-      <button class="button" @click="clearContent">
-        Clear Content
-      </button>
-      <button @click="editor.chain().focus().toggleBold().run()" :class="{ 'is-active': editor.isActive('bold') }">
-        Bold
-      </button>
-      <button @click="editor.chain().focus().toggleItalic().run()" :class="{ 'is-active': editor.isActive('italic') }">
-        Italic
-      </button>
+  <div v-if="editor" class="container">
+    <div class="control-group">
+      <div class="button-group">
+        <button class="button" @click="setContent">
+          Set content
+        </button>
+        <button class="button" @click="clearContent">
+          Clear content
+        </button>
+        <button @click="editor.chain().focus().toggleBold().run()" :class="{ 'is-active': editor.isActive('bold') }">
+          Bold
+        </button>
+        <button @click="editor.chain().focus().toggleItalic().run()" :class="{ 'is-active': editor.isActive('italic') }">
+          Italic
+        </button>
+      </div>
     </div>
 
     <editor-content :editor="editor" />
 
-    <div class="export">
-      <h3>JSON</h3>
+    <div class="output-group">
+      <label>JSON</label>
       <pre><code>{{ json }}</code></pre>
     </div>
   </div>
@@ -97,40 +99,25 @@ export default {
 </script>
 
 <style lang="scss">
-/* Style the export */
-.export {
-  padding: 1rem 0 0;
-
-  h3 {
-    margin: 1rem 0 0.5rem;
-  }
-
-  pre {
-    border-radius: 5px;
-    color: #333;
-  }
-
-  code {
-    display: block;
-    white-space: pre-wrap;
-    font-size: 0.8rem;
-    padding: 0.75rem 1rem;
-    background-color:#e9ecef;
-    color: #495057;
-  }
-}
-
 /* Basic editor styles */
 .tiptap {
-  > * + * {
-    margin-top: 0.75em;
+  :first-child {
+    margin-top: 0;
   }
 
+  /* List styles */
   ul,
   ol {
     padding: 0 1rem;
+    margin: 1.25rem 1rem 1.25rem 0.4rem;
+
+    li p {
+      margin-top: 0.25em;
+      margin-bottom: 0.25em;
+    }
   }
 
+  /* Heading styles */
   h1,
   h2,
   h3,
@@ -138,40 +125,69 @@ export default {
   h5,
   h6 {
     line-height: 1.1;
+    margin-top: 2.5rem;
+    text-wrap: pretty;
   }
 
+  h1,
+  h2 {
+    margin-top: 3.5rem;
+    margin-bottom: 1.5rem;
+  }
+
+  h1 {
+    font-size: 1.4rem;
+  }
+
+  h2 {
+    font-size: 1.2rem;
+  }
+
+  h3 {
+    font-size: 1.1rem;
+  }
+
+  h4,
+  h5,
+  h6 {
+    font-size: 1rem;
+  }
+
+  /* Code and preformatted text styles */
   code {
-    background-color: rgba(#616161, 0.1);
-    color: #616161;
+    background-color: var(--purple-light);
+    border-radius: 0.4rem;
+    color: var(--black);
+    font-size: 0.85rem;
+    padding: 0.25em 0.3em;
   }
 
   pre {
-    background: #0D0D0D;
-    color: #FFF;
-    font-family: 'JetBrainsMono', monospace;
-    padding: 0.75rem 1rem;
+    background: var(--black);
     border-radius: 0.5rem;
+    color: var(--white);
+    font-family: 'JetBrainsMono', monospace;
+    margin: 1.5rem 0;
+    padding: 0.75rem 1rem;
 
     code {
-      color: inherit;
-      padding: 0;
       background: none;
+      color: inherit;
       font-size: 0.8rem;
+      padding: 0;
     }
   }
 
-  img {
-    max-width: 100%;
-    height: auto;
+  blockquote {
+    border-left: 3px solid var(--gray-3);
+    margin: 1.5rem 0;
+    padding-left: 1rem;
   }
 
   hr {
-    margin: 1rem 0;
-  }
-
-  blockquote {
-    padding-left: 1rem;
-    border-left: 2px solid rgba(#0D0D0D, 0.1);
+    border: none;
+    border-top: 1px solid var(--gray-2);
+    margin: 2rem 0;
   }
 }
 </style>
diff --git a/demos/src/GuideContent/ReadOnly/React/index.jsx b/demos/src/GuideContent/ReadOnly/React/index.jsx
index d832aa374..657c33382 100644
--- a/demos/src/GuideContent/ReadOnly/React/index.jsx
+++ b/demos/src/GuideContent/ReadOnly/React/index.jsx
@@ -33,14 +33,16 @@ export default () => {
 
   return (
     <>
-      <div className="checkbox">
-        <input
-          type="checkbox"
-          id="editable"
-          value={editable}
-          onChange={event => setEditable(event.target.checked)}
-        />
-        <label htmlFor="editable">editable</label>
+      <div className="control-group">
+        <div className="button-group">
+          <input
+            type="checkbox"
+            id="editable"
+            value={editable}
+            onChange={event => setEditable(event.target.checked)}
+          />
+          <label htmlFor="editable">Editable</label>
+        </div>
       </div>
       <EditorContent editor={editor} />
     </>
diff --git a/demos/src/GuideContent/ReadOnly/React/styles.scss b/demos/src/GuideContent/ReadOnly/React/styles.scss
index cc51aae76..5d986479e 100644
--- a/demos/src/GuideContent/ReadOnly/React/styles.scss
+++ b/demos/src/GuideContent/ReadOnly/React/styles.scss
@@ -1,19 +1,97 @@
 /* Basic editor styles */
 .tiptap {
-  > * + * {
-    margin-top: 0.75em;
+  :first-child {
+    margin-top: 0;
+  }
+
+  /* List styles */
+  ul, 
+  ol {
+    padding: 0 1rem;
+    margin: 1.25rem 1rem 1.25rem 0.4rem;
+    
+    li p {
+      margin-top: 0.25em;
+      margin-bottom: 0.25em;
+    }
+  }
+
+  /* Heading styles */
+  h1, 
+  h2, 
+  h3, 
+  h4, 
+  h5, 
+  h6 {
+    line-height: 1.1;
+    margin-top: 2.5rem;
+    text-wrap: pretty;
+  }
+
+  h1, 
+  h2 {
+    margin-top: 3.5rem;
+    margin-bottom: 1.5rem;
+  }
+
+  h1 { 
+    font-size: 1.4rem; 
+  }
+
+  h2 { 
+    font-size: 1.2rem; 
+  }
+
+  h3 { 
+    font-size: 1.1rem; 
+  }
+
+  h4, 
+  h5, 
+  h6 { 
+    font-size: 1rem; 
+  }
+
+  /* Code and preformatted text styles */
+  code {
+    background-color: var(--purple-light);
+    border-radius: 0.4rem;
+    color: var(--black);
+    font-size: 0.85rem;
+    padding: 0.25em 0.3em;
+  }
+
+  pre {
+    background: var(--black);
+    border-radius: 0.5rem;
+    color: var(--white);
+    font-family: 'JetBrainsMono', monospace;
+    margin: 1.5rem 0;
+    padding: 0.75rem 1rem;
+
+    code {
+      background: none;
+      color: inherit;
+      font-size: 0.8rem;
+      padding: 0;
+    }
+  }
+
+  blockquote {
+    border-left: 3px solid var(--gray-3);
+    margin: 1.5rem 0;
+    padding-left: 1rem;
+  }
+
+  hr {
+    border: none;
+    border-top: 1px solid var(--gray-2);
+    margin: 2rem 0;
+  }
+    
+
+  &[contenteditable="false"] {
+    cursor: not-allowed;
+    opacity: 0.6;
   }
 }
-
-.checkbox {
-  margin-bottom: 1rem;
-
-  input[type="checkbox"] {
-    margin-right: 0.5rem;
-  }
-}
-
-[contenteditable="false"] {
-  color: #999;
-  cursor: not-allowed;
-}
diff --git a/demos/src/GuideContent/ReadOnly/Vue/index.vue b/demos/src/GuideContent/ReadOnly/Vue/index.vue
index df4976549..d4e185d11 100644
--- a/demos/src/GuideContent/ReadOnly/Vue/index.vue
+++ b/demos/src/GuideContent/ReadOnly/Vue/index.vue
@@ -1,8 +1,10 @@
 <template>
-  <div class="editor">
-    <div class="checkbox">
-      <input type="checkbox" id="editable" v-model="editable">
-      <label for="editable">editable</label>
+  <div v-if="editor" class="container">
+    <div class="control-group">
+      <div class="button-group">
+        <input type="checkbox" id="editable" v-model="editable">
+        <label for="editable">Editable</label>
+      </div>
     </div>
     <editor-content :editor="editor" />
   </div>
@@ -56,21 +58,98 @@ export default {
 <style lang="scss">
 /* Basic editor styles */
 .tiptap {
-  > * + * {
-    margin-top: 0.75em;
+  :first-child {
+    margin-top: 0;
   }
-}
 
-.checkbox {
-  margin-bottom: 1rem;
+  /* List styles */
+  ul,
+  ol {
+    padding: 0 1rem;
+    margin: 1.25rem 1rem 1.25rem 0.4rem;
 
-  input[type="checkbox"] {
-    margin-right: 0.5rem;
+    li p {
+      margin-top: 0.25em;
+      margin-bottom: 0.25em;
+    }
   }
-}
 
-[contenteditable=false] {
-  color: #999;
-  cursor: not-allowed;
+  /* Heading styles */
+  h1,
+  h2,
+  h3,
+  h4,
+  h5,
+  h6 {
+    line-height: 1.1;
+    margin-top: 2.5rem;
+    text-wrap: pretty;
+  }
+
+  h1,
+  h2 {
+    margin-top: 3.5rem;
+    margin-bottom: 1.5rem;
+  }
+
+  h1 {
+    font-size: 1.4rem;
+  }
+
+  h2 {
+    font-size: 1.2rem;
+  }
+
+  h3 {
+    font-size: 1.1rem;
+  }
+
+  h4,
+  h5,
+  h6 {
+    font-size: 1rem;
+  }
+
+  /* Code and preformatted text styles */
+  code {
+    background-color: var(--purple-light);
+    border-radius: 0.4rem;
+    color: var(--black);
+    font-size: 0.85rem;
+    padding: 0.25em 0.3em;
+  }
+
+  pre {
+    background: var(--black);
+    border-radius: 0.5rem;
+    color: var(--white);
+    font-family: 'JetBrainsMono', monospace;
+    margin: 1.5rem 0;
+    padding: 0.75rem 1rem;
+
+    code {
+      background: none;
+      color: inherit;
+      font-size: 0.8rem;
+      padding: 0;
+    }
+  }
+
+  blockquote {
+    border-left: 3px solid var(--gray-3);
+    margin: 1.5rem 0;
+    padding-left: 1rem;
+  }
+
+  hr {
+    border: none;
+    border-top: 1px solid var(--gray-2);
+    margin: 2rem 0;
+  }
+
+  &[contenteditable="false"] {
+    color: #999;
+    opacity: 0.6;
+  }
 }
 </style>
diff --git a/demos/src/GuideGettingStarted/VModel/Vue/Editor.vue b/demos/src/GuideGettingStarted/VModel/Vue/Editor.vue
index 02538e03c..ea5d31a2f 100644
--- a/demos/src/GuideGettingStarted/VModel/Vue/Editor.vue
+++ b/demos/src/GuideGettingStarted/VModel/Vue/Editor.vue
@@ -63,3 +63,97 @@ export default {
   },
 }
 </script>
+
+<style lang="scss">
+/* Basic editor styles */
+.tiptap {
+  :first-child {
+    margin-top: 0;
+  }
+
+  /* List styles */
+  ul,
+  ol {
+    padding: 0 1rem;
+    margin: 1.25rem 1rem 1.25rem 0.4rem;
+
+    li p {
+      margin-top: 0.25em;
+      margin-bottom: 0.25em;
+    }
+  }
+
+  /* Heading styles */
+  h1,
+  h2,
+  h3,
+  h4,
+  h5,
+  h6 {
+    line-height: 1.1;
+    margin-top: 2.5rem;
+    text-wrap: pretty;
+  }
+
+  h1,
+  h2 {
+    margin-top: 3.5rem;
+    margin-bottom: 1.5rem;
+  }
+
+  h1 {
+    font-size: 1.4rem;
+  }
+
+  h2 {
+    font-size: 1.2rem;
+  }
+
+  h3 {
+    font-size: 1.1rem;
+  }
+
+  h4,
+  h5,
+  h6 {
+    font-size: 1rem;
+  }
+
+  /* Code and preformatted text styles */
+  code {
+    background-color: var(--purple-light);
+    border-radius: 0.4rem;
+    color: var(--black);
+    font-size: 0.85rem;
+    padding: 0.25em 0.3em;
+  }
+
+  pre {
+    background: var(--black);
+    border-radius: 0.5rem;
+    color: var(--white);
+    font-family: 'JetBrainsMono', monospace;
+    margin: 1.5rem 0;
+    padding: 0.75rem 1rem;
+
+    code {
+      background: none;
+      color: inherit;
+      font-size: 0.8rem;
+      padding: 0;
+    }
+  }
+
+  blockquote {
+    border-left: 3px solid var(--gray-3);
+    margin: 1.5rem 0;
+    padding-left: 1rem;
+  }
+
+  hr {
+    border: none;
+    border-top: 1px solid var(--gray-2);
+    margin: 2rem 0;
+  }
+}
+</style>
diff --git a/demos/src/GuideGettingStarted/VModel/Vue/index.vue b/demos/src/GuideGettingStarted/VModel/Vue/index.vue
index 84249fd86..1596a2f39 100644
--- a/demos/src/GuideGettingStarted/VModel/Vue/index.vue
+++ b/demos/src/GuideGettingStarted/VModel/Vue/index.vue
@@ -2,9 +2,9 @@
   <div>
     <editor v-model="content" />
 
-    <div class="content">
-      <h3>Content</h3>
-      <pre><code>{{ content }}</code></pre>
+    <div class="output-group">
+      <label>Content</label>
+      <code>{{ content }}</code>
     </div>
   </div>
 </template>
@@ -19,44 +19,8 @@ export default {
 
   data() {
     return {
-      content: '<p>A Vue.js wrapper component for tiptap to use <code>v-model</code>.</p>',
+      content: '<p>A Vue.js wrapper component for Tiptap to use <code>v-model</code>.</p>',
     }
   },
 }
 </script>
-
-<style lang="scss">
-/* Basic editor styles */
-.tiptap {
-  > * + * {
-    margin-top: 0.75em;
-  }
-
-  code {
-    background-color: rgba(#616161, 0.1);
-    color: #616161;
-  }
-}
-
-.content {
-  padding: 1rem 0 0;
-
-  h3 {
-    margin: 1rem 0 0.5rem;
-  }
-
-  pre {
-    border-radius: 5px;
-    color: #333;
-  }
-
-  code {
-    display: block;
-    white-space: pre-wrap;
-    font-size: 0.8rem;
-    padding: 0.75rem 1rem;
-    background-color:#e9ecef;
-    color: #495057;
-  }
-}
-</style>
diff --git a/demos/src/GuideNodeViews/DragHandle/Vue/index.vue b/demos/src/GuideNodeViews/DragHandle/Vue/index.vue
index 4ef0eda0d..1a63785ed 100644
--- a/demos/src/GuideNodeViews/DragHandle/Vue/index.vue
+++ b/demos/src/GuideNodeViews/DragHandle/Vue/index.vue
@@ -51,3 +51,97 @@ export default {
   },
 }
 </script>
+
+<style lang="scss">
+/* Basic editor styles */
+.tiptap {
+  :first-child {
+    margin-top: 0;
+  }
+
+  /* List styles */
+  ul,
+  ol {
+    padding: 0 1rem;
+    margin: 1.25rem 1rem 1.25rem 0.4rem;
+
+    li p {
+      margin-top: 0.25em;
+      margin-bottom: 0.25em;
+    }
+  }
+
+  /* Heading styles */
+  h1,
+  h2,
+  h3,
+  h4,
+  h5,
+  h6 {
+    line-height: 1.1;
+    margin-top: 2.5rem;
+    text-wrap: pretty;
+  }
+
+  h1,
+  h2 {
+    margin-top: 3.5rem;
+    margin-bottom: 1.5rem;
+  }
+
+  h1 {
+    font-size: 1.4rem;
+  }
+
+  h2 {
+    font-size: 1.2rem;
+  }
+
+  h3 {
+    font-size: 1.1rem;
+  }
+
+  h4,
+  h5,
+  h6 {
+    font-size: 1rem;
+  }
+
+  /* Code and preformatted text styles */
+  code {
+    background-color: var(--purple-light);
+    border-radius: 0.4rem;
+    color: var(--black);
+    font-size: 0.85rem;
+    padding: 0.25em 0.3em;
+  }
+
+  pre {
+    background: var(--black);
+    border-radius: 0.5rem;
+    color: var(--white);
+    font-family: 'JetBrainsMono', monospace;
+    margin: 1.5rem 0;
+    padding: 0.75rem 1rem;
+
+    code {
+      background: none;
+      color: inherit;
+      font-size: 0.8rem;
+      padding: 0;
+    }
+  }
+
+  blockquote {
+    border-left: 3px solid var(--gray-3);
+    margin: 1.5rem 0;
+    padding-left: 1rem;
+  }
+
+  hr {
+    border: none;
+    border-top: 1px solid var(--gray-2);
+    margin: 2rem 0;
+  }
+}
+</style>
diff --git a/demos/src/GuideNodeViews/JavaScript/Vue/Extension.js b/demos/src/GuideNodeViews/JavaScript/Vue/Extension.js
index 216a7222c..caacda545 100644
--- a/demos/src/GuideNodeViews/JavaScript/Vue/Extension.js
+++ b/demos/src/GuideNodeViews/JavaScript/Vue/Extension.js
@@ -48,9 +48,8 @@ export default Node.create({
 
       dom.classList.add('node-view')
 
-      const label = document.createElement('span')
+      const label = document.createElement('label')
 
-      label.classList.add('label')
       label.innerHTML = 'Node view'
 
       const content = document.createElement('div')
diff --git a/demos/src/GuideNodeViews/JavaScript/Vue/index.vue b/demos/src/GuideNodeViews/JavaScript/Vue/index.vue
index 75ac7ffd0..fbd0b0e07 100644
--- a/demos/src/GuideNodeViews/JavaScript/Vue/index.vue
+++ b/demos/src/GuideNodeViews/JavaScript/Vue/index.vue
@@ -46,35 +46,118 @@ export default {
 <style lang="scss">
 /* Basic editor styles */
 .tiptap {
-  > * + * {
-    margin-top: 0.75em;
+  :first-child {
+    margin-top: 0;
+  }
+
+  /* List styles */
+  ul,
+  ol {
+    padding: 0 1rem;
+    margin: 1.25rem 1rem 1.25rem 0.4rem;
+
+    li p {
+      margin-top: 0.25em;
+      margin-bottom: 0.25em;
+    }
+  }
+
+  /* Heading styles */
+  h1,
+  h2,
+  h3,
+  h4,
+  h5,
+  h6 {
+    line-height: 1.1;
+    margin-top: 2.5rem;
+    text-wrap: pretty;
+  }
+
+  h1,
+  h2 {
+    margin-top: 3.5rem;
+    margin-bottom: 1.5rem;
+  }
+
+  h1 {
+    font-size: 1.4rem;
+  }
+
+  h2 {
+    font-size: 1.2rem;
+  }
+
+  h3 {
+    font-size: 1.1rem;
+  }
+
+  h4,
+  h5,
+  h6 {
+    font-size: 1rem;
+  }
+
+  /* Code and preformatted text styles */
+  code {
+    background-color: var(--purple-light);
+    border-radius: 0.4rem;
+    color: var(--black);
+    font-size: 0.85rem;
+    padding: 0.25em 0.3em;
+  }
+
+  pre {
+    background: var(--black);
+    border-radius: 0.5rem;
+    color: var(--white);
+    font-family: 'JetBrainsMono', monospace;
+    margin: 1.5rem 0;
+    padding: 0.75rem 1rem;
+
+    code {
+      background: none;
+      color: inherit;
+      font-size: 0.8rem;
+      padding: 0;
+    }
+  }
+
+  blockquote {
+    border-left: 3px solid var(--gray-3);
+    margin: 1.5rem 0;
+    padding-left: 1rem;
+  }
+
+  hr {
+    border: none;
+    border-top: 1px solid var(--gray-2);
+    margin: 2rem 0;
+  }
+
+  /* Node view */
+  .node-view {
+    background-color: var(--purple-light);
+    border: 2px solid var(--purple);
+    border-radius: 0.5rem;
+    margin: 2rem 0;
+    position: relative;
+
+    label {
+      background-color: var(--purple);
+      border-radius: 0 0 0.5rem 0;
+      color: var(--white);
+      font-size: 0.75rem;
+      font-weight: bold;
+      padding: 0.25rem 0.5rem;
+      position: absolute;
+      top: 0;
+    }
+
+    .content {
+      margin-top: 1.5rem;
+      padding: 1rem;
+    }
   }
 }
-
-.node-view {
-  background: #FAF594;
-  border: 3px solid #0D0D0D;
-  border-radius: 0.5rem;
-  margin: 1rem 0;
-  position: relative;
-}
-
-.label {
-  margin-left: 1rem;
-  background-color: #0D0D0D;
-  font-size: 0.6rem;
-  letter-spacing: 1px;
-  font-weight: bold;
-  text-transform: uppercase;
-  color: #fff;
-  position: absolute;
-  top: 0;
-  padding: 0.25rem 0.75rem;
-  border-radius: 0 0 0.5rem 0.5rem;
-}
-
-.content {
-  margin-top: 1.5rem;
-  padding: 1rem;
-}
 </style>
diff --git a/demos/src/GuideNodeViews/JavaScriptContent/Vue/Extension.js b/demos/src/GuideNodeViews/JavaScriptContent/Vue/Extension.js
index 35886d39b..b3a6cc676 100644
--- a/demos/src/GuideNodeViews/JavaScriptContent/Vue/Extension.js
+++ b/demos/src/GuideNodeViews/JavaScriptContent/Vue/Extension.js
@@ -34,15 +34,15 @@ export default Node.create({
 
       dom.classList.add('node-view')
 
-      const label = document.createElement('span')
+      const label = document.createElement('label')
 
-      label.classList.add('label')
       label.innerHTML = 'Node view'
       label.contentEditable = false
 
       const content = document.createElement('div')
 
       content.classList.add('content')
+      content.classList.add('is-editable')
 
       dom.append(label, content)
 
diff --git a/demos/src/GuideNodeViews/JavaScriptContent/Vue/index.vue b/demos/src/GuideNodeViews/JavaScriptContent/Vue/index.vue
index 60cd847db..b4653758e 100644
--- a/demos/src/GuideNodeViews/JavaScriptContent/Vue/index.vue
+++ b/demos/src/GuideNodeViews/JavaScriptContent/Vue/index.vue
@@ -48,37 +48,125 @@ export default {
 <style lang="scss">
 /* Basic editor styles */
 .tiptap {
-  > * + * {
-    margin-top: 0.75em;
+  :first-child {
+    margin-top: 0;
+  }
+
+  /* List styles */
+  ul,
+  ol {
+    padding: 0 1rem;
+    margin: 1.25rem 1rem 1.25rem 0.4rem;
+
+    li p {
+      margin-top: 0.25em;
+      margin-bottom: 0.25em;
+    }
+  }
+
+  /* Heading styles */
+  h1,
+  h2,
+  h3,
+  h4,
+  h5,
+  h6 {
+    line-height: 1.1;
+    margin-top: 2.5rem;
+    text-wrap: pretty;
+  }
+
+  h1,
+  h2 {
+    margin-top: 3.5rem;
+    margin-bottom: 1.5rem;
+  }
+
+  h1 {
+    font-size: 1.4rem;
+  }
+
+  h2 {
+    font-size: 1.2rem;
+  }
+
+  h3 {
+    font-size: 1.1rem;
+  }
+
+  h4,
+  h5,
+  h6 {
+    font-size: 1rem;
+  }
+
+  /* Code and preformatted text styles */
+  code {
+    background-color: var(--purple-light);
+    border-radius: 0.4rem;
+    color: var(--black);
+    font-size: 0.85rem;
+    padding: 0.25em 0.3em;
+  }
+
+  pre {
+    background: var(--black);
+    border-radius: 0.5rem;
+    color: var(--white);
+    font-family: 'JetBrainsMono', monospace;
+    margin: 1.5rem 0;
+    padding: 0.75rem 1rem;
+
+    code {
+      background: none;
+      color: inherit;
+      font-size: 0.8rem;
+      padding: 0;
+    }
+  }
+
+  blockquote {
+    border-left: 3px solid var(--gray-3);
+    margin: 1.5rem 0;
+    padding-left: 1rem;
+  }
+
+  hr {
+    border: none;
+    border-top: 1px solid var(--gray-2);
+    margin: 2rem 0;
+  }
+
+  /* Node view */
+  .node-view {
+    background-color: var(--purple-light);
+    border: 2px solid var(--purple);
+    border-radius: 0.5rem;
+    margin: 2rem 0;
+    position: relative;
+
+    label {
+      background-color: var(--purple);
+      border-radius: 0 0 0.5rem 0;
+      color: var(--white);
+      font-size: 0.75rem;
+      font-weight: bold;
+      padding: 0.25rem 0.5rem;
+      position: absolute;
+      top: 0;
+    }
+
+    .content {
+      margin-top: 1.5rem;
+      padding: 1rem;
+
+      &.is-editable {
+        border: 2px dashed var(--gray-3);
+        border-radius: 0.5rem;
+        margin: 2.5rem 1rem 1rem;
+        padding: 0.5rem;
+      }
+    }
   }
 }
-
-.node-view {
-  background: #FAF594;
-  border: 3px solid #0D0D0D;
-  border-radius: 0.5rem;
-  margin: 1rem 0;
-  position: relative;
-}
-
-.label {
-  margin-left: 1rem;
-  background-color: #0D0D0D;
-  font-size: 0.6rem;
-  letter-spacing: 1px;
-  font-weight: bold;
-  text-transform: uppercase;
-  color: #fff;
-  position: absolute;
-  top: 0;
-  padding: 0.25rem 0.75rem;
-  border-radius: 0 0 0.5rem 0.5rem;
-}
-
-.content {
-  margin: 2.5rem 1rem 1rem;
-  padding: 0.5rem;
-  border: 2px dashed #0D0D0D20;
-  border-radius: 0.5rem;
-}
 </style>
diff --git a/demos/src/GuideNodeViews/ReactComponent/React/Component.jsx b/demos/src/GuideNodeViews/ReactComponent/React/Component.jsx
index d2a2b324a..c9183c91d 100644
--- a/demos/src/GuideNodeViews/ReactComponent/React/Component.jsx
+++ b/demos/src/GuideNodeViews/ReactComponent/React/Component.jsx
@@ -10,7 +10,7 @@ export default props => {
 
   return (
     <NodeViewWrapper className="react-component">
-      <span className="label">React Component</span>
+      <label>React Component</label>
 
       <div className="content">
         <button onClick={increase}>
diff --git a/demos/src/GuideNodeViews/ReactComponent/React/styles.scss b/demos/src/GuideNodeViews/ReactComponent/React/styles.scss
index b41e39c84..c75242461 100644
--- a/demos/src/GuideNodeViews/ReactComponent/React/styles.scss
+++ b/demos/src/GuideNodeViews/ReactComponent/React/styles.scss
@@ -1,33 +1,116 @@
 /* Basic editor styles */
 .tiptap {
-  > * + * {
-    margin-top: 0.75em;
-  }
-}
-
-.react-component {
-  background: #FAF594;
-  border: 3px solid #0D0D0D;
-  border-radius: 0.5rem;
-  margin: 1rem 0;
-  position: relative;
-
-  .label {
-    margin-left: 1rem;
-    background-color: #0D0D0D;
-    font-size: 0.6rem;
-    letter-spacing: 1px;
-    font-weight: bold;
-    text-transform: uppercase;
-    color: #fff;
-    position: absolute;
-    top: 0;
-    padding: 0.25rem 0.75rem;
-    border-radius: 0 0 0.5rem 0.5rem;
-  }
-
-  .content {
-    margin-top: 1.5rem;
-    padding: 1rem;
+  :first-child {
+    margin-top: 0;
+  }
+
+  /* List styles */
+  ul, 
+  ol {
+    padding: 0 1rem;
+    margin: 1.25rem 1rem 1.25rem 0.4rem;
+    
+    li p {
+      margin-top: 0.25em;
+      margin-bottom: 0.25em;
+    }
+  }
+
+  /* Heading styles */
+  h1, 
+  h2, 
+  h3, 
+  h4, 
+  h5, 
+  h6 {
+    line-height: 1.1;
+    margin-top: 2.5rem;
+    text-wrap: pretty;
+  }
+
+  h1, 
+  h2 {
+    margin-top: 3.5rem;
+    margin-bottom: 1.5rem;
+  }
+
+  h1 { 
+    font-size: 1.4rem; 
+  }
+
+  h2 { 
+    font-size: 1.2rem; 
+  }
+
+  h3 { 
+    font-size: 1.1rem; 
+  }
+
+  h4, 
+  h5, 
+  h6 { 
+    font-size: 1rem; 
+  }
+
+  /* Code and preformatted text styles */
+  code {
+    background-color: var(--purple-light);
+    border-radius: 0.4rem;
+    color: var(--black);
+    font-size: 0.85rem;
+    padding: 0.25em 0.3em;
+  }
+
+  pre {
+    background: var(--black);
+    border-radius: 0.5rem;
+    color: var(--white);
+    font-family: 'JetBrainsMono', monospace;
+    margin: 1.5rem 0;
+    padding: 0.75rem 1rem;
+
+    code {
+      background: none;
+      color: inherit;
+      font-size: 0.8rem;
+      padding: 0;
+    }
+  }
+
+  blockquote {
+    border-left: 3px solid var(--gray-3);
+    margin: 1.5rem 0;
+    padding-left: 1rem;
+  }
+
+  hr {
+    border: none;
+    border-top: 1px solid var(--gray-2);
+    margin: 2rem 0;
+  }
+
+  /* React component */
+  .react-component {
+    background-color: var(--purple-light);
+    border: 2px solid var(--purple);
+    border-radius: 0.5rem;
+    margin: 2rem 0;
+    position: relative;
+
+    label {
+      background-color: var(--purple);
+      border-radius: 0 0 0.5rem 0;
+      color: var(--white);
+      font-size: 0.75rem;
+      font-weight: bold;
+      padding: 0.25rem 0.5rem;
+      position: absolute;
+      top: 0;
+    }
+
+    .content {
+      margin-top: 1.5rem;
+      padding: 1rem;
+    }
   }
 }
diff --git a/demos/src/GuideNodeViews/ReactComponentContent/React/Component.jsx b/demos/src/GuideNodeViews/ReactComponentContent/React/Component.jsx
index 153a0a188..36fc95eba 100644
--- a/demos/src/GuideNodeViews/ReactComponentContent/React/Component.jsx
+++ b/demos/src/GuideNodeViews/ReactComponentContent/React/Component.jsx
@@ -3,10 +3,10 @@ import React from 'react'
 
 export default () => {
   return (
-    <NodeViewWrapper className="react-component-with-content">
-      <span className="label" contentEditable={false}>React Component</span>
+    <NodeViewWrapper className="react-component">
+      <label contentEditable={false}>React Component</label>
 
-      <NodeViewContent className="content" />
+      <NodeViewContent className="content is-editable" />
     </NodeViewWrapper>
   )
 }
diff --git a/demos/src/GuideNodeViews/ReactComponentContent/React/styles.scss b/demos/src/GuideNodeViews/ReactComponentContent/React/styles.scss
index 0eb9068d4..db0421b0a 100644
--- a/demos/src/GuideNodeViews/ReactComponentContent/React/styles.scss
+++ b/demos/src/GuideNodeViews/ReactComponentContent/React/styles.scss
@@ -1,36 +1,123 @@
 /* Basic editor styles */
 .tiptap {
-  > * + * {
-    margin-top: 0.75em;
-  }
-}
-
-.react-component-with-content {
-  background: #FAF594;
-  border: 3px solid #0D0D0D;
-  border-radius: 0.5rem;
-  margin: 1rem 0;
-  position: relative;
-
-  .label {
-    margin-left: 1rem;
-    background-color: #0D0D0D;
-    font-size: 0.6rem;
-    letter-spacing: 1px;
-    font-weight: bold;
-    text-transform: uppercase;
-    color: #fff;
-    position: absolute;
-    top: 0;
-    padding: 0.25rem 0.75rem;
-    border-radius: 0 0 0.5rem 0.5rem;
+  :first-child {
+    margin-top: 0;
   }
 
-  .content {
-    margin: 2.5rem 1rem 1rem;
-    padding: 0.5rem;
-    border: 2px dashed #0D0D0D20;
+  /* List styles */
+  ul, 
+  ol {
+    padding: 0 1rem;
+    margin: 1.25rem 1rem 1.25rem 0.4rem;
+    
+    li p {
+      margin-top: 0.25em;
+      margin-bottom: 0.25em;
+    }
+  }
+
+  /* Heading styles */
+  h1, 
+  h2, 
+  h3, 
+  h4, 
+  h5, 
+  h6 {
+    line-height: 1.1;
+    margin-top: 2.5rem;
+    text-wrap: pretty;
+  }
+
+  h1, 
+  h2 {
+    margin-top: 3.5rem;
+    margin-bottom: 1.5rem;
+  }
+
+  h1 { 
+    font-size: 1.4rem; 
+  }
+
+  h2 { 
+    font-size: 1.2rem; 
+  }
+
+  h3 { 
+    font-size: 1.1rem; 
+  }
+
+  h4, 
+  h5, 
+  h6 { 
+    font-size: 1rem; 
+  }
+
+  /* Code and preformatted text styles */
+  code {
+    background-color: var(--purple-light);
+    border-radius: 0.4rem;
+    color: var(--black);
+    font-size: 0.85rem;
+    padding: 0.25em 0.3em;
+  }
+
+  pre {
+    background: var(--black);
     border-radius: 0.5rem;
+    color: var(--white);
+    font-family: 'JetBrainsMono', monospace;
+    margin: 1.5rem 0;
+    padding: 0.75rem 1rem;
+
+    code {
+      background: none;
+      color: inherit;
+      font-size: 0.8rem;
+      padding: 0;
+    }
+  }
+
+  blockquote {
+    border-left: 3px solid var(--gray-3);
+    margin: 1.5rem 0;
+    padding-left: 1rem;
+  }
+
+  hr {
+    border: none;
+    border-top: 1px solid var(--gray-2);
+    margin: 2rem 0;
+  }
+
+  /* React component */
+  .react-component {
+    background-color: var(--purple-light);
+    border: 2px solid var(--purple);
+    border-radius: 0.5rem;
+    margin: 2rem 0;
+    position: relative;
+
+    label {
+      background-color: var(--purple);
+      border-radius: 0 0 0.5rem 0;
+      color: var(--white);
+      font-size: 0.75rem;
+      font-weight: bold;
+      padding: 0.25rem 0.5rem;
+      position: absolute;
+      top: 0;
+    }
+
+    .content {
+      margin-top: 1.5rem;
+      padding: 1rem;
+
+      &.is-editable {
+        border: 2px dashed var(--gray-3);
+        border-radius: 0.5rem;
+        margin: 2.5rem 1rem 1rem;
+        padding: 0.5rem;
+      }
+    }
   }
 }
-
diff --git a/demos/src/GuideNodeViews/TableOfContents/React/Component.jsx b/demos/src/GuideNodeViews/TableOfContents/React/Component.jsx
deleted file mode 100644
index 843cefe03..000000000
--- a/demos/src/GuideNodeViews/TableOfContents/React/Component.jsx
+++ /dev/null
@@ -1,65 +0,0 @@
-import './Component.scss'
-
-import { NodeViewWrapper } from '@tiptap/react'
-import React, { useCallback, useEffect, useState } from 'react'
-
-export default ({ editor }) => {
-  const [items, setItems] = useState([])
-
-  const handleUpdate = useCallback(() => {
-    const headings = []
-    const transaction = editor.state.tr
-
-    editor.state.doc.descendants((node, pos) => {
-      if (node.type.name === 'heading') {
-        const id = `heading-${headings.length + 1}`
-
-        if (node.attrs.id !== id) {
-          transaction.setNodeMarkup(pos, undefined, {
-            ...node.attrs,
-            id,
-          })
-        }
-
-        headings.push({
-          level: node.attrs.level,
-          text: node.textContent,
-          id,
-        })
-      }
-    })
-
-    transaction.setMeta('addToHistory', false)
-    transaction.setMeta('preventUpdate', true)
-
-    editor.view.dispatch(transaction)
-
-    setItems(headings)
-  }, [editor])
-
-  useEffect(handleUpdate, [])
-
-  useEffect(() => {
-    if (!editor) {
-      return null
-    }
-
-    editor.on('update', handleUpdate)
-
-    return () => {
-      editor.off('update', handleUpdate)
-    }
-  }, [editor])
-
-  return (
-    <NodeViewWrapper className="toc">
-      <ul className="toc__list">
-        {items.map((item, index) => (
-          <li key={index} className={`toc__item toc__item--${item.level}`}>
-            <a href={`#${item.id}`}>{item.text}</a>
-          </li>
-        ))}
-      </ul>
-    </NodeViewWrapper>
-  )
-}
diff --git a/demos/src/GuideNodeViews/TableOfContents/React/Component.scss b/demos/src/GuideNodeViews/TableOfContents/React/Component.scss
deleted file mode 100644
index f16291798..000000000
--- a/demos/src/GuideNodeViews/TableOfContents/React/Component.scss
+++ /dev/null
@@ -1,43 +0,0 @@
-.toc {
-  background: rgba(black, 0.1);
-  border-radius: 0.5rem;
-  opacity: 0.75;
-  padding: 0.75rem;
-
-  &__list {
-    list-style: none;
-    padding: 0;
-
-    &::before {
-      content: "Table of Contents";
-      display: block;
-      font-size: 0.75rem;
-      font-weight: 700;
-      letter-spacing: 0.025rem;
-      opacity: 0.5;
-      text-transform: uppercase;
-    }
-  }
-
-  &__item {
-    a:hover {
-      opacity: 0.5;
-    }
-
-    &--3 {
-      padding-left: 1rem;
-    }
-
-    &--4 {
-      padding-left: 2rem;
-    }
-
-    &--5 {
-      padding-left: 3rem;
-    }
-
-    &--6 {
-      padding-left: 4rem;
-    }
-  }
-}
diff --git a/demos/src/GuideNodeViews/TableOfContents/React/TableOfContents.js b/demos/src/GuideNodeViews/TableOfContents/React/TableOfContents.js
deleted file mode 100644
index a68038080..000000000
--- a/demos/src/GuideNodeViews/TableOfContents/React/TableOfContents.js
+++ /dev/null
@@ -1,41 +0,0 @@
-import { mergeAttributes, Node } from '@tiptap/core'
-import { ReactNodeViewRenderer } from '@tiptap/react'
-
-import Component from './Component.jsx'
-
-export default Node.create({
-  name: 'tableOfContents',
-
-  group: 'block',
-
-  atom: true,
-
-  parseHTML() {
-    return [
-      {
-        tag: 'toc',
-      },
-    ]
-  },
-
-  renderHTML({ HTMLAttributes }) {
-    return ['toc', mergeAttributes(HTMLAttributes)]
-  },
-
-  addNodeView() {
-    return ReactNodeViewRenderer(Component)
-  },
-
-  addGlobalAttributes() {
-    return [
-      {
-        types: ['heading'],
-        attributes: {
-          id: {
-            default: null,
-          },
-        },
-      },
-    ]
-  },
-})
diff --git a/demos/src/GuideNodeViews/TableOfContents/React/index.html b/demos/src/GuideNodeViews/TableOfContents/React/index.html
deleted file mode 100644
index e69de29bb..000000000
diff --git a/demos/src/GuideNodeViews/TableOfContents/React/index.jsx b/demos/src/GuideNodeViews/TableOfContents/React/index.jsx
deleted file mode 100644
index 36794d1ba..000000000
--- a/demos/src/GuideNodeViews/TableOfContents/React/index.jsx
+++ /dev/null
@@ -1,32 +0,0 @@
-import './styles.scss'
-
-import { EditorContent, useEditor } from '@tiptap/react'
-import StarterKit from '@tiptap/starter-kit'
-import React from 'react'
-
-import TableOfContents from './TableOfContents.js'
-
-export default () => {
-  const editor = useEditor({
-    extensions: [StarterKit, TableOfContents],
-    content: `
-        <toc></toc>
-        <h2>1 heading</h2>
-        <p>paragraph</p>
-        <h3>1.1 heading</h3>
-        <p>paragraph</p>
-        <h3>1.2 heading</h3>
-        <p>paragraph</p>
-        <h2>2 heading</h2>
-        <p>paragraph</p>
-        <h3>2.1 heading</h3>
-        <p>paragraph</p>
-      `,
-  })
-
-  if (!editor) {
-    return null
-  }
-
-  return <EditorContent editor={editor} />
-}
diff --git a/demos/src/GuideNodeViews/TableOfContents/Vue/Component.vue b/demos/src/GuideNodeViews/TableOfContents/Vue/Component.vue
deleted file mode 100644
index 76e2d301e..000000000
--- a/demos/src/GuideNodeViews/TableOfContents/Vue/Component.vue
+++ /dev/null
@@ -1,127 +0,0 @@
-<template>
-  <node-view-wrapper class="toc">
-    <ul class="toc__list">
-      <li
-        class="toc__item"
-        :class="`toc__item--${heading.level}`"
-        v-for="(heading, index) in headings"
-        :key="index"
-      >
-        <a :href="`#${heading.id}`">
-          {{ heading.text }}
-        </a>
-      </li>
-    </ul>
-  </node-view-wrapper>
-</template>
-
-<script>
-import { nodeViewProps, NodeViewWrapper } from '@tiptap/vue-3'
-
-export default {
-  components: {
-    NodeViewWrapper,
-  },
-
-  props: nodeViewProps,
-
-  data() {
-    return {
-      headings: [],
-    }
-  },
-
-  methods: {
-    handleUpdate() {
-      const headings = []
-      const transaction = this.editor.state.tr
-
-      this.editor.state.doc.descendants((node, pos) => {
-        if (node.type.name === 'heading') {
-          const id = `heading-${headings.length + 1}`
-
-          if (node.attrs.id !== id) {
-            transaction.setNodeMarkup(pos, undefined, {
-              ...node.attrs,
-              id,
-            })
-          }
-
-          headings.push({
-            level: node.attrs.level,
-            text: node.textContent,
-            id,
-          })
-        }
-      })
-
-      transaction.setMeta('addToHistory', false)
-      transaction.setMeta('preventUpdate', true)
-
-      this.editor.view.dispatch(transaction)
-
-      this.headings = headings
-    },
-  },
-
-  mounted() {
-    this.editor.on('update', this.handleUpdate)
-    this.$nextTick(this.handleUpdate)
-  },
-}
-</script>
-
-<style lang="scss">
-/* Basic editor styles */
-.tiptap {
-  > * + * {
-    margin-top: 0.75em;
-  }
-}
-</style>
-
-<style lang="scss">
-.toc {
-  opacity: 0.75;
-  border-radius: 0.5rem;
-  padding: 0.75rem;
-  background: rgba(black, 0.1);
-
-  &__list {
-    list-style: none;
-    padding: 0;
-
-    &::before {
-      display: block;
-      content: "Table of Contents";
-      font-weight: 700;
-      letter-spacing: 0.025rem;
-      font-size: 0.75rem;
-      text-transform: uppercase;
-      opacity: 0.5;
-    }
-  }
-
-  &__item {
-    a:hover {
-      opacity: 0.5;
-    }
-
-    &--3 {
-      padding-left: 1rem;
-    }
-
-    &--4 {
-      padding-left: 2rem;
-    }
-
-    &--5 {
-      padding-left: 3rem;
-    }
-
-    &--6 {
-      padding-left: 4rem;
-    }
-  }
-}
-</style>
diff --git a/demos/src/GuideNodeViews/TableOfContents/Vue/TableOfContents.js b/demos/src/GuideNodeViews/TableOfContents/Vue/TableOfContents.js
deleted file mode 100644
index 950be653d..000000000
--- a/demos/src/GuideNodeViews/TableOfContents/Vue/TableOfContents.js
+++ /dev/null
@@ -1,43 +0,0 @@
-import { mergeAttributes, Node } from '@tiptap/core'
-import { VueNodeViewRenderer } from '@tiptap/vue-3'
-
-import Component from './Component.vue'
-
-export default Node.create({
-  name: 'tableOfContents',
-
-  group: 'block',
-
-  atom: true,
-
-  parseHTML() {
-    return [
-      {
-        tag: 'toc',
-      },
-    ]
-  },
-
-  renderHTML({ HTMLAttributes }) {
-    return ['toc', mergeAttributes(HTMLAttributes)]
-  },
-
-  addNodeView() {
-    return VueNodeViewRenderer(Component)
-  },
-
-  addGlobalAttributes() {
-    return [
-      {
-        types: [
-          'heading',
-        ],
-        attributes: {
-          id: {
-            default: null,
-          },
-        },
-      },
-    ]
-  },
-})
diff --git a/demos/src/GuideNodeViews/TableOfContents/Vue/index.html b/demos/src/GuideNodeViews/TableOfContents/Vue/index.html
deleted file mode 100644
index e69de29bb..000000000
diff --git a/demos/src/GuideNodeViews/TableOfContents/Vue/index.vue b/demos/src/GuideNodeViews/TableOfContents/Vue/index.vue
deleted file mode 100644
index 4c344bdc5..000000000
--- a/demos/src/GuideNodeViews/TableOfContents/Vue/index.vue
+++ /dev/null
@@ -1,50 +0,0 @@
-<template>
-  <div v-if="editor">
-    <editor-content :editor="editor" />
-  </div>
-</template>
-
-<script>
-import StarterKit from '@tiptap/starter-kit'
-import { Editor, EditorContent } from '@tiptap/vue-3'
-
-import TableOfContents from './TableOfContents.js'
-
-export default {
-  components: {
-    EditorContent,
-  },
-
-  data() {
-    return {
-      editor: null,
-    }
-  },
-
-  mounted() {
-    this.editor = new Editor({
-      extensions: [
-        StarterKit,
-        TableOfContents,
-      ],
-      content: `
-        <toc></toc>
-        <h2>1 heading</h2>
-        <p>paragraph</p>
-        <h3>1.1 heading</h3>
-        <p>paragraph</p>
-        <h3>1.2 heading</h3>
-        <p>paragraph</p>
-        <h2>2 heading</h2>
-        <p>paragraph</p>
-        <h3>2.1 heading</h3>
-        <p>paragraph</p>
-      `,
-    })
-  },
-
-  beforeUnmount() {
-    this.editor.destroy()
-  },
-}
-</script>
diff --git a/demos/src/GuideNodeViews/VueComponent/Vue/Component.vue b/demos/src/GuideNodeViews/VueComponent/Vue/Component.vue
index aeb7dec2f..21e2d0631 100644
--- a/demos/src/GuideNodeViews/VueComponent/Vue/Component.vue
+++ b/demos/src/GuideNodeViews/VueComponent/Vue/Component.vue
@@ -1,6 +1,6 @@
 <template>
   <node-view-wrapper class="vue-component">
-    <span class="label">Vue Component</span>
+    <label>Vue Component</label>
 
     <div class="content">
       <button @click="increase">
@@ -31,30 +31,30 @@ export default {
 </script>
 
 <style lang="scss">
-.vue-component {
-  background: #FAF594;
-  border: 3px solid #0D0D0D;
-  border-radius: 0.5rem;
-  margin: 1rem 0;
-  position: relative;
-}
+.tiptap {
+  /* Vue component */
+  .vue-component {
+    background-color: var(--purple-light);
+    border: 2px solid var(--purple);
+    border-radius: 0.5rem;
+    margin: 2rem 0;
+    position: relative;
 
-.label {
-  margin-left: 1rem;
-  background-color: #0D0D0D;
-  font-size: 0.6rem;
-  letter-spacing: 1px;
-  font-weight: bold;
-  text-transform: uppercase;
-  color: #fff;
-  position: absolute;
-  top: 0;
-  padding: 0.25rem 0.75rem;
-  border-radius: 0 0 0.5rem 0.5rem;
-}
+    label {
+      background-color: var(--purple);
+      border-radius: 0 0 0.5rem 0;
+      color: var(--white);
+      font-size: 0.75rem;
+      font-weight: bold;
+      padding: 0.25rem 0.5rem;
+      position: absolute;
+      top: 0;
+    }
 
-.content {
-  margin-top: 1.5rem;
-  padding: 1rem;
+    .content {
+      margin-top: 1.5rem;
+      padding: 1rem;
+    }
+  }
 }
 </style>
diff --git a/demos/src/GuideNodeViews/VueComponent/Vue/index.vue b/demos/src/GuideNodeViews/VueComponent/Vue/index.vue
index ffdab6d2f..678305b9d 100644
--- a/demos/src/GuideNodeViews/VueComponent/Vue/index.vue
+++ b/demos/src/GuideNodeViews/VueComponent/Vue/index.vue
@@ -46,8 +46,93 @@ export default {
 <style lang="scss">
 /* Basic editor styles */
 .tiptap {
-  > * + * {
-    margin-top: 0.75em;
+  :first-child {
+    margin-top: 0;
+  }
+
+  /* List styles */
+  ul,
+  ol {
+    padding: 0 1rem;
+    margin: 1.25rem 1rem 1.25rem 0.4rem;
+
+    li p {
+      margin-top: 0.25em;
+      margin-bottom: 0.25em;
+    }
+  }
+
+  /* Heading styles */
+  h1,
+  h2,
+  h3,
+  h4,
+  h5,
+  h6 {
+    line-height: 1.1;
+    margin-top: 2.5rem;
+    text-wrap: pretty;
+  }
+
+  h1,
+  h2 {
+    margin-top: 3.5rem;
+    margin-bottom: 1.5rem;
+  }
+
+  h1 {
+    font-size: 1.4rem;
+  }
+
+  h2 {
+    font-size: 1.2rem;
+  }
+
+  h3 {
+    font-size: 1.1rem;
+  }
+
+  h4,
+  h5,
+  h6 {
+    font-size: 1rem;
+  }
+
+  /* Code and preformatted text styles */
+  code {
+    background-color: var(--purple-light);
+    border-radius: 0.4rem;
+    color: var(--black);
+    font-size: 0.85rem;
+    padding: 0.25em 0.3em;
+  }
+
+  pre {
+    background: var(--black);
+    border-radius: 0.5rem;
+    color: var(--white);
+    font-family: 'JetBrainsMono', monospace;
+    margin: 1.5rem 0;
+    padding: 0.75rem 1rem;
+
+    code {
+      background: none;
+      color: inherit;
+      font-size: 0.8rem;
+      padding: 0;
+    }
+  }
+
+  blockquote {
+    border-left: 3px solid var(--gray-3);
+    margin: 1.5rem 0;
+    padding-left: 1rem;
+  }
+
+  hr {
+    border: none;
+    border-top: 1px solid var(--gray-2);
+    margin: 2rem 0;
   }
 }
 </style>
diff --git a/demos/src/GuideNodeViews/VueComponentContent/Vue/Component.vue b/demos/src/GuideNodeViews/VueComponentContent/Vue/Component.vue
index 8e29325dd..17ce2da6d 100644
--- a/demos/src/GuideNodeViews/VueComponentContent/Vue/Component.vue
+++ b/demos/src/GuideNodeViews/VueComponentContent/Vue/Component.vue
@@ -1,7 +1,7 @@
 <template>
   <node-view-wrapper class="vue-component">
-    <span class="label" contenteditable="false">Vue Component</span>
-    <node-view-content class="content" />
+    <label contenteditable="false">Vue Component</label>
+    <node-view-content class="content is-editable" />
   </node-view-wrapper>
 </template>
 
@@ -19,32 +19,37 @@ export default {
 </script>
 
 <style lang="scss">
-.vue-component {
-  background: #FAF594;
-  border: 3px solid #0D0D0D;
-  border-radius: 0.5rem;
-  margin: 1rem 0;
-  position: relative;
-}
+.tiptap {
+  /* Vue component */
+  .vue-component {
+    background-color: var(--purple-light);
+    border: 2px solid var(--purple);
+    border-radius: 0.5rem;
+    margin: 2rem 0;
+    position: relative;
 
-.label {
-  margin-left: 1rem;
-  background-color: #0D0D0D;
-  font-size: 0.6rem;
-  letter-spacing: 1px;
-  font-weight: bold;
-  text-transform: uppercase;
-  color: #fff;
-  position: absolute;
-  top: 0;
-  padding: 0.25rem 0.75rem;
-  border-radius: 0 0 0.5rem 0.5rem;
-}
+    label {
+      background-color: var(--purple);
+      border-radius: 0 0 0.5rem 0;
+      color: var(--white);
+      font-size: 0.75rem;
+      font-weight: bold;
+      padding: 0.25rem 0.5rem;
+      position: absolute;
+      top: 0;
+    }
 
-.content {
-  margin: 2.5rem 1rem 1rem;
-  padding: 0.5rem;
-  border: 2px dashed #0D0D0D20;
-  border-radius: 0.5rem;
+    .content {
+      margin-top: 1.5rem;
+      padding: 1rem;
+
+      &.is-editable {
+        border: 2px dashed var(--gray-3);
+        border-radius: 0.5rem;
+        margin: 2.5rem 1rem 1rem;
+        padding: 0.5rem;
+      }
+    }
+  }
 }
 </style>
diff --git a/demos/src/GuideNodeViews/VueComponentContent/Vue/index.vue b/demos/src/GuideNodeViews/VueComponentContent/Vue/index.vue
index 57a175c4a..b52539edd 100644
--- a/demos/src/GuideNodeViews/VueComponentContent/Vue/index.vue
+++ b/demos/src/GuideNodeViews/VueComponentContent/Vue/index.vue
@@ -48,8 +48,93 @@ export default {
 <style lang="scss">
 /* Basic editor styles */
 .tiptap {
-  > * + * {
-    margin-top: 0.75em;
+  :first-child {
+    margin-top: 0;
+  }
+
+  /* List styles */
+  ul,
+  ol {
+    padding: 0 1rem;
+    margin: 1.25rem 1rem 1.25rem 0.4rem;
+
+    li p {
+      margin-top: 0.25em;
+      margin-bottom: 0.25em;
+    }
+  }
+
+  /* Heading styles */
+  h1,
+  h2,
+  h3,
+  h4,
+  h5,
+  h6 {
+    line-height: 1.1;
+    margin-top: 2.5rem;
+    text-wrap: pretty;
+  }
+
+  h1,
+  h2 {
+    margin-top: 3.5rem;
+    margin-bottom: 1.5rem;
+  }
+
+  h1 {
+    font-size: 1.4rem;
+  }
+
+  h2 {
+    font-size: 1.2rem;
+  }
+
+  h3 {
+    font-size: 1.1rem;
+  }
+
+  h4,
+  h5,
+  h6 {
+    font-size: 1rem;
+  }
+
+  /* Code and preformatted text styles */
+  code {
+    background-color: var(--purple-light);
+    border-radius: 0.4rem;
+    color: var(--black);
+    font-size: 0.85rem;
+    padding: 0.25em 0.3em;
+  }
+
+  pre {
+    background: var(--black);
+    border-radius: 0.5rem;
+    color: var(--white);
+    font-family: 'JetBrainsMono', monospace;
+    margin: 1.5rem 0;
+    padding: 0.75rem 1rem;
+
+    code {
+      background: none;
+      color: inherit;
+      font-size: 0.8rem;
+      padding: 0;
+    }
+  }
+
+  blockquote {
+    border-left: 3px solid var(--gray-3);
+    margin: 1.5rem 0;
+    padding-left: 1rem;
+  }
+
+  hr {
+    border: none;
+    border-top: 1px solid var(--gray-2);
+    margin: 2rem 0;
   }
 }
 </style>
diff --git a/demos/src/Marks/Bold/React/index.jsx b/demos/src/Marks/Bold/React/index.jsx
index 932d98561..7fbcb9030 100644
--- a/demos/src/Marks/Bold/React/index.jsx
+++ b/demos/src/Marks/Bold/React/index.jsx
@@ -1,3 +1,5 @@
+import './styles.scss'
+
 import Bold from '@tiptap/extension-bold'
 import Document from '@tiptap/extension-document'
 import Paragraph from '@tiptap/extension-paragraph'
@@ -25,25 +27,28 @@ export default () => {
 
   return (
     <>
-      <button
-        onClick={() => editor.chain().focus().toggleBold().run()}
-        className={editor.isActive('bold') ? 'is-active' : ''}
-      >
-        toggleBold
-      </button>
-      <button
-        onClick={() => editor.chain().focus().setBold().run()}
-        disabled={editor.isActive('bold')}
-      >
-        setBold
-      </button>
-      <button
-        onClick={() => editor.chain().focus().unsetBold().run()}
-        disabled={!editor.isActive('bold')}
-      >
-        unsetBold
-      </button>
-
+      <div className="control-group">
+        <div className="button-group">
+          <button
+            onClick={() => editor.chain().focus().toggleBold().run()}
+            className={editor.isActive('bold') ? 'is-active' : ''}
+          >
+            Toggle bold
+          </button>
+          <button
+            onClick={() => editor.chain().focus().setBold().run()}
+            disabled={editor.isActive('bold')}
+          >
+            Set bold
+          </button>
+          <button
+            onClick={() => editor.chain().focus().unsetBold().run()}
+            disabled={!editor.isActive('bold')}
+          >
+            Unset bold
+          </button>
+        </div>
+      </div>
       <EditorContent editor={editor} />
     </>
   )
diff --git a/demos/src/Marks/Bold/React/styles.scss b/demos/src/Marks/Bold/React/styles.scss
new file mode 100644
index 000000000..afd5ba214
--- /dev/null
+++ b/demos/src/Marks/Bold/React/styles.scss
@@ -0,0 +1,6 @@
+/* Basic editor styles */
+.tiptap {
+  :first-child {
+    margin-top: 0;
+  }
+}
diff --git a/demos/src/Marks/Bold/Vue/index.vue b/demos/src/Marks/Bold/Vue/index.vue
index 001ad105f..2e8df4caf 100644
--- a/demos/src/Marks/Bold/Vue/index.vue
+++ b/demos/src/Marks/Bold/Vue/index.vue
@@ -1,15 +1,18 @@
 <template>
-  <div v-if="editor">
-    <button @click="editor.chain().focus().toggleBold().run()" :class="{ 'is-active': editor.isActive('bold') }">
-      toggleBold
-    </button>
-    <button @click="editor.chain().focus().setBold().run()" :disabled="editor.isActive('bold')">
-      setBold
-    </button>
-    <button @click="editor.chain().focus().unsetBold().run()" :disabled="!editor.isActive('bold')">
-      unsetBold
-    </button>
-
+  <div v-if="editor" class="container">
+    <div class="control-group">
+      <div class="button-group">
+        <button @click="editor.chain().focus().toggleBold().run()" :class="{ 'is-active': editor.isActive('bold') }">
+          Toggle bold
+        </button>
+        <button @click="editor.chain().focus().setBold().run()" :disabled="editor.isActive('bold')">
+          Set bold
+        </button>
+        <button @click="editor.chain().focus().unsetBold().run()" :disabled="!editor.isActive('bold')">
+          Unset bold
+        </button>
+      </div>
+    </div>
     <editor-content :editor="editor" />
   </div>
 </template>
@@ -57,3 +60,12 @@ export default {
   },
 }
 </script>
+
+<style lang="scss">
+/* Basic editor styles */
+.tiptap {
+  :first-child {
+    margin-top: 0;
+  }
+}
+</style>
diff --git a/demos/src/Marks/Code/React/index.jsx b/demos/src/Marks/Code/React/index.jsx
index 9144f5265..271948f4d 100644
--- a/demos/src/Marks/Code/React/index.jsx
+++ b/demos/src/Marks/Code/React/index.jsx
@@ -22,25 +22,28 @@ export default () => {
 
   return (
     <>
-      <button
-        onClick={() => editor.chain().focus().toggleCode().run()}
-        className={editor.isActive('code') ? 'is-active' : ''}
-      >
-        toggleCode
-      </button>
-      <button
-        onClick={() => editor.chain().focus().setCode().run()}
-        disabled={editor.isActive('code')}
-      >
-        setCode
-      </button>
-      <button
-        onClick={() => editor.chain().focus().unsetCode().run()}
-        disabled={!editor.isActive('code')}
-      >
-        unsetCode
-      </button>
-
+      <div className="control-group">
+        <div className="button-group">
+          <button
+            onClick={() => editor.chain().focus().toggleCode().run()}
+            className={editor.isActive('code') ? 'is-active' : ''}
+          >
+            Toggle code
+          </button>
+          <button
+            onClick={() => editor.chain().focus().setCode().run()}
+            disabled={editor.isActive('code')}
+          >
+            Set code
+          </button>
+          <button
+            onClick={() => editor.chain().focus().unsetCode().run()}
+            disabled={!editor.isActive('code')}
+          >
+            Unset code
+          </button>
+        </div>
+      </div>
       <EditorContent editor={editor} />
     </>
   )
diff --git a/demos/src/Marks/Code/React/styles.scss b/demos/src/Marks/Code/React/styles.scss
index 44074e45c..723d82ad5 100644
--- a/demos/src/Marks/Code/React/styles.scss
+++ b/demos/src/Marks/Code/React/styles.scss
@@ -1,15 +1,15 @@
 /* Basic editor styles */
 .tiptap {
-  > * + * {
-    margin-top: 0.75em;
+  :first-child {
+    margin-top: 0;
   }
 
+  /* Code and preformatted text styles */
   code {
-    background-color: rgba(#616161, 0.1);
-    border-radius: 0.25em;
-    box-decoration-break: clone;
-    color: #616161;
-    font-size: 0.9rem;
-    padding: 0.25em;
+    background-color: var(--purple-light);
+    border-radius: 0.4rem;
+    color: var(--black);
+    font-size: 0.85rem;
+    padding: 0.25em 0.3em;
   }
 }
diff --git a/demos/src/Marks/Code/Vue/index.vue b/demos/src/Marks/Code/Vue/index.vue
index a9f46c4e6..57916e1cb 100644
--- a/demos/src/Marks/Code/Vue/index.vue
+++ b/demos/src/Marks/Code/Vue/index.vue
@@ -1,15 +1,18 @@
 <template>
-  <div v-if="editor">
-    <button @click="editor.chain().focus().toggleCode().run()" :class="{ 'is-active': editor.isActive('code') }">
-      toggleCode
-    </button>
-    <button @click="editor.chain().focus().setCode().run()" :disabled="editor.isActive('code')">
-      setCode
-    </button>
-    <button @click="editor.chain().focus().unsetCode().run()" :disabled="!editor.isActive('code')">
-      unsetCode
-    </button>
-
+  <div v-if="editor" class="container">
+    <div class="control-group">
+      <div class="button-group">
+        <button @click="editor.chain().focus().toggleCode().run()" :class="{ 'is-active': editor.isActive('code') }">
+          Toggle code
+        </button>
+        <button @click="editor.chain().focus().setCode().run()" :disabled="editor.isActive('code')">
+          Set code
+        </button>
+        <button @click="editor.chain().focus().unsetCode().run()" :disabled="!editor.isActive('code')">
+          Unset code
+        </button>
+      </div>
+    </div>
     <editor-content :editor="editor" />
   </div>
 </template>
@@ -56,17 +59,17 @@ export default {
 <style lang="scss">
 /* Basic editor styles */
 .tiptap {
-  > * + * {
-    margin-top: 0.75em;
+  :first-child {
+    margin-top: 0;
   }
 
+  /* Code and preformatted text styles */
   code {
-    font-size: 0.9rem;
-    padding: 0.25em;
-    border-radius: 0.25em;
-    background-color: rgba(#616161, 0.1);
-    color: #616161;
-    box-decoration-break: clone;
+    background-color: var(--purple-light);
+    border-radius: 0.4rem;
+    color: var(--black);
+    font-size: 0.85rem;
+    padding: 0.25em 0.3em;
   }
 }
 </style>
diff --git a/demos/src/Marks/Highlight/React/index.jsx b/demos/src/Marks/Highlight/React/index.jsx
index 02de54289..cfbd74feb 100644
--- a/demos/src/Marks/Highlight/React/index.jsx
+++ b/demos/src/Marks/Highlight/React/index.jsx
@@ -24,54 +24,58 @@ export default () => {
 
   return (
     <>
-      <button
-        onClick={() => editor.chain().focus().toggleHighlight().run()}
-        className={editor.isActive('highlight') ? 'is-active' : ''}
-      >
-        toggleHighlight
-      </button>
-      <button
-        onClick={() => editor.chain().focus().toggleHighlight({ color: '#ffc078' }).run()}
-        className={editor.isActive('highlight', { color: '#ffc078' }) ? 'is-active' : ''}
-      >
-        orange
-      </button>
-      <button
-        onClick={() => editor.chain().focus().toggleHighlight({ color: '#8ce99a' }).run()}
-        className={editor.isActive('highlight', { color: '#8ce99a' }) ? 'is-active' : ''}
-      >
-        green
-      </button>
-      <button
-        onClick={() => editor.chain().focus().toggleHighlight({ color: '#74c0fc' }).run()}
-        className={editor.isActive('highlight', { color: '#74c0fc' }) ? 'is-active' : ''}
-      >
-        blue
-      </button>
-      <button
-        onClick={() => editor.chain().focus().toggleHighlight({ color: '#b197fc' }).run()}
-        className={editor.isActive('highlight', { color: '#b197fc' }) ? 'is-active' : ''}
-      >
-        purple
-      </button>
-      <button
-        onClick={() => editor.chain().focus().toggleHighlight({ color: 'red' }).run()}
-        className={editor.isActive('highlight', { color: 'red' }) ? 'is-active' : ''}
-      >
-        red ('red')
-      </button>
-      <button
-        onClick={() => editor.chain().focus().toggleHighlight({ color: '#ffa8a8' }).run()}
-        className={editor.isActive('highlight', { color: '#ffa8a8' }) ? 'is-active' : ''}
-      >
-        red (#ffa8a8)
-      </button>
-      <button
-        onClick={() => editor.chain().focus().unsetHighlight().run()}
-        disabled={!editor.isActive('highlight')}
-      >
-        unsetHighlight
-      </button>
+      <div className="control-group">
+        <div className="button-group">
+          <button
+            onClick={() => editor.chain().focus().toggleHighlight().run()}
+            className={editor.isActive('highlight') ? 'is-active' : ''}
+          >
+            Toggle highlight
+          </button>
+          <button
+            onClick={() => editor.chain().focus().toggleHighlight({ color: '#ffc078' }).run()}
+            className={editor.isActive('highlight', { color: '#ffc078' }) ? 'is-active' : ''}
+          >
+            Orange
+          </button>
+          <button
+            onClick={() => editor.chain().focus().toggleHighlight({ color: '#8ce99a' }).run()}
+            className={editor.isActive('highlight', { color: '#8ce99a' }) ? 'is-active' : ''}
+          >
+            Green
+          </button>
+          <button
+            onClick={() => editor.chain().focus().toggleHighlight({ color: '#74c0fc' }).run()}
+            className={editor.isActive('highlight', { color: '#74c0fc' }) ? 'is-active' : ''}
+          >
+            Blue
+          </button>
+          <button
+            onClick={() => editor.chain().focus().toggleHighlight({ color: '#b197fc' }).run()}
+            className={editor.isActive('highlight', { color: '#b197fc' }) ? 'is-active' : ''}
+          >
+            Purple
+          </button>
+          <button
+            onClick={() => editor.chain().focus().toggleHighlight({ color: 'red' }).run()}
+            className={editor.isActive('highlight', { color: 'red' }) ? 'is-active' : ''}
+          >
+            Red ('red')
+          </button>
+          <button
+            onClick={() => editor.chain().focus().toggleHighlight({ color: '#ffa8a8' }).run()}
+            className={editor.isActive('highlight', { color: '#ffa8a8' }) ? 'is-active' : ''}
+          >
+            Red (#ffa8a8)
+          </button>
+          <button
+            onClick={() => editor.chain().focus().unsetHighlight().run()}
+            disabled={!editor.isActive('highlight')}
+          >
+            Unset highlight
+          </button>
+        </div>
+      </div>
 
       <EditorContent editor={editor} />
     </>
diff --git a/demos/src/Marks/Highlight/React/styles.scss b/demos/src/Marks/Highlight/React/styles.scss
index b5f2f37ba..18443a70b 100644
--- a/demos/src/Marks/Highlight/React/styles.scss
+++ b/demos/src/Marks/Highlight/React/styles.scss
@@ -1,6 +1,13 @@
-mark {
-  background-color: #ffe066;
-  border-radius: 0.25em;
-  box-decoration-break: clone;
-  padding: 0.125em 0;
+/* Basic editor styles */
+.tiptap {
+  :first-child {
+    margin-top: 0;
+  }
+
+  mark {
+    background-color: #FAF594;
+    border-radius: 0.4rem;
+    box-decoration-break: clone;
+    padding: 0.1rem 0.3rem;
+  }
 }
diff --git a/demos/src/Marks/Highlight/Vue/index.vue b/demos/src/Marks/Highlight/Vue/index.vue
index 51d188355..12cb5f03c 100644
--- a/demos/src/Marks/Highlight/Vue/index.vue
+++ b/demos/src/Marks/Highlight/Vue/index.vue
@@ -1,33 +1,36 @@
 <template>
-  <div v-if="editor">
-    <button @click="editor.chain().focus().toggleHighlight().run()" :class="{ 'is-active': editor.isActive('highlight') }">
-      toggleHighlight
-    </button>
-    <button @click="editor.chain().focus().toggleHighlight({ color: '#ffc078' }).run()" :class="{ 'is-active': editor.isActive('highlight', { color: '#ffc078' }) }">
-      orange
-    </button>
-    <button @click="editor.chain().focus().toggleHighlight({ color: '#8ce99a' }).run()" :class="{ 'is-active': editor.isActive('highlight', { color: '#8ce99a' }) }">
-      green
-    </button>
-    <button @click="editor.chain().focus().toggleHighlight({ color: '#74c0fc' }).run()" :class="{ 'is-active': editor.isActive('highlight', { color: '#74c0fc' }) }">
-      blue
-    </button>
-    <button @click="editor.chain().focus().toggleHighlight({ color: '#b197fc' }).run()" :class="{ 'is-active': editor.isActive('highlight', { color: '#b197fc' }) }">
-      purple
-    </button>
-    <button @click="editor.chain().focus().toggleHighlight({ color: 'red' }).run()" :class="{ 'is-active': editor.isActive('highlight', { color: 'red' }) }">
-      red ('red')
-    </button>
-    <button @click="editor.chain().focus().toggleHighlight({ color: '#ffa8a8' }).run()" :class="{ 'is-active': editor.isActive('highlight', { color: '#ffa8a8' }) }">
-      red (#ffa8a8)
-    </button>
-    <button
-      @click="editor.chain().focus().unsetHighlight().run()"
-      :disabled="!editor.isActive('highlight')"
-    >
-      unsetHighlight
-    </button>
-
+  <div v-if="editor" class="container">
+    <div class="control-group">
+      <div class="button-group">
+        <button @click="editor.chain().focus().toggleHighlight().run()" :class="{ 'is-active': editor.isActive('highlight') }">
+          Toggle highlight
+        </button>
+        <button @click="editor.chain().focus().toggleHighlight({ color: '#ffc078' }).run()" :class="{ 'is-active': editor.isActive('highlight', { color: '#ffc078' }) }">
+          Orange
+        </button>
+        <button @click="editor.chain().focus().toggleHighlight({ color: '#8ce99a' }).run()" :class="{ 'is-active': editor.isActive('highlight', { color: '#8ce99a' }) }">
+          Green
+        </button>
+        <button @click="editor.chain().focus().toggleHighlight({ color: '#74c0fc' }).run()" :class="{ 'is-active': editor.isActive('highlight', { color: '#74c0fc' }) }">
+          Blue
+        </button>
+        <button @click="editor.chain().focus().toggleHighlight({ color: '#b197fc' }).run()" :class="{ 'is-active': editor.isActive('highlight', { color: '#b197fc' }) }">
+          Purple
+        </button>
+        <button @click="editor.chain().focus().toggleHighlight({ color: 'red' }).run()" :class="{ 'is-active': editor.isActive('highlight', { color: 'red' }) }">
+          Red ('red')
+        </button>
+        <button @click="editor.chain().focus().toggleHighlight({ color: '#ffa8a8' }).run()" :class="{ 'is-active': editor.isActive('highlight', { color: '#ffa8a8' }) }">
+          Red (#ffa8a8)
+        </button>
+        <button
+          @click="editor.chain().focus().unsetHighlight().run()"
+          :disabled="!editor.isActive('highlight')"
+        >
+          Unset highlight
+        </button>
+      </div>
+    </div>
     <editor-content :editor="editor" />
   </div>
 </template>
@@ -74,10 +77,17 @@ export default {
 </script>
 
 <style lang="scss">
-mark {
-  background-color: #ffe066;
-  padding: 0.125em 0;
-  border-radius: 0.25em;
-  box-decoration-break: clone;
+/* Basic editor styles */
+.tiptap {
+  :first-child {
+    margin-top: 0;
+  }
+
+  mark {
+    background-color: #FAF594;
+    border-radius: 0.4rem;
+    box-decoration-break: clone;
+    padding: 0.1rem 0.3rem;
+  }
 }
 </style>
diff --git a/demos/src/Marks/Italic/React/index.jsx b/demos/src/Marks/Italic/React/index.jsx
index eaf14756d..40708917c 100644
--- a/demos/src/Marks/Italic/React/index.jsx
+++ b/demos/src/Marks/Italic/React/index.jsx
@@ -1,3 +1,5 @@
+import './styles.scss'
+
 import Document from '@tiptap/extension-document'
 import Italic from '@tiptap/extension-italic'
 import Paragraph from '@tiptap/extension-paragraph'
@@ -22,25 +24,28 @@ export default () => {
 
   return (
     <>
-      <button
-        onClick={() => editor.chain().focus().toggleItalic().run()}
-        className={editor.isActive('italic') ? 'is-active' : ''}
-      >
-        toggleItalic
-      </button>
-      <button
-        onClick={() => editor.chain().focus().setItalic().run()}
-        disabled={editor.isActive('italic')}
-      >
-        setItalic
-      </button>
-      <button
-        onClick={() => editor.chain().focus().unsetItalic().run()}
-        disabled={!editor.isActive('italic')}
-      >
-        unsetItalic
-      </button>
-
+      <div className="control-group">
+        <div className="button-group">
+          <button
+            onClick={() => editor.chain().focus().toggleItalic().run()}
+            className={editor.isActive('italic') ? 'is-active' : ''}
+          >
+            Toggle italic
+          </button>
+          <button
+            onClick={() => editor.chain().focus().setItalic().run()}
+            disabled={editor.isActive('italic')}
+          >
+            Set italic
+          </button>
+          <button
+            onClick={() => editor.chain().focus().unsetItalic().run()}
+            disabled={!editor.isActive('italic')}
+          >
+            Unset italic
+          </button>
+        </div>
+      </div>
       <EditorContent editor={editor} />
     </>
   )
diff --git a/demos/src/Marks/Italic/React/styles.scss b/demos/src/Marks/Italic/React/styles.scss
new file mode 100644
index 000000000..afd5ba214
--- /dev/null
+++ b/demos/src/Marks/Italic/React/styles.scss
@@ -0,0 +1,6 @@
+/* Basic editor styles */
+.tiptap {
+  :first-child {
+    margin-top: 0;
+  }
+}
diff --git a/demos/src/Marks/Italic/Vue/index.vue b/demos/src/Marks/Italic/Vue/index.vue
index 94ab9a25d..407348e50 100644
--- a/demos/src/Marks/Italic/Vue/index.vue
+++ b/demos/src/Marks/Italic/Vue/index.vue
@@ -1,15 +1,18 @@
 <template>
-  <div v-if="editor">
-    <button @click="editor.chain().focus().toggleItalic().run()" :class="{ 'is-active': editor.isActive('italic') }">
-      toggleItalic
-    </button>
-    <button @click="editor.chain().focus().setItalic().run()" :disabled="editor.isActive('italic')">
-      setItalic
-    </button>
-    <button @click="editor.chain().focus().unsetItalic().run()" :disabled="!editor.isActive('italic')">
-      unsetItalic
-    </button>
-
+  <div v-if="editor" class="container">
+    <div class="control-group">
+      <div class="button-group">
+        <button @click="editor.chain().focus().toggleItalic().run()" :class="{ 'is-active': editor.isActive('italic') }">
+          Toggle italic
+        </button>
+        <button @click="editor.chain().focus().setItalic().run()" :disabled="editor.isActive('italic')">
+          Set italic
+        </button>
+        <button @click="editor.chain().focus().unsetItalic().run()" :disabled="!editor.isActive('italic')">
+          Unset italic
+        </button>
+      </div>
+    </div>
     <editor-content :editor="editor" />
   </div>
 </template>
@@ -54,3 +57,12 @@ export default {
   },
 }
 </script>
+
+<style lang="scss">
+/* Basic editor styles */
+.tiptap {
+  :first-child {
+    margin-top: 0;
+  }
+}
+</style>
diff --git a/demos/src/Marks/Link/React/index.jsx b/demos/src/Marks/Link/React/index.jsx
index 39c6d2df0..ca9cc06a4 100644
--- a/demos/src/Marks/Link/React/index.jsx
+++ b/demos/src/Marks/Link/React/index.jsx
@@ -1,6 +1,5 @@
 import './styles.scss'
 
-import Bold from '@tiptap/extension-bold'
 import Code from '@tiptap/extension-code'
 import Document from '@tiptap/extension-document'
 import Link from '@tiptap/extension-link'
@@ -16,7 +15,6 @@ export default () => {
       Paragraph,
       Text,
       Code,
-      Bold,
       Link.configure({
         openOnClick: false,
         autolink: true,
@@ -25,7 +23,7 @@ export default () => {
     ],
     content: `
         <p>
-          Wow, this editor has support for links to the whole <a href="https://en.wikipedia.org/wiki/World_Wide_Web"><b>world wide web</b></a>. We tested a lot of URLs and I think you can add *every URL* you want. Isn’t that cool? Let’s try <a href="https://statamic.com/">another one!</a> Yep, seems to work.
+          Wow, this editor has support for links to the whole <a href="https://en.wikipedia.org/wiki/World_Wide_Web">world wide web</a>. We tested a lot of URLs and I think you can add *every URL* you want. Isn’t that cool? Let’s try <a href="https://statamic.com/">another one!</a> Yep, seems to work.
         </p>
         <p>
           By default every link will get a <code>rel="noopener noreferrer nofollow"</code> attribute. It’s configurable though.
@@ -61,15 +59,19 @@ export default () => {
 
   return (
     <>
-      <button onClick={setLink} className={editor.isActive('link') ? 'is-active' : ''}>
-        setLink
-      </button>
-      <button
-        onClick={() => editor.chain().focus().unsetLink().run()}
-        disabled={!editor.isActive('link')}
-      >
-        unsetLink
-      </button>
+      <div className="control-group">
+        <div className="button-group">
+          <button onClick={setLink} className={editor.isActive('link') ? 'is-active' : ''}>
+            Set link
+          </button>
+          <button
+            onClick={() => editor.chain().focus().unsetLink().run()}
+            disabled={!editor.isActive('link')}
+          >
+            Unset link
+          </button>
+        </div>
+      </div>
       <EditorContent editor={editor} />
     </>
   )
diff --git a/demos/src/Marks/Link/React/styles.scss b/demos/src/Marks/Link/React/styles.scss
index 42ef1d6b1..b323fe45b 100644
--- a/demos/src/Marks/Link/React/styles.scss
+++ b/demos/src/Marks/Link/React/styles.scss
@@ -1,19 +1,25 @@
 /* Basic editor styles */
 .tiptap {
-  > * + * {
-    margin-top: 0.75em;
-  }
-
-  a {
-    color: #68cef8;
+  :first-child {
+    margin-top: 0;
   }
 
+  /* Code and preformatted text styles */
   code {
-    background-color: rgba(#616161, 0.1);
-    border-radius: 0.25em;
-    box-decoration-break: clone;
-    color: #616161;
-    font-size: 0.9rem;
-    padding: 0.25em;
+    background-color: var(--purple-light);
+    border-radius: 0.4rem;
+    color: var(--black);
+    font-size: 0.85rem;
+    padding: 0.25em 0.3em;
+  }
+
+  /* Link styles */
+  a {
+    color: var(--purple);
+    cursor: pointer;
+
+    &:hover {
+      color: var(--purple-contrast);
+    }
   }
 }
diff --git a/demos/src/Marks/Link/Vue/index.vue b/demos/src/Marks/Link/Vue/index.vue
index 7771ca823..9ac070870 100644
--- a/demos/src/Marks/Link/Vue/index.vue
+++ b/demos/src/Marks/Link/Vue/index.vue
@@ -1,11 +1,15 @@
 <template>
-  <div v-if="editor">
-    <button @click="setLink" :class="{ 'is-active': editor.isActive('link') }">
-      setLink
-    </button>
-    <button @click="editor.chain().focus().unsetLink().run()" :disabled="!editor.isActive('link')">
-      unsetLink
-    </button>
+  <div v-if="editor" class="container">
+    <div class="control-group">
+      <div class="button-group">
+        <button @click="setLink" :class="{ 'is-active': editor.isActive('link') }">
+          Set link
+        </button>
+        <button @click="editor.chain().focus().unsetLink().run()" :disabled="!editor.isActive('link')">
+          Unset link
+        </button>
+      </div>
+    </div>
     <editor-content :editor="editor" />
   </div>
 </template>
@@ -93,21 +97,27 @@ export default {
 <style lang="scss">
 /* Basic editor styles */
 .tiptap {
-  > * + * {
-    margin-top: 0.75em;
-  }
-
-  a {
-    color: #68CEF8;
+  :first-child {
+    margin-top: 0;
   }
 
+  /* Code and preformatted text styles */
   code {
-    font-size: 0.9rem;
-    padding: 0.25em;
-    border-radius: 0.25em;
-    background-color: rgba(#616161, 0.1);
-    color: #616161;
-    box-decoration-break: clone;
+    background-color: var(--purple-light);
+    border-radius: 0.4rem;
+    color: var(--black);
+    font-size: 0.85rem;
+    padding: 0.25em 0.3em;
+  }
+
+  /* Link styles */
+  a {
+    color: var(--purple);
+    cursor: pointer;
+
+    &:hover {
+      color: var(--purple-contrast);
+    }
   }
 }
 </style>
diff --git a/demos/src/Marks/Strike/React/index.jsx b/demos/src/Marks/Strike/React/index.jsx
index 063caef26..9843e481b 100644
--- a/demos/src/Marks/Strike/React/index.jsx
+++ b/demos/src/Marks/Strike/React/index.jsx
@@ -1,3 +1,5 @@
+import './styles.scss'
+
 import Document from '@tiptap/extension-document'
 import Paragraph from '@tiptap/extension-paragraph'
 import Strike from '@tiptap/extension-strike'
@@ -23,25 +25,28 @@ export default () => {
 
   return (
     <>
-      <button
-        onClick={() => editor.chain().focus().toggleStrike().run()}
-        className={editor.isActive('strike') ? 'is-active' : ''}
-      >
-        toggleStrike
-      </button>
-      <button
-        onClick={() => editor.chain().focus().setStrike().run()}
-        disabled={editor.isActive('strike')}
-      >
-        setStrike
-      </button>
-      <button
-        onClick={() => editor.chain().focus().unsetStrike().run()}
-        disabled={!editor.isActive('strike')}
-      >
-        unsetStrike
-      </button>
-
+      <div className="control-group">
+        <div className="button-group">
+          <button
+            onClick={() => editor.chain().focus().toggleStrike().run()}
+            className={editor.isActive('strike') ? 'is-active' : ''}
+          >
+            Toggle strike
+          </button>
+          <button
+            onClick={() => editor.chain().focus().setStrike().run()}
+            disabled={editor.isActive('strike')}
+          >
+            Set strike
+          </button>
+          <button
+            onClick={() => editor.chain().focus().unsetStrike().run()}
+            disabled={!editor.isActive('strike')}
+          >
+            Unset strike
+          </button>
+        </div>
+      </div>
       <EditorContent editor={editor} />
     </>
   )
diff --git a/demos/src/Marks/Strike/React/styles.scss b/demos/src/Marks/Strike/React/styles.scss
new file mode 100644
index 000000000..afd5ba214
--- /dev/null
+++ b/demos/src/Marks/Strike/React/styles.scss
@@ -0,0 +1,6 @@
+/* Basic editor styles */
+.tiptap {
+  :first-child {
+    margin-top: 0;
+  }
+}
diff --git a/demos/src/Marks/Strike/Vue/index.vue b/demos/src/Marks/Strike/Vue/index.vue
index c8a9eae74..21d33ae30 100644
--- a/demos/src/Marks/Strike/Vue/index.vue
+++ b/demos/src/Marks/Strike/Vue/index.vue
@@ -1,15 +1,18 @@
 <template>
-  <div v-if="editor">
-    <button @click="editor.chain().focus().toggleStrike().run()" :class="{ 'is-active': editor.isActive('strike') }">
-      toggleStrike
-    </button>
-    <button @click="editor.chain().focus().setStrike().run()" :disabled="editor.isActive('strike')">
-      setStrike
-    </button>
-    <button @click="editor.chain().focus().unsetStrike().run()" :disabled="!editor.isActive('strike')">
-      unsetStrike
-    </button>
-
+  <div v-if="editor" class="container">
+    <div class="control-group">
+      <div class="button-group">
+        <button @click="editor.chain().focus().toggleStrike().run()" :class="{ 'is-active': editor.isActive('strike') }">
+          Toggle strike
+        </button>
+        <button @click="editor.chain().focus().setStrike().run()" :disabled="editor.isActive('strike')">
+          Set strike
+        </button>
+        <button @click="editor.chain().focus().unsetStrike().run()" :disabled="!editor.isActive('strike')">
+          Unset strike
+        </button>
+      </div>
+    </div>
     <editor-content :editor="editor" />
   </div>
 </template>
diff --git a/demos/src/Marks/Subscript/React/index.jsx b/demos/src/Marks/Subscript/React/index.jsx
index a36f25d10..286f409c7 100644
--- a/demos/src/Marks/Subscript/React/index.jsx
+++ b/demos/src/Marks/Subscript/React/index.jsx
@@ -1,3 +1,5 @@
+import './styles.scss'
+
 import Document from '@tiptap/extension-document'
 import Paragraph from '@tiptap/extension-paragraph'
 import Subscript from '@tiptap/extension-subscript'
@@ -21,24 +23,28 @@ export default () => {
 
   return (
     <>
-      <button
-        onClick={() => editor.chain().focus().toggleSubscript().run()}
-        className={editor.isActive('subscript') ? 'is-active' : ''}
-      >
-        toggleSubscript
-      </button>
-      <button
-        onClick={() => editor.chain().focus().setSubscript().run()}
-        disabled={editor.isActive('subscript')}
-      >
-        setSubscript
-      </button>
-      <button
-        onClick={() => editor.chain().focus().unsetSubscript().run()}
-        disabled={!editor.isActive('subscript')}
-      >
-        unsetSubscript
-      </button>
+      <div className="control-group">
+        <div className="button-group">
+          <button
+            onClick={() => editor.chain().focus().toggleSubscript().run()}
+            className={editor.isActive('subscript') ? 'is-active' : ''}
+          >
+            Toggle subscript
+          </button>
+          <button
+            onClick={() => editor.chain().focus().setSubscript().run()}
+            disabled={editor.isActive('subscript')}
+          >
+            Set subscript
+          </button>
+          <button
+            onClick={() => editor.chain().focus().unsetSubscript().run()}
+            disabled={!editor.isActive('subscript')}
+          >
+            Unset subscript
+          </button>
+        </div>
+      </div>
 
       <EditorContent editor={editor} />
     </>
diff --git a/demos/src/Marks/Subscript/React/styles.scss b/demos/src/Marks/Subscript/React/styles.scss
new file mode 100644
index 000000000..afd5ba214
--- /dev/null
+++ b/demos/src/Marks/Subscript/React/styles.scss
@@ -0,0 +1,6 @@
+/* Basic editor styles */
+.tiptap {
+  :first-child {
+    margin-top: 0;
+  }
+}
diff --git a/demos/src/Marks/Subscript/Vue/index.vue b/demos/src/Marks/Subscript/Vue/index.vue
index a73e2c882..c0622af66 100644
--- a/demos/src/Marks/Subscript/Vue/index.vue
+++ b/demos/src/Marks/Subscript/Vue/index.vue
@@ -1,15 +1,18 @@
 <template>
-  <div v-if="editor">
-    <button @click="editor.chain().focus().toggleSubscript().run()" :class="{ 'is-active': editor.isActive('subscript') }">
-      toggleSubscript
-    </button>
-    <button @click="editor.chain().focus().setSubscript().run()" :disabled="editor.isActive('subscript')">
-      setSubscript
-    </button>
-    <button @click="editor.chain().focus().unsetSubscript().run()" :disabled="!editor.isActive('subscript')">
-      unsetSubscript
-    </button>
-
+  <div v-if="editor" class="container">
+    <div class="control-group">
+      <div class="button-group">
+        <button @click="editor.chain().focus().toggleSubscript().run()" :class="{ 'is-active': editor.isActive('subscript') }">
+          Toggle subscript
+        </button>
+        <button @click="editor.chain().focus().setSubscript().run()" :disabled="editor.isActive('subscript')">
+          Set subscript
+        </button>
+        <button @click="editor.chain().focus().unsetSubscript().run()" :disabled="!editor.isActive('subscript')">
+          Unset subscript
+        </button>
+      </div>
+    </div>
     <editor-content :editor="editor" />
   </div>
 </template>
@@ -53,3 +56,12 @@ export default {
   },
 }
 </script>
+
+<style lang="scss">
+/* Basic editor styles */
+.tiptap {
+  :first-child {
+    margin-top: 0;
+  }
+}
+</style>
diff --git a/demos/src/Marks/Superscript/React/index.jsx b/demos/src/Marks/Superscript/React/index.jsx
index 0a928f9f3..403407b95 100644
--- a/demos/src/Marks/Superscript/React/index.jsx
+++ b/demos/src/Marks/Superscript/React/index.jsx
@@ -1,3 +1,5 @@
+import './styles.scss'
+
 import Document from '@tiptap/extension-document'
 import Paragraph from '@tiptap/extension-paragraph'
 import Superscript from '@tiptap/extension-superscript'
@@ -21,24 +23,28 @@ export default () => {
 
   return (
     <>
-      <button
-        onClick={() => editor.chain().focus().toggleSuperscript().run()}
-        className={editor.isActive('superscript') ? 'is-active' : ''}
-      >
-        toggleSuperscript
-      </button>
-      <button
-        onClick={() => editor.chain().focus().setSuperscript().run()}
-        disabled={editor.isActive('superscript')}
-      >
-        setSuperscript
-      </button>
-      <button
-        onClick={() => editor.chain().focus().unsetSuperscript().run()}
-        disabled={!editor.isActive('superscript')}
-      >
-        unsetSuperscript
-      </button>
+      <div className="control-group">
+        <div className="button-group">
+          <button
+            onClick={() => editor.chain().focus().toggleSuperscript().run()}
+            className={editor.isActive('superscript') ? 'is-active' : ''}
+          >
+            Toggle superscript
+          </button>
+          <button
+            onClick={() => editor.chain().focus().setSuperscript().run()}
+            disabled={editor.isActive('superscript')}
+          >
+            Set superscript
+          </button>
+          <button
+            onClick={() => editor.chain().focus().unsetSuperscript().run()}
+            disabled={!editor.isActive('superscript')}
+          >
+            Unset superscript
+          </button>
+        </div>
+      </div>
 
       <EditorContent editor={editor} />
     </>
diff --git a/demos/src/Marks/Superscript/React/styles.scss b/demos/src/Marks/Superscript/React/styles.scss
new file mode 100644
index 000000000..afd5ba214
--- /dev/null
+++ b/demos/src/Marks/Superscript/React/styles.scss
@@ -0,0 +1,6 @@
+/* Basic editor styles */
+.tiptap {
+  :first-child {
+    margin-top: 0;
+  }
+}
diff --git a/demos/src/Marks/Superscript/Vue/index.vue b/demos/src/Marks/Superscript/Vue/index.vue
index 5b9110025..cf2d6beac 100644
--- a/demos/src/Marks/Superscript/Vue/index.vue
+++ b/demos/src/Marks/Superscript/Vue/index.vue
@@ -1,15 +1,18 @@
 <template>
-  <div v-if="editor">
-    <button @click="editor.chain().focus().toggleSuperscript().run()" :class="{ 'is-active': editor.isActive('superscript') }">
-      toggleSuperscript
-    </button>
-    <button @click="editor.chain().focus().setSuperscript().run()" :disabled="editor.isActive('superscript')">
-      setSuperscript
-    </button>
-    <button @click="editor.chain().focus().unsetSuperscript().run()" :disabled="!editor.isActive('superscript')">
-      unsetSuperscript
-    </button>
-
+  <div v-if="editor" class="container">
+    <div class="control-group">
+      <div class="button-group">
+        <button @click="editor.chain().focus().toggleSuperscript().run()" :class="{ 'is-active': editor.isActive('superscript') }">
+          Toggle superscript
+        </button>
+        <button @click="editor.chain().focus().setSuperscript().run()" :disabled="editor.isActive('superscript')">
+          Set superscript
+        </button>
+        <button @click="editor.chain().focus().unsetSuperscript().run()" :disabled="!editor.isActive('superscript')">
+          Unset superscript
+        </button>
+      </div>
+    </div>
     <editor-content :editor="editor" />
   </div>
 </template>
@@ -53,3 +56,12 @@ export default {
   },
 }
 </script>
+
+<style lang="scss">
+/* Basic editor styles */
+.tiptap {
+  :first-child {
+    margin-top: 0;
+  }
+}
+</style>
diff --git a/demos/src/Marks/TextStyle/React/index.jsx b/demos/src/Marks/TextStyle/React/index.jsx
index 86aad4722..02797205a 100644
--- a/demos/src/Marks/TextStyle/React/index.jsx
+++ b/demos/src/Marks/TextStyle/React/index.jsx
@@ -1,3 +1,5 @@
+import './styles.scss'
+
 import Document from '@tiptap/extension-document'
 import Paragraph from '@tiptap/extension-paragraph'
 import Text from '@tiptap/extension-text'
diff --git a/demos/src/Marks/TextStyle/React/styles.scss b/demos/src/Marks/TextStyle/React/styles.scss
new file mode 100644
index 000000000..afd5ba214
--- /dev/null
+++ b/demos/src/Marks/TextStyle/React/styles.scss
@@ -0,0 +1,6 @@
+/* Basic editor styles */
+.tiptap {
+  :first-child {
+    margin-top: 0;
+  }
+}
diff --git a/demos/src/Marks/TextStyle/Vue/index.vue b/demos/src/Marks/TextStyle/Vue/index.vue
index 6c3c0d94d..28af75f6f 100644
--- a/demos/src/Marks/TextStyle/Vue/index.vue
+++ b/demos/src/Marks/TextStyle/Vue/index.vue
@@ -42,3 +42,12 @@ export default {
   },
 }
 </script>
+
+<style lang="scss">
+/* Basic editor styles */
+.tiptap {
+  :first-child {
+    margin-top: 0;
+  }
+}
+</style>
diff --git a/demos/src/Marks/Underline/React/index.jsx b/demos/src/Marks/Underline/React/index.jsx
index 79a9b7940..b68890e2a 100644
--- a/demos/src/Marks/Underline/React/index.jsx
+++ b/demos/src/Marks/Underline/React/index.jsx
@@ -1,3 +1,5 @@
+import './styles.scss'
+
 import Document from '@tiptap/extension-document'
 import Paragraph from '@tiptap/extension-paragraph'
 import Text from '@tiptap/extension-text'
@@ -21,24 +23,28 @@ export default () => {
 
   return (
     <>
-      <button
-        onClick={() => editor.chain().focus().toggleUnderline().run()}
-        className={editor.isActive('underline') ? 'is-active' : ''}
-      >
-        toggleUnderline
-      </button>
-      <button
-        onClick={() => editor.chain().focus().setUnderline().run()}
-        disabled={editor.isActive('underline')}
-      >
-        setUnderline
-      </button>
-      <button
-        onClick={() => editor.chain().focus().unsetUnderline().run()}
-        disabled={!editor.isActive('underline')}
-      >
-        unsetUnderline
-      </button>
+      <div className="control-group">
+        <div className="button-group">
+          <button
+            onClick={() => editor.chain().focus().toggleUnderline().run()}
+            className={editor.isActive('underline') ? 'is-active' : ''}
+          >
+            Toggle underline
+          </button>
+          <button
+            onClick={() => editor.chain().focus().setUnderline().run()}
+            disabled={editor.isActive('underline')}
+          >
+            Set underline
+          </button>
+          <button
+            onClick={() => editor.chain().focus().unsetUnderline().run()}
+            disabled={!editor.isActive('underline')}
+          >
+            Unset underline
+          </button>
+        </div>
+      </div>
 
       <EditorContent editor={editor} />
     </>
diff --git a/demos/src/Marks/Underline/React/styles.scss b/demos/src/Marks/Underline/React/styles.scss
new file mode 100644
index 000000000..afd5ba214
--- /dev/null
+++ b/demos/src/Marks/Underline/React/styles.scss
@@ -0,0 +1,6 @@
+/* Basic editor styles */
+.tiptap {
+  :first-child {
+    margin-top: 0;
+  }
+}
diff --git a/demos/src/Marks/Underline/Vue/index.vue b/demos/src/Marks/Underline/Vue/index.vue
index 31dfe20d1..6efb5b7fd 100644
--- a/demos/src/Marks/Underline/Vue/index.vue
+++ b/demos/src/Marks/Underline/Vue/index.vue
@@ -1,15 +1,18 @@
 <template>
-  <div v-if="editor">
-    <button @click="editor.chain().focus().toggleUnderline().run()" :class="{ 'is-active': editor.isActive('underline') }">
-      toggleUnderline
-    </button>
-    <button @click="editor.chain().focus().setUnderline().run()" :disabled="editor.isActive('underline')">
-      setUnderline
-    </button>
-    <button @click="editor.chain().focus().unsetUnderline().run()" :disabled="!editor.isActive('underline')">
-      unsetUnderline
-    </button>
-
+  <div v-if="editor" class="container">
+    <div class="control-group">
+      <div class="button-group">
+        <button @click="editor.chain().focus().toggleUnderline().run()" :class="{ 'is-active': editor.isActive('underline') }">
+          Toggle underline
+        </button>
+        <button @click="editor.chain().focus().setUnderline().run()" :disabled="editor.isActive('underline')">
+          Set underline
+        </button>
+        <button @click="editor.chain().focus().unsetUnderline().run()" :disabled="!editor.isActive('underline')">
+          Unset underline
+        </button>
+      </div>
+    </div>
     <editor-content :editor="editor" />
   </div>
 </template>
@@ -53,3 +56,12 @@ export default {
   },
 }
 </script>
+
+<style lang="scss">
+/* Basic editor styles */
+.tiptap {
+  :first-child {
+    margin-top: 0;
+  }
+}
+</style>
diff --git a/demos/src/Nodes/Blockquote/React/index.jsx b/demos/src/Nodes/Blockquote/React/index.jsx
index 39553a84c..e474aba48 100644
--- a/demos/src/Nodes/Blockquote/React/index.jsx
+++ b/demos/src/Nodes/Blockquote/React/index.jsx
@@ -28,27 +28,31 @@ export default () => {
   }
 
   return (
-    <div>
-      <button
-        onClick={() => editor.chain().focus().toggleBlockquote().run()}
-        className={editor.isActive('blockquote') ? 'is-active' : ''}
-      >
-        toggleBlockquote
-      </button>
-      <button
-        onClick={() => editor.chain().focus().setBlockquote().run()}
-        disabled={!editor.can().setBlockquote()}
-      >
-        setBlockquote
-      </button>
-      <button
-        onClick={() => editor.chain().focus().unsetBlockquote().run()}
-        disabled={!editor.can().unsetBlockquote()}
-      >
-        unsetBlockquote
-      </button>
+    <>
+      <div className="control-group">
+        <div className="button-group">
+          <button
+            onClick={() => editor.chain().focus().toggleBlockquote().run()}
+            className={editor.isActive('blockquote') ? 'is-active' : ''}
+          >
+            Toggle blockquote
+          </button>
+          <button
+            onClick={() => editor.chain().focus().setBlockquote().run()}
+            disabled={!editor.can().setBlockquote()}
+          >
+            Set blockquote
+          </button>
+          <button
+            onClick={() => editor.chain().focus().unsetBlockquote().run()}
+            disabled={!editor.can().unsetBlockquote()}
+          >
+            Unset blockquote
+          </button>
+        </div>
+      </div>
 
       <EditorContent editor={editor} />
-    </div>
+    </>
   )
 }
diff --git a/demos/src/Nodes/Blockquote/React/styles.scss b/demos/src/Nodes/Blockquote/React/styles.scss
index edabffcb0..8680100c4 100644
--- a/demos/src/Nodes/Blockquote/React/styles.scss
+++ b/demos/src/Nodes/Blockquote/React/styles.scss
@@ -1,11 +1,12 @@
 /* Basic editor styles */
 .tiptap {
-  > * + * {
-    margin-top: 0.75em;
+  :first-child {
+    margin-top: 0;
   }
 
   blockquote {
-    border-left: 3px solid rgba(#0d0d0d, 0.1);
+    border-left: 3px solid var(--gray-3);
+    margin: 1.5rem 0;
     padding-left: 1rem;
   }
 }
diff --git a/demos/src/Nodes/Blockquote/Vue/index.vue b/demos/src/Nodes/Blockquote/Vue/index.vue
index a95903edd..123b1ed91 100644
--- a/demos/src/Nodes/Blockquote/Vue/index.vue
+++ b/demos/src/Nodes/Blockquote/Vue/index.vue
@@ -1,15 +1,18 @@
 <template>
-  <div v-if="editor">
-    <button @click="editor.chain().focus().toggleBlockquote().run()" :class="{ 'is-active': editor.isActive('blockquote') }">
-      toggleBlockquote
-    </button>
-    <button @click="editor.chain().focus().setBlockquote().run()" :disabled="!editor.can().setBlockquote()">
-      setBlockquote
-    </button>
-    <button @click="editor.chain().focus().unsetBlockquote().run()" :disabled="!editor.can().unsetBlockquote()">
-      unsetBlockquote
-    </button>
-
+  <div v-if="editor" class="container">
+    <div class="control-group">
+      <div class="button-group">
+        <button @click="editor.chain().focus().toggleBlockquote().run()" :class="{ 'is-active': editor.isActive('blockquote') }">
+          Toggle blockquote
+        </button>
+        <button @click="editor.chain().focus().setBlockquote().run()" :disabled="!editor.can().setBlockquote()">
+          Set blockquote
+        </button>
+        <button @click="editor.chain().focus().unsetBlockquote().run()" :disabled="!editor.can().unsetBlockquote()">
+          Unset blockquote
+        </button>
+      </div>
+    </div>
     <editor-content :editor="editor" />
   </div>
 </template>
@@ -58,13 +61,14 @@ export default {
 <style lang="scss">
 /* Basic editor styles */
 .tiptap {
-  > * + * {
-    margin-top: 0.75em;
+  :first-child {
+    margin-top: 0;
   }
 
   blockquote {
+    border-left: 3px solid var(--gray-3);
+    margin: 1.5rem 0;
     padding-left: 1rem;
-    border-left: 3px solid rgba(#0D0D0D, 0.1);
   }
 }
 </style>
diff --git a/demos/src/Nodes/BulletList/React/index.jsx b/demos/src/Nodes/BulletList/React/index.jsx
index ef05fd223..651ed1920 100644
--- a/demos/src/Nodes/BulletList/React/index.jsx
+++ b/demos/src/Nodes/BulletList/React/index.jsx
@@ -25,30 +25,34 @@ export default () => {
 
   return (
     <>
-      <button
-        onClick={() => editor.chain().focus().toggleBulletList().run()}
-        className={editor.isActive('bulletList') ? 'is-active' : ''}
-      >
-        toggleBulletList
-      </button>
-      <button
-        onClick={() => editor.chain().focus().splitListItem('listItem').run()}
-        disabled={!editor.can().splitListItem('listItem')}
-      >
-        splitListItem
-      </button>
-      <button
-        onClick={() => editor.chain().focus().sinkListItem('listItem').run()}
-        disabled={!editor.can().sinkListItem('listItem')}
-      >
-        sinkListItem
-      </button>
-      <button
-        onClick={() => editor.chain().focus().liftListItem('listItem').run()}
-        disabled={!editor.can().liftListItem('listItem')}
-      >
-        liftListItem
-      </button>
+      <div className="control-group">
+        <div className="button-group">
+          <button
+            onClick={() => editor.chain().focus().toggleBulletList().run()}
+            className={editor.isActive('bulletList') ? 'is-active' : ''}
+          >
+            Toggle bullet list
+          </button>
+          <button
+            onClick={() => editor.chain().focus().splitListItem('listItem').run()}
+            disabled={!editor.can().splitListItem('listItem')}
+          >
+            Split list item
+          </button>
+          <button
+            onClick={() => editor.chain().focus().sinkListItem('listItem').run()}
+            disabled={!editor.can().sinkListItem('listItem')}
+          >
+            Sink list item
+          </button>
+          <button
+            onClick={() => editor.chain().focus().liftListItem('listItem').run()}
+            disabled={!editor.can().liftListItem('listItem')}
+          >
+            Lift list item
+          </button>
+        </div>
+      </div>
 
       <EditorContent editor={editor} />
     </>
diff --git a/demos/src/Nodes/BulletList/React/styles.scss b/demos/src/Nodes/BulletList/React/styles.scss
index bb33a9715..83cabbd9f 100644
--- a/demos/src/Nodes/BulletList/React/styles.scss
+++ b/demos/src/Nodes/BulletList/React/styles.scss
@@ -1,11 +1,18 @@
 /* Basic editor styles */
 .tiptap {
-  > * + * {
-    margin-top: 0.75em;
+  :first-child {
+    margin-top: 0;
   }
 
-  ul,
+  /* List styles */
+  ul, 
   ol {
     padding: 0 1rem;
+    margin: 1.25rem 1rem 1.25rem 0.4rem;
+    
+    li p {
+      margin-top: 0.25em;
+      margin-bottom: 0.25em;
+    }
   }
 }
diff --git a/demos/src/Nodes/BulletList/Vue/index.vue b/demos/src/Nodes/BulletList/Vue/index.vue
index 8e6f98fa3..4e54ec316 100644
--- a/demos/src/Nodes/BulletList/Vue/index.vue
+++ b/demos/src/Nodes/BulletList/Vue/index.vue
@@ -1,18 +1,21 @@
 <template>
-  <div v-if="editor">
-    <button @click="editor.chain().focus().toggleBulletList().run()" :class="{ 'is-active': editor.isActive('bulletList') }">
-      toggleBulletList
-    </button>
-    <button @click="editor.chain().focus().splitListItem('listItem').run()" :disabled="!editor.can().splitListItem('listItem')">
-      splitListItem
-    </button>
-    <button @click="editor.chain().focus().sinkListItem('listItem').run()" :disabled="!editor.can().sinkListItem('listItem')">
-      sinkListItem
-    </button>
-    <button @click="editor.chain().focus().liftListItem('listItem').run()" :disabled="!editor.can().liftListItem('listItem')">
-      liftListItem
-    </button>
-
+  <div v-if="editor" class="container">
+    <div class="control-group">
+      <div class="button-group">
+        <button @click="editor.chain().focus().toggleBulletList().run()" :class="{ 'is-active': editor.isActive('bulletList') }">
+          Toggle bullet list
+        </button>
+        <button @click="editor.chain().focus().splitListItem('listItem').run()" :disabled="!editor.can().splitListItem('listItem')">
+          Split list item
+        </button>
+        <button @click="editor.chain().focus().sinkListItem('listItem').run()" :disabled="!editor.can().sinkListItem('listItem')">
+          Sink list item
+        </button>
+        <button @click="editor.chain().focus().liftListItem('listItem').run()" :disabled="!editor.can().liftListItem('listItem')">
+          Lift list item
+        </button>
+      </div>
+    </div>
     <editor-content :editor="editor" />
   </div>
 </template>
@@ -63,13 +66,20 @@ export default {
 <style lang="scss">
 /* Basic editor styles */
 .tiptap {
-  > * + * {
-    margin-top: 0.75em;
+  :first-child {
+    margin-top: 0;
   }
 
+  /* List styles */
   ul,
   ol {
     padding: 0 1rem;
+    margin: 1.25rem 1rem 1.25rem 0.4rem;
+
+    li p {
+      margin-top: 0.25em;
+      margin-bottom: 0.25em;
+    }
   }
 }
 </style>
diff --git a/demos/src/Nodes/CodeBlock/React/index.jsx b/demos/src/Nodes/CodeBlock/React/index.jsx
index 84420ccd4..f0d1be478 100644
--- a/demos/src/Nodes/CodeBlock/React/index.jsx
+++ b/demos/src/Nodes/CodeBlock/React/index.jsx
@@ -37,18 +37,22 @@ export default () => {
 
   return (
     <>
-      <button
-        onClick={() => editor.chain().focus().toggleCodeBlock().run()}
-        className={editor.isActive('codeBlock') ? 'is-active' : ''}
-      >
-        toggleCodeBlock
-      </button>
-      <button
-        onClick={() => editor.chain().focus().setCodeBlock().run()}
-        disabled={editor.isActive('codeBlock')}
-      >
-        setCodeBlock
-      </button>
+      <div className="control-group">
+        <div className="button-group">
+          <button
+            onClick={() => editor.chain().focus().toggleCodeBlock().run()}
+            className={editor.isActive('codeBlock') ? 'is-active' : ''}
+          >
+            Toggle code block
+          </button>
+          <button
+            onClick={() => editor.chain().focus().setCodeBlock().run()}
+            disabled={editor.isActive('codeBlock')}
+          >
+            Set code block
+          </button>
+        </div>
+      </div>
 
       <EditorContent editor={editor} />
     </>
diff --git a/demos/src/Nodes/CodeBlock/React/styles.scss b/demos/src/Nodes/CodeBlock/React/styles.scss
index 21ec699a3..3350ce5a4 100644
--- a/demos/src/Nodes/CodeBlock/React/styles.scss
+++ b/demos/src/Nodes/CodeBlock/React/styles.scss
@@ -1,14 +1,15 @@
 /* Basic editor styles */
 .tiptap {
-  > * + * {
-    margin-top: 0.75em;
+  :first-child {
+    margin-top: 0;
   }
 
   pre {
-    background: #0d0d0d;
+    background: var(--black);
     border-radius: 0.5rem;
-    color: #fff;
-    font-family: "JetBrainsMono", monospace;
+    color: var(--white);
+    font-family: 'JetBrainsMono', monospace;
+    margin: 1.5rem 0;
     padding: 0.75rem 1rem;
 
     code {
diff --git a/demos/src/Nodes/CodeBlock/Vue/index.vue b/demos/src/Nodes/CodeBlock/Vue/index.vue
index c25377070..d7fc69f47 100644
--- a/demos/src/Nodes/CodeBlock/Vue/index.vue
+++ b/demos/src/Nodes/CodeBlock/Vue/index.vue
@@ -1,12 +1,15 @@
 <template>
-  <div v-if="editor">
-    <button @click="editor.chain().focus().toggleCodeBlock().run()" :class="{ 'is-active': editor.isActive('codeBlock') }">
-      toggleCodeBlock
-    </button>
-    <button @click="editor.chain().focus().setCodeBlock().run()" :disabled="editor.isActive('codeBlock')">
-      setCodeBlock
-    </button>
-
+  <div v-if="editor" class="container">
+    <div class="control-group">
+      <div class="button-group">
+        <button @click="editor.chain().focus().toggleCodeBlock().run()" :class="{ 'is-active': editor.isActive('codeBlock') }">
+          Toggle code block
+        </button>
+        <button @click="editor.chain().focus().setCodeBlock().run()" :disabled="editor.isActive('codeBlock')">
+          Set code block
+        </button>
+      </div>
+    </div>
     <editor-content :editor="editor" />
   </div>
 </template>
@@ -68,22 +71,23 @@ export default {
 <style lang="scss">
 /* Basic editor styles */
 .tiptap {
-  > * + * {
-    margin-top: 0.75em;
+  :first-child {
+    margin-top: 0;
   }
 
   pre {
-    background: #0D0D0D;
-    color: #FFF;
-    font-family: 'JetBrainsMono', monospace;
-    padding: 0.75rem 1rem;
+    background: var(--black);
     border-radius: 0.5rem;
+    color: var(--white);
+    font-family: 'JetBrainsMono', monospace;
+    margin: 1.5rem 0;
+    padding: 0.75rem 1rem;
 
     code {
-      color: inherit;
-      padding: 0;
       background: none;
+      color: inherit;
       font-size: 0.8rem;
+      padding: 0;
     }
   }
 }
diff --git a/demos/src/Nodes/CodeBlockLowlight/React/index.jsx b/demos/src/Nodes/CodeBlockLowlight/React/index.jsx
index e6bef15c2..6a5264f0c 100644
--- a/demos/src/Nodes/CodeBlockLowlight/React/index.jsx
+++ b/demos/src/Nodes/CodeBlockLowlight/React/index.jsx
@@ -59,18 +59,22 @@ export default () => {
 
   return (
     <>
-      <button
-        onClick={() => editor.chain().focus().toggleCodeBlock().run()}
-        className={editor.isActive('codeBlock') ? 'is-active' : ''}
-      >
-        toggleCodeBlock
-      </button>
-      <button
-        onClick={() => editor.chain().focus().setCodeBlock().run()}
-        disabled={editor.isActive('codeBlock')}
-      >
-        setCodeBlock
-      </button>
+      <div className="control-group">
+        <div className="button-group">
+          <button
+            onClick={() => editor.chain().focus().toggleCodeBlock().run()}
+            className={editor.isActive('codeBlock') ? 'is-active' : ''}
+          >
+            Toggle code block
+          </button>
+          <button
+            onClick={() => editor.chain().focus().setCodeBlock().run()}
+            disabled={editor.isActive('codeBlock')}
+          >
+            Set code block
+          </button>
+        </div>
+      </div>
 
       <EditorContent editor={editor} />
     </>
diff --git a/demos/src/Nodes/CodeBlockLowlight/React/styles.scss b/demos/src/Nodes/CodeBlockLowlight/React/styles.scss
index 35303a785..a8484746e 100644
--- a/demos/src/Nodes/CodeBlockLowlight/React/styles.scss
+++ b/demos/src/Nodes/CodeBlockLowlight/React/styles.scss
@@ -1,14 +1,15 @@
 /* Basic editor styles */
 .tiptap {
-  > * + * {
-    margin-top: 0.75em;
+  :first-child {
+    margin-top: 0;
   }
 
   pre {
-    background: #0d0d0d;
+    background: var(--black);
     border-radius: 0.5rem;
-    color: #fff;
-    font-family: "JetBrainsMono", monospace;
+    color: var(--white);
+    font-family: 'JetBrainsMono', monospace;
+    margin: 1.5rem 0;
     padding: 0.75rem 1rem;
 
     code {
@@ -18,6 +19,7 @@
       padding: 0;
     }
 
+    /* Code styling */
     .hljs-comment,
     .hljs-quote {
       color: #616161;
diff --git a/demos/src/Nodes/CodeBlockLowlight/Vue/index.vue b/demos/src/Nodes/CodeBlockLowlight/Vue/index.vue
index 0793c6706..dfd6a3def 100644
--- a/demos/src/Nodes/CodeBlockLowlight/Vue/index.vue
+++ b/demos/src/Nodes/CodeBlockLowlight/Vue/index.vue
@@ -1,11 +1,15 @@
 <template>
-  <div v-if="editor">
-    <button @click="editor.chain().focus().toggleCodeBlock().run()" :class="{ 'is-active': editor.isActive('codeBlock') }">
-      toggleCodeBlock
-    </button>
-    <button @click="editor.chain().focus().setCodeBlock().run()" :disabled="editor.isActive('codeBlock')">
-      setCodeBlock
-    </button>
+  <div v-if="editor" class="container">
+    <div class="control-group">
+      <div class="button-group">
+        <button @click="editor.chain().focus().toggleCodeBlock().run()" :class="{ 'is-active': editor.isActive('codeBlock') }">
+          Toggle code block
+        </button>
+        <button @click="editor.chain().focus().setCodeBlock().run()" :disabled="editor.isActive('codeBlock')">
+          Set code block
+        </button>
+      </div>
+    </div>
 
     <editor-content :editor="editor" />
   </div>
@@ -81,24 +85,26 @@ export default {
 <style lang="scss">
 /* Basic editor styles */
 .tiptap {
-  > * + * {
-    margin-top: 0.75em;
+  :first-child {
+    margin-top: 0;
   }
 
   pre {
-    background: #0D0D0D;
-    color: #FFF;
-    font-family: 'JetBrainsMono', monospace;
-    padding: 0.75rem 1rem;
+    background: var(--black);
     border-radius: 0.5rem;
+    color: var(--white);
+    font-family: 'JetBrainsMono', monospace;
+    margin: 1.5rem 0;
+    padding: 0.75rem 1rem;
 
     code {
-      color: inherit;
-      padding: 0;
       background: none;
+      color: inherit;
       font-size: 0.8rem;
+      padding: 0;
     }
 
+    /* Code styling */
     .hljs-comment,
     .hljs-quote {
       color: #616161;
@@ -114,7 +120,7 @@ export default {
     .hljs-name,
     .hljs-selector-id,
     .hljs-selector-class {
-      color: #F98181;
+      color: #f98181;
     }
 
     .hljs-number,
@@ -124,23 +130,23 @@ export default {
     .hljs-literal,
     .hljs-type,
     .hljs-params {
-      color: #FBBC88;
+      color: #fbbc88;
     }
 
     .hljs-string,
     .hljs-symbol,
     .hljs-bullet {
-      color: #B9F18D;
+      color: #b9f18d;
     }
 
     .hljs-title,
     .hljs-section {
-      color: #FAF594;
+      color: #faf594;
     }
 
     .hljs-keyword,
     .hljs-selector-tag {
-      color: #70CFF8;
+      color: #70cff8;
     }
 
     .hljs-emphasis {
diff --git a/demos/src/Nodes/Document/React/index.jsx b/demos/src/Nodes/Document/React/index.jsx
index 72e0c9b34..0494e8318 100644
--- a/demos/src/Nodes/Document/React/index.jsx
+++ b/demos/src/Nodes/Document/React/index.jsx
@@ -1,3 +1,5 @@
+import './styles.scss'
+
 import Document from '@tiptap/extension-document'
 import Paragraph from '@tiptap/extension-paragraph'
 import Text from '@tiptap/extension-text'
diff --git a/demos/src/Nodes/Document/React/styles.scss b/demos/src/Nodes/Document/React/styles.scss
new file mode 100644
index 000000000..afd5ba214
--- /dev/null
+++ b/demos/src/Nodes/Document/React/styles.scss
@@ -0,0 +1,6 @@
+/* Basic editor styles */
+.tiptap {
+  :first-child {
+    margin-top: 0;
+  }
+}
diff --git a/demos/src/Nodes/Document/Vue/index.vue b/demos/src/Nodes/Document/Vue/index.vue
index 0feba795f..b80a42fbf 100644
--- a/demos/src/Nodes/Document/Vue/index.vue
+++ b/demos/src/Nodes/Document/Vue/index.vue
@@ -39,3 +39,12 @@ export default {
   },
 }
 </script>
+
+<style lang="scss">
+/* Basic editor styles */
+.tiptap {
+  :first-child {
+    margin-top: 0;
+  }
+}
+</style>
diff --git a/demos/src/Nodes/HardBreak/React/index.jsx b/demos/src/Nodes/HardBreak/React/index.jsx
index 1e372d0a9..f97e05218 100644
--- a/demos/src/Nodes/HardBreak/React/index.jsx
+++ b/demos/src/Nodes/HardBreak/React/index.jsx
@@ -1,3 +1,5 @@
+import './styles.scss'
+
 import Document from '@tiptap/extension-document'
 import HardBreak from '@tiptap/extension-hard-break'
 import Paragraph from '@tiptap/extension-paragraph'
@@ -28,7 +30,11 @@ export default () => {
 
   return (
     <>
-      <button onClick={() => editor.chain().focus().setHardBreak().run()}>setHardBreak</button>
+      <div className="control-group">
+        <div className="button-group">
+          <button onClick={() => editor.chain().focus().setHardBreak().run()}>Set hard break</button>
+        </div>
+      </div>
       <EditorContent editor={editor} />
     </>
   )
diff --git a/demos/src/Nodes/HardBreak/React/styles.scss b/demos/src/Nodes/HardBreak/React/styles.scss
new file mode 100644
index 000000000..afd5ba214
--- /dev/null
+++ b/demos/src/Nodes/HardBreak/React/styles.scss
@@ -0,0 +1,6 @@
+/* Basic editor styles */
+.tiptap {
+  :first-child {
+    margin-top: 0;
+  }
+}
diff --git a/demos/src/Nodes/HardBreak/Vue/index.vue b/demos/src/Nodes/HardBreak/Vue/index.vue
index a1cb2bbfb..5a2b0f981 100644
--- a/demos/src/Nodes/HardBreak/Vue/index.vue
+++ b/demos/src/Nodes/HardBreak/Vue/index.vue
@@ -1,9 +1,12 @@
 <template>
-  <div v-if="editor">
-    <button @click="editor.chain().focus().setHardBreak().run()">
-      setHardBreak
-    </button>
-
+  <div v-if="editor" class="container">
+    <div className="control-group">
+      <div className="button-group">
+        <button @click="editor.chain().focus().setHardBreak().run()">
+          Set hard break
+        </button>
+      </div>
+    </div>
     <editor-content :editor="editor" />
   </div>
 </template>
@@ -54,3 +57,12 @@ export default {
   },
 }
 </script>
+
+<style lang="scss">
+/* Basic editor styles */
+.tiptap {
+  :first-child {
+    margin-top: 0;
+  }
+}
+</style>
diff --git a/demos/src/Nodes/Heading/React/index.jsx b/demos/src/Nodes/Heading/React/index.jsx
index d80f5b847..e6a55a122 100644
--- a/demos/src/Nodes/Heading/React/index.jsx
+++ b/demos/src/Nodes/Heading/React/index.jsx
@@ -1,3 +1,5 @@
+import './styles.scss'
+
 import Document from '@tiptap/extension-document'
 import Heading from '@tiptap/extension-heading'
 import Paragraph from '@tiptap/extension-paragraph'
@@ -29,24 +31,28 @@ export default () => {
 
   return (
     <>
-      <button
-        onClick={() => editor.chain().focus().toggleHeading({ level: 1 }).run()}
-        className={editor.isActive('heading', { level: 1 }) ? 'is-active' : ''}
-      >
-        H1
-      </button>
-      <button
-        onClick={() => editor.chain().focus().toggleHeading({ level: 2 }).run()}
-        className={editor.isActive('heading', { level: 2 }) ? 'is-active' : ''}
-      >
-        H2
-      </button>
-      <button
-        onClick={() => editor.chain().focus().toggleHeading({ level: 3 }).run()}
-        className={editor.isActive('heading', { level: 3 }) ? 'is-active' : ''}
-      >
-        H3
-      </button>
+      <div className="control-group">
+        <div className="button-group">
+          <button
+            onClick={() => editor.chain().focus().toggleHeading({ level: 1 }).run()}
+            className={editor.isActive('heading', { level: 1 }) ? 'is-active' : ''}
+          >
+            H1
+          </button>
+          <button
+            onClick={() => editor.chain().focus().toggleHeading({ level: 2 }).run()}
+            className={editor.isActive('heading', { level: 2 }) ? 'is-active' : ''}
+          >
+            H2
+          </button>
+          <button
+            onClick={() => editor.chain().focus().toggleHeading({ level: 3 }).run()}
+            className={editor.isActive('heading', { level: 3 }) ? 'is-active' : ''}
+          >
+            H3
+          </button>
+        </div>
+      </div>
 
       <EditorContent editor={editor} />
     </>
diff --git a/demos/src/Nodes/Heading/React/styles.scss b/demos/src/Nodes/Heading/React/styles.scss
new file mode 100644
index 000000000..ec1db9057
--- /dev/null
+++ b/demos/src/Nodes/Heading/React/styles.scss
@@ -0,0 +1,42 @@
+/* Basic editor styles */
+.tiptap {
+  :first-child {
+    margin-top: 0;
+  }
+
+  /* Heading styles */
+  h1, 
+  h2, 
+  h3, 
+  h4, 
+  h5, 
+  h6 {
+    line-height: 1.1;
+    margin-top: 2.5rem;
+    text-wrap: pretty;
+  }
+
+  h1, 
+  h2 {
+    margin-top: 3.5rem;
+    margin-bottom: 1.5rem;
+  }
+
+  h1 { 
+    font-size: 1.4rem; 
+  }
+
+  h2 { 
+    font-size: 1.2rem; 
+  }
+
+  h3 { 
+    font-size: 1.1rem; 
+  }
+
+  h4, 
+  h5, 
+  h6 { 
+    font-size: 1rem; 
+  }
+}
diff --git a/demos/src/Nodes/Heading/Vue/index.vue b/demos/src/Nodes/Heading/Vue/index.vue
index 37fda0b38..227b546b8 100644
--- a/demos/src/Nodes/Heading/Vue/index.vue
+++ b/demos/src/Nodes/Heading/Vue/index.vue
@@ -1,15 +1,18 @@
 <template>
-  <div v-if="editor">
-    <button @click="editor.chain().focus().toggleHeading({ level: 1 }).run()" :class="{ 'is-active': editor.isActive('heading', { level: 1 }) }">
-      H1
-    </button>
-    <button @click="editor.chain().focus().toggleHeading({ level: 2 }).run()" :class="{ 'is-active': editor.isActive('heading', { level: 2 }) }">
-      H2
-    </button>
-    <button @click="editor.chain().focus().toggleHeading({ level: 3 }).run()" :class="{ 'is-active': editor.isActive('heading', { level: 3 }) }">
-      H3
-    </button>
-
+  <div v-if="editor" class="container">
+    <div class="control-group">
+      <div class="button-group">
+        <button @click="editor.chain().focus().toggleHeading({ level: 1 }).run()" :class="{ 'is-active': editor.isActive('heading', { level: 1 }) }">
+          H1
+        </button>
+        <button @click="editor.chain().focus().toggleHeading({ level: 2 }).run()" :class="{ 'is-active': editor.isActive('heading', { level: 2 }) }">
+          H2
+        </button>
+        <button @click="editor.chain().focus().toggleHeading({ level: 3 }).run()" :class="{ 'is-active': editor.isActive('heading', { level: 3 }) }">
+          H3
+        </button>
+      </div>
+    </div>
     <editor-content :editor="editor" />
   </div>
 </template>
@@ -56,3 +59,48 @@ export default {
   },
 }
 </script>
+
+<style lang="scss">
+/* Basic editor styles */
+.tiptap {
+  :first-child {
+    margin-top: 0;
+  }
+
+  /* Heading styles */
+  h1,
+  h2,
+  h3,
+  h4,
+  h5,
+  h6 {
+    line-height: 1.1;
+    margin-top: 2.5rem;
+    text-wrap: pretty;
+  }
+
+  h1,
+  h2 {
+    margin-top: 3.5rem;
+    margin-bottom: 1.5rem;
+  }
+
+  h1 {
+    font-size: 1.4rem;
+  }
+
+  h2 {
+    font-size: 1.2rem;
+  }
+
+  h3 {
+    font-size: 1.1rem;
+  }
+
+  h4,
+  h5,
+  h6 {
+    font-size: 1rem;
+  }
+}
+</style>
diff --git a/demos/src/Nodes/HorizontalRule/React/index.jsx b/demos/src/Nodes/HorizontalRule/React/index.jsx
index 310edc77b..a7cbed7c1 100644
--- a/demos/src/Nodes/HorizontalRule/React/index.jsx
+++ b/demos/src/Nodes/HorizontalRule/React/index.jsx
@@ -25,9 +25,13 @@ export default () => {
 
   return (
     <>
-      <button onClick={() => editor.chain().focus().setHorizontalRule().run()}>
-        setHorizontalRule
-      </button>
+      <div className="control-group">
+        <div className="button-group">
+          <button onClick={() => editor.chain().focus().setHorizontalRule().run()}>
+            Set horizontal rule
+          </button>
+        </div>
+      </div>
 
       <EditorContent editor={editor} />
     </>
diff --git a/demos/src/Nodes/HorizontalRule/React/styles.scss b/demos/src/Nodes/HorizontalRule/React/styles.scss
index bfd53e2ac..a0198be1b 100644
--- a/demos/src/Nodes/HorizontalRule/React/styles.scss
+++ b/demos/src/Nodes/HorizontalRule/React/styles.scss
@@ -1,3 +1,16 @@
-hr.ProseMirror-selectednode {
-  border-top: 1px solid #68cef8;
-}
+.tiptap {
+  :first-child {
+    margin-top: 0;
+  }
+
+  hr {
+    border: none;
+    border-top: 1px solid var(--gray-2);
+    cursor: pointer;
+    margin: 2rem 0;
+
+    &.ProseMirror-selectednode {
+      border-top: 1px solid var(--purple);
+    }
+  }
+}
\ No newline at end of file
diff --git a/demos/src/Nodes/HorizontalRule/Vue/index.vue b/demos/src/Nodes/HorizontalRule/Vue/index.vue
index bea761bf3..190b1fc5b 100644
--- a/demos/src/Nodes/HorizontalRule/Vue/index.vue
+++ b/demos/src/Nodes/HorizontalRule/Vue/index.vue
@@ -1,9 +1,12 @@
 <template>
-  <div v-if="editor">
-    <button @click="editor.chain().focus().setHorizontalRule().run()">
-      setHorizontalRule
-    </button>
-
+  <div v-if="editor" class="container">
+    <div class="control-group">
+      <div class="button-group">
+        <button @click="editor.chain().focus().setHorizontalRule().run()">
+          Set horizontal rule
+        </button>
+      </div>
+    </div>
     <editor-content :editor="editor" />
   </div>
 </template>
@@ -50,8 +53,21 @@ export default {
 }
 </script>
 
-<style lang="scss">
-hr.ProseMirror-selectednode {
-  border-top: 1px solid #68CEF8;
+<style lang="scss">/* Basic editor styles */
+.tiptap {
+  :first-child {
+    margin-top: 0;
+  }
+
+  hr {
+    border: none;
+    border-top: 1px solid var(--gray-2);
+    cursor: pointer;
+    margin: 2rem 0;
+
+    &.ProseMirror-selectednode {
+      border-top: 1px solid var(--purple);
+    }
+  }
 }
 </style>
diff --git a/demos/src/Nodes/Image/React/index.jsx b/demos/src/Nodes/Image/React/index.jsx
index 292fac617..b3bb2d178 100644
--- a/demos/src/Nodes/Image/React/index.jsx
+++ b/demos/src/Nodes/Image/React/index.jsx
@@ -13,8 +13,8 @@ export default () => {
     extensions: [Document, Paragraph, Text, Image, Dropcursor],
     content: `
         <p>This is a basic example of implementing images. Drag to re-order.</p>
-        <img src="https://source.unsplash.com/8xznAGy4HcY/800x400" />
-        <img src="https://source.unsplash.com/K9QHL52rE2k/800x400" />
+        <img src="https://placehold.co/800x400" />
+        <img src="https://placehold.co/800x400/6A00F5/white" />
       `,
   })
 
@@ -31,9 +31,13 @@ export default () => {
   }
 
   return (
-    <div>
-      <button onClick={addImage}>setImage</button>
+    <>
+      <div className="control-group">
+        <div className="button-group">
+          <button onClick={addImage}>Set image</button>
+        </div>
+      </div>
       <EditorContent editor={editor} />
-    </div>
+    </>
   )
 }
diff --git a/demos/src/Nodes/Image/React/styles.scss b/demos/src/Nodes/Image/React/styles.scss
index 426ddc168..51aa105ad 100644
--- a/demos/src/Nodes/Image/React/styles.scss
+++ b/demos/src/Nodes/Image/React/styles.scss
@@ -1,15 +1,17 @@
 /* Basic editor styles */
 .tiptap {
-  > * + * {
-    margin-top: 0.75em;
+  :first-child {
+    margin-top: 0;
   }
 
   img {
+    display: block;
     height: auto;
+    margin: 1.5rem 0;
     max-width: 100%;
 
     &.ProseMirror-selectednode {
-      outline: 3px solid #68cef8;
+      outline: 3px solid var(--purple);
     }
   }
 }
diff --git a/demos/src/Nodes/Image/Vue/index.vue b/demos/src/Nodes/Image/Vue/index.vue
index 94a5883a3..e3ed4e7e7 100644
--- a/demos/src/Nodes/Image/Vue/index.vue
+++ b/demos/src/Nodes/Image/Vue/index.vue
@@ -1,8 +1,12 @@
 <template>
-  <div v-if="editor">
-    <button @click="addImage">
-      setImage
-    </button>
+  <div v-if="editor" class="container">
+    <div class="control-group">
+      <div class="button-group">
+        <button @click="addImage">
+          Set image
+        </button>
+      </div>
+    </div>
     <editor-content :editor="editor" />
   </div>
 </template>
@@ -47,8 +51,8 @@ export default {
       ],
       content: `
         <p>This is a basic example of implementing images. Drag to re-order.</p>
-        <img src="https://source.unsplash.com/8xznAGy4HcY/800x400" />
-        <img src="https://source.unsplash.com/K9QHL52rE2k/800x400" />
+        <img src="https://placehold.co/800x400" />
+        <img src="https://placehold.co/800x400/6A00F5/white" />
       `,
     })
   },
@@ -62,16 +66,18 @@ export default {
 <style lang="scss">
 /* Basic editor styles */
 .tiptap {
-  > * + * {
-    margin-top: 0.75em;
+  :first-child {
+    margin-top: 0;
   }
 
   img {
-    max-width: 100%;
+    display: block;
     height: auto;
+    margin: 1.5rem 0;
+    max-width: 100%;
 
     &.ProseMirror-selectednode {
-      outline: 3px solid #68CEF8;
+      outline: 3px solid var(--purple);
     }
   }
 }
diff --git a/demos/src/Nodes/ListItem/React/index.jsx b/demos/src/Nodes/ListItem/React/index.jsx
index 851edb9db..1cf7c3186 100644
--- a/demos/src/Nodes/ListItem/React/index.jsx
+++ b/demos/src/Nodes/ListItem/React/index.jsx
@@ -41,36 +41,40 @@ export default () => {
 
   return (
     <>
-      <button
-        onClick={() => editor.chain().focus().toggleBulletList().run()}
-        className={editor.isActive('bulletList') ? 'is-active' : ''}
-      >
-        toggleBulletList
-      </button>
-      <button
-        onClick={() => editor.chain().focus().toggleOrderedList().run()}
-        className={editor.isActive('orderedList') ? 'is-active' : ''}
-      >
-        toggleOrderedList
-      </button>
-      <button
-        onClick={() => editor.chain().focus().splitListItem('listItem').run()}
-        disabled={!editor.can().splitListItem('listItem')}
-      >
-        splitListItem
-      </button>
-      <button
-        onClick={() => editor.chain().focus().sinkListItem('listItem').run()}
-        disabled={!editor.can().sinkListItem('listItem')}
-      >
-        sinkListItem
-      </button>
-      <button
-        onClick={() => editor.chain().focus().liftListItem('listItem').run()}
-        disabled={!editor.can().liftListItem('listItem')}
-      >
-        liftListItem
-      </button>
+      <div className="control-group">
+        <div className="button-group">
+          <button
+            onClick={() => editor.chain().focus().toggleBulletList().run()}
+            className={editor.isActive('bulletList') ? 'is-active' : ''}
+          >
+            Toggle bullet list
+          </button>
+          <button
+            onClick={() => editor.chain().focus().toggleOrderedList().run()}
+            className={editor.isActive('orderedList') ? 'is-active' : ''}
+          >
+            Toggle ordered list
+          </button>
+          <button
+            onClick={() => editor.chain().focus().splitListItem('listItem').run()}
+            disabled={!editor.can().splitListItem('listItem')}
+          >
+            Split list item
+          </button>
+          <button
+            onClick={() => editor.chain().focus().sinkListItem('listItem').run()}
+            disabled={!editor.can().sinkListItem('listItem')}
+          >
+            Sink list item
+          </button>
+          <button
+            onClick={() => editor.chain().focus().liftListItem('listItem').run()}
+            disabled={!editor.can().liftListItem('listItem')}
+          >
+            Lift list item
+          </button>
+        </div>
+      </div>
 
       <EditorContent editor={editor} />
     </>
diff --git a/demos/src/Nodes/ListItem/React/styles.scss b/demos/src/Nodes/ListItem/React/styles.scss
index bb33a9715..56175642f 100644
--- a/demos/src/Nodes/ListItem/React/styles.scss
+++ b/demos/src/Nodes/ListItem/React/styles.scss
@@ -1,11 +1,18 @@
 /* Basic editor styles */
 .tiptap {
-  > * + * {
-    margin-top: 0.75em;
+  :first-child {
+    margin-top: 0;
   }
 
+  /* List styles */
   ul,
   ol {
     padding: 0 1rem;
+    margin: 1.25rem 1rem 1.25rem 0.4rem;
+
+    li p {
+      margin-top: 0.25em;
+      margin-bottom: 0.25em;
+    }
   }
-}
+}
\ No newline at end of file
diff --git a/demos/src/Nodes/ListItem/Vue/index.vue b/demos/src/Nodes/ListItem/Vue/index.vue
index 488c01222..2730aeb5e 100644
--- a/demos/src/Nodes/ListItem/Vue/index.vue
+++ b/demos/src/Nodes/ListItem/Vue/index.vue
@@ -1,21 +1,24 @@
 <template>
-  <div v-if="editor">
-    <button @click="editor.chain().focus().toggleBulletList().run()" :class="{ 'is-active': editor.isActive('bulletList') }">
-      toggleBulletList
-    </button>
-    <button @click="editor.chain().focus().toggleOrderedList().run()" :class="{ 'is-active': editor.isActive('orderedList') }">
-      toggleOrderedList
-    </button>
-    <button @click="editor.chain().focus().splitListItem('listItem').run()" :disabled="!editor.can().splitListItem('listItem')">
-      splitListItem
-    </button>
-    <button @click="editor.chain().focus().sinkListItem('listItem').run()" :disabled="!editor.can().sinkListItem('listItem')">
-      sinkListItem
-    </button>
-    <button @click="editor.chain().focus().liftListItem('listItem').run()" :disabled="!editor.can().liftListItem('listItem')">
-      liftListItem
-    </button>
-
+  <div v-if="editor" class="container">
+    <div class="control-group">
+      <div class="button-group">
+        <button @click="editor.chain().focus().toggleBulletList().run()" :class="{ 'is-active': editor.isActive('bulletList') }">
+          Toggle bullet list
+        </button>
+        <button @click="editor.chain().focus().toggleOrderedList().run()" :class="{ 'is-active': editor.isActive('orderedList') }">
+          Toggle ordered list
+        </button>
+        <button @click="editor.chain().focus().splitListItem('listItem').run()" :disabled="!editor.can().splitListItem('listItem')">
+          Split list item
+        </button>
+        <button @click="editor.chain().focus().sinkListItem('listItem').run()" :disabled="!editor.can().sinkListItem('listItem')">
+          Sink list item
+        </button>
+        <button @click="editor.chain().focus().liftListItem('listItem').run()" :disabled="!editor.can().liftListItem('listItem')">
+          Lift list item
+        </button>
+      </div>
+    </div>
     <editor-content :editor="editor" />
   </div>
 </template>
@@ -83,13 +86,20 @@ export default {
 <style lang="scss">
 /* Basic editor styles */
 .tiptap {
-  > * + * {
-    margin-top: 0.75em;
+  :first-child {
+    margin-top: 0;
   }
 
+  /* List styles */
   ul,
   ol {
     padding: 0 1rem;
+    margin: 1.25rem 1rem 1.25rem 0.4rem;
+
+    li p {
+      margin-top: 0.25em;
+      margin-bottom: 0.25em;
+    }
   }
 }
 </style>
diff --git a/demos/src/Nodes/Mention/React/MentionList.jsx b/demos/src/Nodes/Mention/React/MentionList.jsx
index 8611180a9..d321c3845 100644
--- a/demos/src/Nodes/Mention/React/MentionList.jsx
+++ b/demos/src/Nodes/Mention/React/MentionList.jsx
@@ -52,11 +52,11 @@ export default forwardRef((props, ref) => {
   }))
 
   return (
-    <div className="items">
+    <div className="dropdown-menu">
       {props.items.length
         ? props.items.map((item, index) => (
           <button
-            className={`item ${index === selectedIndex ? 'is-selected' : ''}`}
+            className={index === selectedIndex ? 'is-selected' : ''}
             key={index}
             onClick={() => selectItem(index)}
           >
diff --git a/demos/src/Nodes/Mention/React/MentionList.scss b/demos/src/Nodes/Mention/React/MentionList.scss
index 89e81cd23..e9ee1abf9 100644
--- a/demos/src/Nodes/Mention/React/MentionList.scss
+++ b/demos/src/Nodes/Mention/React/MentionList.scss
@@ -1,25 +1,31 @@
-.items {
-  background: #fff;
-  border-radius: 0.5rem;
-  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.05), 0px 10px 20px rgba(0, 0, 0, 0.1);
-  color: rgba(0, 0, 0, 0.8);
-  font-size: 0.9rem;
-  overflow: hidden;
-  padding: 0.2rem;
+/* Dropdown menu */
+.dropdown-menu {
+  background: var(--white);
+  border: 1px solid var(--gray-1);
+  border-radius: 0.7rem;
+  box-shadow: var(--shadow);
+  display: flex;
+  flex-direction: column;
+  gap: 0.1rem;
+  overflow: auto;
+  padding: 0.4rem;
   position: relative;
-}
 
-.item {
-  background: transparent;
-  border: 1px solid transparent;
-  border-radius: 0.4rem;
-  display: block;
-  margin: 0;
-  padding: 0.2rem 0.4rem;
-  text-align: left;
-  width: 100%;
+  button {
+    align-items: center;
+    background-color: transparent;
+    display: flex;
+    gap: 0.25rem;
+    text-align: left;
+    width: 100%;
 
-  &.is-selected {
-    border-color: #000;
+    &:hover,
+    &:hover.is-selected {
+      background-color: var(--gray-3);
+    }
+
+    &.is-selected {
+      background-color: var(--gray-2);
+    }
   }
 }
diff --git a/demos/src/Nodes/Mention/React/index.jsx b/demos/src/Nodes/Mention/React/index.jsx
index 424247399..8d40a8d4d 100644
--- a/demos/src/Nodes/Mention/React/index.jsx
+++ b/demos/src/Nodes/Mention/React/index.jsx
@@ -1,8 +1,10 @@
 import './styles.scss'
 
+import Document from '@tiptap/extension-document'
 import Mention from '@tiptap/extension-mention'
+import Paragraph from '@tiptap/extension-paragraph'
+import Text from '@tiptap/extension-text'
 import { EditorContent, useEditor } from '@tiptap/react'
-import StarterKit from '@tiptap/starter-kit'
 import React from 'react'
 
 import suggestion from './suggestion.js'
@@ -10,7 +12,9 @@ import suggestion from './suggestion.js'
 export default () => {
   const editor = useEditor({
     extensions: [
-      StarterKit,
+      Document,
+      Paragraph,
+      Text,
       Mention.configure({
         HTMLAttributes: {
           class: 'mention',
diff --git a/demos/src/Nodes/Mention/React/styles.scss b/demos/src/Nodes/Mention/React/styles.scss
index e4a543963..390a1f37a 100644
--- a/demos/src/Nodes/Mention/React/styles.scss
+++ b/demos/src/Nodes/Mention/React/styles.scss
@@ -1,12 +1,14 @@
+/* Basic editor styles */
 .tiptap {
-  > * + * {
-    margin-top: 0.75em;
+  :first-child {
+    margin-top: 0;
+  }
+
+  .mention {
+    background-color: var(--purple-light);
+    border-radius: 0.4rem;
+    box-decoration-break: clone;
+    color: var(--purple);
+    padding: 0.1rem 0.3rem;
   }
 }
-
-.mention {
-  border: 1px solid #000;
-  border-radius: 0.4rem;
-  box-decoration-break: clone;
-  padding: 0.1rem 0.3rem;
-}
diff --git a/demos/src/Nodes/Mention/Vue/MentionList.vue b/demos/src/Nodes/Mention/Vue/MentionList.vue
index 387f04bcf..9299b54ca 100644
--- a/demos/src/Nodes/Mention/Vue/MentionList.vue
+++ b/demos/src/Nodes/Mention/Vue/MentionList.vue
@@ -1,8 +1,7 @@
 <template>
-  <div class="items">
+  <div class="dropdown-menu">
     <template v-if="items.length">
       <button
-        class="item"
         :class="{ 'is-selected': index === selectedIndex }"
         v-for="(item, index) in items"
         :key="index"
@@ -87,32 +86,35 @@ export default {
 </script>
 
 <style lang="scss">
-.items {
-  padding: 0.2rem;
+/* Dropdown menu */
+.dropdown-menu {
+  background: var(--white);
+  border: 1px solid var(--gray-1);
+  border-radius: 0.7rem;
+  box-shadow: var(--shadow);
+  display: flex;
+  flex-direction: column;
+  gap: 0.1rem;
+  overflow: auto;
+  padding: 0.4rem;
   position: relative;
-  border-radius: 0.5rem;
-  background: #FFF;
-  color: rgba(0, 0, 0, 0.8);
-  overflow: hidden;
-  font-size: 0.9rem;
-  box-shadow:
-    0 0 0 1px rgba(0, 0, 0, 0.05),
-    0px 10px 20px rgba(0, 0, 0, 0.1),
-  ;
-}
 
-.item {
-  display: block;
-  margin: 0;
-  width: 100%;
-  text-align: left;
-  background: transparent;
-  border-radius: 0.4rem;
-  border: 1px solid transparent;
-  padding: 0.2rem 0.4rem;
+  button {
+    align-items: center;
+    background-color: transparent;
+    display: flex;
+    gap: 0.25rem;
+    text-align: left;
+    width: 100%;
 
-  &.is-selected {
-    border-color: #000;
+    &:hover,
+    &:hover.is-selected {
+      background-color: var(--gray-3);
+    }
+
+    &.is-selected {
+      background-color: var(--gray-2);
+    }
   }
 }
 </style>
diff --git a/demos/src/Nodes/Mention/Vue/index.vue b/demos/src/Nodes/Mention/Vue/index.vue
index e1da58a8f..6cc51fb2b 100644
--- a/demos/src/Nodes/Mention/Vue/index.vue
+++ b/demos/src/Nodes/Mention/Vue/index.vue
@@ -5,8 +5,10 @@
 </template>
 
 <script>
+import Document from '@tiptap/extension-document'
 import Mention from '@tiptap/extension-mention'
-import StarterKit from '@tiptap/starter-kit'
+import Paragraph from '@tiptap/extension-paragraph'
+import Text from '@tiptap/extension-text'
 import { Editor, EditorContent } from '@tiptap/vue-3'
 
 import suggestion from './suggestion.js'
@@ -25,7 +27,9 @@ export default {
   mounted() {
     this.editor = new Editor({
       extensions: [
-        StarterKit,
+        Document,
+        Paragraph,
+        Text,
         Mention.configure({
           HTMLAttributes: {
             class: 'mention',
@@ -50,16 +54,18 @@ export default {
 </script>
 
 <style lang="scss">
+/* Basic editor styles */
 .tiptap {
-  > * + * {
-    margin-top: 0.75em;
+  :first-child {
+    margin-top: 0;
+  }
+
+  .mention {
+    background-color: var(--purple-light);
+    border-radius: 0.4rem;
+    box-decoration-break: clone;
+    color: var(--purple);
+    padding: 0.1rem 0.3rem;
   }
 }
-
-.mention {
-  border: 1px solid #000;
-  border-radius: 0.4rem;
-  padding: 0.1rem 0.3rem;
-  box-decoration-break: clone;
-}
 </style>
diff --git a/demos/src/Nodes/OrderedList/React/index.jsx b/demos/src/Nodes/OrderedList/React/index.jsx
index 8c37a01a9..45f6cbfd2 100644
--- a/demos/src/Nodes/OrderedList/React/index.jsx
+++ b/demos/src/Nodes/OrderedList/React/index.jsx
@@ -30,30 +30,34 @@ export default () => {
 
   return (
     <>
-      <button
-        onClick={() => editor.chain().focus().toggleOrderedList().run()}
-        className={editor.isActive('orderedList') ? 'is-active' : ''}
-      >
-        toggleOrderedList
-      </button>
-      <button
-        onClick={() => editor.chain().focus().splitListItem('listItem').run()}
-        disabled={!editor.can().splitListItem('listItem')}
-      >
-        splitListItem
-      </button>
-      <button
-        onClick={() => editor.chain().focus().sinkListItem('listItem').run()}
-        disabled={!editor.can().sinkListItem('listItem')}
-      >
-        sinkListItem
-      </button>
-      <button
-        onClick={() => editor.chain().focus().liftListItem('listItem').run()}
-        disabled={!editor.can().liftListItem('listItem')}
-      >
-        liftListItem
-      </button>
+      <div className="control-group">
+        <div className="button-group">
+          <button
+            onClick={() => editor.chain().focus().toggleOrderedList().run()}
+            className={editor.isActive('orderedList') ? 'is-active' : ''}
+          >
+            Toggle ordered list
+          </button>
+          <button
+            onClick={() => editor.chain().focus().splitListItem('listItem').run()}
+            disabled={!editor.can().splitListItem('listItem')}
+          >
+            Split list item
+          </button>
+          <button
+            onClick={() => editor.chain().focus().sinkListItem('listItem').run()}
+            disabled={!editor.can().sinkListItem('listItem')}
+          >
+            Sink list item
+          </button>
+          <button
+            onClick={() => editor.chain().focus().liftListItem('listItem').run()}
+            disabled={!editor.can().liftListItem('listItem')}
+          >
+            Lift list item
+          </button>
+        </div>
+      </div>
 
       <EditorContent editor={editor} />
     </>
diff --git a/demos/src/Nodes/OrderedList/React/styles.scss b/demos/src/Nodes/OrderedList/React/styles.scss
index bb33a9715..56175642f 100644
--- a/demos/src/Nodes/OrderedList/React/styles.scss
+++ b/demos/src/Nodes/OrderedList/React/styles.scss
@@ -1,11 +1,18 @@
 /* Basic editor styles */
 .tiptap {
-  > * + * {
-    margin-top: 0.75em;
+  :first-child {
+    margin-top: 0;
   }
 
+  /* List styles */
   ul,
   ol {
     padding: 0 1rem;
+    margin: 1.25rem 1rem 1.25rem 0.4rem;
+
+    li p {
+      margin-top: 0.25em;
+      margin-bottom: 0.25em;
+    }
   }
-}
+}
\ No newline at end of file
diff --git a/demos/src/Nodes/OrderedList/Vue/index.vue b/demos/src/Nodes/OrderedList/Vue/index.vue
index e0040c7ec..d2bef6da5 100644
--- a/demos/src/Nodes/OrderedList/Vue/index.vue
+++ b/demos/src/Nodes/OrderedList/Vue/index.vue
@@ -1,18 +1,21 @@
 <template>
-  <div v-if="editor">
-    <button @click="editor.chain().focus().toggleOrderedList().run()" :class="{ 'is-active': editor.isActive('orderedList') }">
-      toggleOrderedList
-    </button>
-    <button @click="editor.chain().focus().splitListItem('listItem').run()" :disabled="!editor.can().splitListItem('listItem')">
-      splitListItem
-    </button>
-    <button @click="editor.chain().focus().sinkListItem('listItem').run()" :disabled="!editor.can().sinkListItem('listItem')">
-      sinkListItem
-    </button>
-    <button @click="editor.chain().focus().liftListItem('listItem').run()" :disabled="!editor.can().liftListItem('listItem')">
-      liftListItem
-    </button>
-
+  <div v-if="editor" class="container">
+    <div class="control-group">
+      <div class="button-group">
+        <button @click="editor.chain().focus().toggleOrderedList().run()" :class="{ 'is-active': editor.isActive('orderedList') }">
+          Toggle ordered list
+        </button>
+        <button @click="editor.chain().focus().splitListItem('listItem').run()" :disabled="!editor.can().splitListItem('listItem')">
+          Split list item
+        </button>
+        <button @click="editor.chain().focus().sinkListItem('listItem').run()" :disabled="!editor.can().sinkListItem('listItem')">
+          Sink list item
+        </button>
+        <button @click="editor.chain().focus().liftListItem('listItem').run()" :disabled="!editor.can().liftListItem('listItem')">
+          Lift list item
+        </button>
+      </div>
+    </div>
     <editor-content :editor="editor" />
   </div>
 </template>
@@ -68,13 +71,20 @@ export default {
 <style lang="scss">
 /* Basic editor styles */
 .tiptap {
-  > * + * {
-    margin-top: 0.75em;
+  :first-child {
+    margin-top: 0;
   }
 
+  /* List styles */
   ul,
   ol {
     padding: 0 1rem;
+    margin: 1.25rem 1rem 1.25rem 0.4rem;
+
+    li p {
+      margin-top: 0.25em;
+      margin-bottom: 0.25em;
+    }
   }
 }
 </style>
diff --git a/demos/src/Nodes/Paragraph/React/index.jsx b/demos/src/Nodes/Paragraph/React/index.jsx
index 295e36461..ebee981f4 100644
--- a/demos/src/Nodes/Paragraph/React/index.jsx
+++ b/demos/src/Nodes/Paragraph/React/index.jsx
@@ -1,3 +1,5 @@
+import './styles.scss'
+
 import Document from '@tiptap/extension-document'
 import Paragraph from '@tiptap/extension-paragraph'
 import Text from '@tiptap/extension-text'
diff --git a/demos/src/Nodes/Paragraph/React/styles.scss b/demos/src/Nodes/Paragraph/React/styles.scss
new file mode 100644
index 000000000..f42af27b1
--- /dev/null
+++ b/demos/src/Nodes/Paragraph/React/styles.scss
@@ -0,0 +1,6 @@
+/* Basic editor styles */
+.tiptap {
+  :first-child {
+    margin-top: 0;
+  }
+}
\ No newline at end of file
diff --git a/demos/src/Nodes/Paragraph/Vue/index.vue b/demos/src/Nodes/Paragraph/Vue/index.vue
index 2ffb20c39..729d1ae43 100644
--- a/demos/src/Nodes/Paragraph/Vue/index.vue
+++ b/demos/src/Nodes/Paragraph/Vue/index.vue
@@ -39,3 +39,12 @@ export default {
   },
 }
 </script>
+
+<style lang="scss">
+/* Basic editor styles */
+.tiptap {
+  :first-child {
+    margin-top: 0;
+  }
+}
+</style>
diff --git a/demos/src/Nodes/Table/React/index.jsx b/demos/src/Nodes/Table/React/index.jsx
index 46ff9646a..88a293bef 100644
--- a/demos/src/Nodes/Table/React/index.jsx
+++ b/demos/src/Nodes/Table/React/index.jsx
@@ -34,9 +34,9 @@ export default () => {
             </tr>
             <tr>
               <td>Cyndi Lauper</td>
-              <td>singer</td>
-              <td>songwriter</td>
-              <td>actress</td>
+              <td>Singer</td>
+              <td>Songwriter</td>
+              <td>Actress</td>
             </tr>
           </tbody>
         </table>
@@ -49,41 +49,45 @@ export default () => {
 
   return (
     <>
-      <button
-        onClick={() => editor.chain().focus().insertTable({ rows: 3, cols: 3, withHeaderRow: true }).run()
-        }
-      >
-        insertTable
-      </button>
-      <button onClick={() => editor.chain().focus().addColumnBefore().run()}>
-        addColumnBefore
-      </button>
-      <button onClick={() => editor.chain().focus().addColumnAfter().run()}>addColumnAfter</button>
-      <button onClick={() => editor.chain().focus().deleteColumn().run()}>deleteColumn</button>
-      <button onClick={() => editor.chain().focus().addRowBefore().run()}>addRowBefore</button>
-      <button onClick={() => editor.chain().focus().addRowAfter().run()}>addRowAfter</button>
-      <button onClick={() => editor.chain().focus().deleteRow().run()}>deleteRow</button>
-      <button onClick={() => editor.chain().focus().deleteTable().run()}>deleteTable</button>
-      <button onClick={() => editor.chain().focus().mergeCells().run()}>mergeCells</button>
-      <button onClick={() => editor.chain().focus().splitCell().run()}>splitCell</button>
-      <button onClick={() => editor.chain().focus().toggleHeaderColumn().run()}>
-        toggleHeaderColumn
-      </button>
-      <button onClick={() => editor.chain().focus().toggleHeaderRow().run()}>
-        toggleHeaderRow
-      </button>
-      <button onClick={() => editor.chain().focus().toggleHeaderCell().run()}>
-        toggleHeaderCell
-      </button>
-      <button onClick={() => editor.chain().focus().mergeOrSplit().run()}>mergeOrSplit</button>
-      <button onClick={() => editor.chain().focus().setCellAttribute('colspan', 2).run()}>
-        setCellAttribute
-      </button>
-      <button onClick={() => editor.chain().focus().fixTables().run()}>fixTables</button>
-      <button onClick={() => editor.chain().focus().goToNextCell().run()}>goToNextCell</button>
-      <button onClick={() => editor.chain().focus().goToPreviousCell().run()}>
-        goToPreviousCell
-      </button>
+      <div className="control-group">
+        <div className="button-group">
+          <button
+            onClick={() => editor.chain().focus().insertTable({ rows: 3, cols: 3, withHeaderRow: true }).run()
+            }
+          >
+            Insert table
+          </button>
+          <button onClick={() => editor.chain().focus().addColumnBefore().run()}>
+            Add column before
+          </button>
+          <button onClick={() => editor.chain().focus().addColumnAfter().run()}>Add column after</button>
+          <button onClick={() => editor.chain().focus().deleteColumn().run()}>Delete column</button>
+          <button onClick={() => editor.chain().focus().addRowBefore().run()}>Add row before</button>
+          <button onClick={() => editor.chain().focus().addRowAfter().run()}>Add row after</button>
+          <button onClick={() => editor.chain().focus().deleteRow().run()}>Delete row</button>
+          <button onClick={() => editor.chain().focus().deleteTable().run()}>Delete table</button>
+          <button onClick={() => editor.chain().focus().mergeCells().run()}>Merge cells</button>
+          <button onClick={() => editor.chain().focus().splitCell().run()}>Split cell</button>
+          <button onClick={() => editor.chain().focus().toggleHeaderColumn().run()}>
+            Toggle header column
+          </button>
+          <button onClick={() => editor.chain().focus().toggleHeaderRow().run()}>
+            Toggle header row
+          </button>
+          <button onClick={() => editor.chain().focus().toggleHeaderCell().run()}>
+            Toggle header cell
+          </button>
+          <button onClick={() => editor.chain().focus().mergeOrSplit().run()}>Merge or split</button>
+          <button onClick={() => editor.chain().focus().setCellAttribute('colspan', 2).run()}>
+            Set cell attribute
+          </button>
+          <button onClick={() => editor.chain().focus().fixTables().run()}>Fix tables</button>
+          <button onClick={() => editor.chain().focus().goToNextCell().run()}>Go to next cell</button>
+          <button onClick={() => editor.chain().focus().goToPreviousCell().run()}>
+            Go to previous cell
+          </button>
+        </div>
+      </div>
 
       <EditorContent editor={editor} />
     </>
diff --git a/demos/src/Nodes/Table/React/styles.scss b/demos/src/Nodes/Table/React/styles.scss
index 78b13518d..88d77b462 100644
--- a/demos/src/Nodes/Table/React/styles.scss
+++ b/demos/src/Nodes/Table/React/styles.scss
@@ -1,4 +1,10 @@
+/* Basic editor styles */
 .tiptap {
+  :first-child {
+    margin-top: 0;
+  }
+
+  /* Table-specific styling */
   table {
     border-collapse: collapse;
     margin: 0;
@@ -8,10 +14,10 @@
 
     td,
     th {
-      border: 2px solid #ced4da;
+      border: 1px solid var(--gray-3);
       box-sizing: border-box;
       min-width: 1em;
-      padding: 3px 5px;
+      padding: 6px 8px;
       position: relative;
       vertical-align: top;
 
@@ -21,45 +27,38 @@
     }
 
     th {
-      background-color: #f1f3f5;
+      background-color: var(--gray-1);
       font-weight: bold;
       text-align: left;
     }
 
     .selectedCell:after {
-      background: rgba(200, 200, 255, 0.4);
+      background: var(--gray-2);
       content: "";
-      left: 0;
-      right: 0;
-      top: 0;
-      bottom: 0;
+      left: 0; right: 0; top: 0; bottom: 0;
       pointer-events: none;
       position: absolute;
       z-index: 2;
     }
 
     .column-resize-handle {
-      background-color: #adf;
+      background-color: var(--purple);
       bottom: -2px;
+      pointer-events: none;
       position: absolute;
       right: -2px;
-      pointer-events: none;
       top: 0;
       width: 4px;
     }
+  }
 
-    p {
-      margin: 0;
-    }
+  .tableWrapper {
+    margin: 1.5rem 0;
+    overflow-x: auto;
+  }
+
+  .resize-cursor {
+    cursor: ew-resize;
+    cursor: col-resize;
   }
 }
-
-.tableWrapper {
-  padding: 1rem 0;
-  overflow-x: auto;
-}
-
-.resize-cursor {
-  cursor: ew-resize;
-  cursor: col-resize;
-}
diff --git a/demos/src/Nodes/Table/Vue/index.vue b/demos/src/Nodes/Table/Vue/index.vue
index 0830c6c2d..c0c341aa8 100644
--- a/demos/src/Nodes/Table/Vue/index.vue
+++ b/demos/src/Nodes/Table/Vue/index.vue
@@ -1,59 +1,63 @@
 <template>
-  <div v-if="editor">
-    <button @click="editor.chain().focus().insertTable({ rows: 3, cols: 3, withHeaderRow: true }).run()">
-      insertTable
-    </button>
-    <button @click="editor.chain().focus().addColumnBefore().run()">
-      addColumnBefore
-    </button>
-    <button @click="editor.chain().focus().addColumnAfter().run()">
-      addColumnAfter
-    </button>
-    <button @click="editor.chain().focus().deleteColumn().run()">
-      deleteColumn
-    </button>
-    <button @click="editor.chain().focus().addRowBefore().run()">
-      addRowBefore
-    </button>
-    <button @click="editor.chain().focus().addRowAfter().run()">
-      addRowAfter
-    </button>
-    <button @click="editor.chain().focus().deleteRow().run()">
-      deleteRow
-    </button>
-    <button @click="editor.chain().focus().deleteTable().run()">
-      deleteTable
-    </button>
-    <button @click="editor.chain().focus().mergeCells().run()">
-      mergeCells
-    </button>
-    <button @click="editor.chain().focus().splitCell().run()">
-      splitCell
-    </button>
-    <button @click="editor.chain().focus().toggleHeaderColumn().run()">
-      toggleHeaderColumn
-    </button>
-    <button @click="editor.chain().focus().toggleHeaderRow().run()">
-      toggleHeaderRow
-    </button>
-    <button @click="editor.chain().focus().toggleHeaderCell().run()">
-      toggleHeaderCell
-    </button>
-    <button @click="editor.chain().focus().mergeOrSplit().run()">
-      mergeOrSplit
-    </button>
-    <button @click="editor.chain().focus().setCellAttribute('colspan', 2).run()">
-      setCellAttribute
-    </button>
-    <button @click="editor.chain().focus().fixTables().run()">
-      fixTables
-    </button>
-    <button @click="editor.chain().focus().goToNextCell().run()">
-      goToNextCell
-    </button>
-    <button @click="editor.chain().focus().goToPreviousCell().run()">
-      goToPreviousCell
-    </button>
+  <div v-if="editor" class="container">
+    <div class="control-group">
+      <div class="button-group">
+        <button @click="editor.chain().focus().insertTable({ rows: 3, cols: 3, withHeaderRow: true }).run()">
+          Insert table
+        </button>
+        <button @click="editor.chain().focus().addColumnBefore().run()">
+          Add column before
+        </button>
+        <button @click="editor.chain().focus().addColumnAfter().run()">
+          Add column after
+        </button>
+        <button @click="editor.chain().focus().deleteColumn().run()">
+          Delete column
+        </button>
+        <button @click="editor.chain().focus().addRowBefore().run()">
+          Add row before
+        </button>
+        <button @click="editor.chain().focus().addRowAfter().run()">
+          Add row after
+        </button>
+        <button @click="editor.chain().focus().deleteRow().run()">
+          Delete row
+        </button>
+        <button @click="editor.chain().focus().deleteTable().run()">
+          Delete table
+        </button>
+        <button @click="editor.chain().focus().mergeCells().run()">
+          Merge cells
+        </button>
+        <button @click="editor.chain().focus().splitCell().run()">
+          Split cell
+        </button>
+        <button @click="editor.chain().focus().toggleHeaderColumn().run()">
+          Toggle header column
+        </button>
+        <button @click="editor.chain().focus().toggleHeaderRow().run()">
+          Toggle header row
+        </button>
+        <button @click="editor.chain().focus().toggleHeaderCell().run()">
+          Toggle header cell
+        </button>
+        <button @click="editor.chain().focus().mergeOrSplit().run()">
+          Merge or split
+        </button>
+        <button @click="editor.chain().focus().setCellAttribute('colspan', 2).run()">
+          Set cell attribute
+        </button>
+        <button @click="editor.chain().focus().fixTables().run()">
+          Fix tables
+        </button>
+        <button @click="editor.chain().focus().goToNextCell().run()">
+          Go to next cell
+        </button>
+        <button @click="editor.chain().focus().goToPreviousCell().run()">
+          Go to previous cell
+        </button>
+      </div>
+    </div>
     <editor-content :editor="editor" />
   </div>
 </template>
@@ -103,9 +107,9 @@ export default {
             </tr>
             <tr>
               <td>Cyndi Lauper</td>
-              <td>singer</td>
-              <td>songwriter</td>
-              <td>actress</td>
+              <td>Singer</td>
+              <td>Songwriter</td>
+              <td>Actress</td>
             </tr>
           </tbody>
         </table>
@@ -120,22 +124,28 @@ export default {
 </script>
 
 <style lang="scss">
+/* Basic editor styles */
 .tiptap {
+  :first-child {
+    margin-top: 0;
+  }
+
+  /* Table-specific styling */
   table {
     border-collapse: collapse;
-    table-layout: fixed;
-    width: 100%;
     margin: 0;
     overflow: hidden;
+    table-layout: fixed;
+    width: 100%;
 
     td,
     th {
-      min-width: 1em;
-      border: 2px solid #ced4da;
-      padding: 3px 5px;
-      vertical-align: top;
+      border: 1px solid var(--gray-3);
       box-sizing: border-box;
+      min-width: 1em;
+      padding: 6px 8px;
       position: relative;
+      vertical-align: top;
 
       > * {
         margin-bottom: 0;
@@ -143,43 +153,39 @@ export default {
     }
 
     th {
+      background-color: var(--gray-1);
       font-weight: bold;
       text-align: left;
-      background-color: #f1f3f5;
     }
 
     .selectedCell:after {
-      z-index: 2;
-      position: absolute;
+      background: var(--gray-2);
       content: "";
       left: 0; right: 0; top: 0; bottom: 0;
-      background: rgba(200, 200, 255, 0.4);
       pointer-events: none;
+      position: absolute;
+      z-index: 2;
     }
 
     .column-resize-handle {
+      background-color: var(--purple);
+      bottom: -2px;
+      pointer-events: none;
       position: absolute;
       right: -2px;
       top: 0;
-      bottom: -2px;
       width: 4px;
-      background-color: #adf;
-      pointer-events: none;
-    }
-
-    p {
-      margin: 0;
     }
   }
-}
 
-.tableWrapper {
-  padding: 1rem 0;
-  overflow-x: auto;
-}
+  .tableWrapper {
+    margin: 1.5rem 0;
+    overflow-x: auto;
+  }
 
-.resize-cursor {
-  cursor: ew-resize;
-  cursor: col-resize;
+  .resize-cursor {
+    cursor: ew-resize;
+    cursor: col-resize;
+  }
 }
 </style>
diff --git a/demos/src/Nodes/TaskItem/React/index.jsx b/demos/src/Nodes/TaskItem/React/index.jsx
index 6532f647a..2a4f2a423 100644
--- a/demos/src/Nodes/TaskItem/React/index.jsx
+++ b/demos/src/Nodes/TaskItem/React/index.jsx
@@ -33,30 +33,34 @@ export default () => {
 
   return (
     <>
-      <button
-        onClick={() => editor.chain().focus().toggleTaskList().run()}
-        className={editor.isActive('taskList') ? 'is-active' : ''}
-      >
-        toggleTaskList
-      </button>
-      <button
-        onClick={() => editor.chain().focus().splitListItem('taskItem').run()}
-        disabled={!editor.can().splitListItem('taskItem')}
-      >
-        splitListItem
-      </button>
-      <button
-        onClick={() => editor.chain().focus().sinkListItem('taskItem').run()}
-        disabled={!editor.can().sinkListItem('taskItem')}
-      >
-        sinkListItem
-      </button>
-      <button
-        onClick={() => editor.chain().focus().liftListItem('taskItem').run()}
-        disabled={!editor.can().liftListItem('taskItem')}
-      >
-        liftListItem
-      </button>
+      <div className="control-group">
+        <div className="button-group">
+          <button
+            onClick={() => editor.chain().focus().toggleTaskList().run()}
+            className={editor.isActive('taskList') ? 'is-active' : ''}
+          >
+            Toggle task list
+          </button>
+          <button
+            onClick={() => editor.chain().focus().splitListItem('taskItem').run()}
+            disabled={!editor.can().splitListItem('taskItem')}
+          >
+            Split list item
+          </button>
+          <button
+            onClick={() => editor.chain().focus().sinkListItem('taskItem').run()}
+            disabled={!editor.can().sinkListItem('taskItem')}
+          >
+            Sink list item
+          </button>
+          <button
+            onClick={() => editor.chain().focus().liftListItem('taskItem').run()}
+            disabled={!editor.can().liftListItem('taskItem')}
+          >
+            Lift list item
+          </button>
+        </div>
+      </div>
 
       <EditorContent editor={editor} />
     </>
diff --git a/demos/src/Nodes/TaskItem/React/styles.scss b/demos/src/Nodes/TaskItem/React/styles.scss
index d8fa6d10e..225fc6a81 100644
--- a/demos/src/Nodes/TaskItem/React/styles.scss
+++ b/demos/src/Nodes/TaskItem/React/styles.scss
@@ -1,31 +1,48 @@
-ul[data-type="taskList"] {
-  list-style: none;
-  padding: 0;
-
-  p {
-    margin: 0;
+/* Basic editor styles */
+.tiptap {
+  :first-child {
+    margin-top: 0;
   }
 
-  li {
-    display: flex;
+  /* List styles */
+  ul,
+  ol {
+    padding: 0 1rem;
+    margin: 1.25rem 1rem 1.25rem 0.4rem;
 
-    > label {
-      flex: 0 0 auto;
-      margin-right: 0.5rem;
-      user-select: none;
+    li p {
+      margin-top: 0.25em;
+      margin-bottom: 0.25em;
     }
+  }
 
-    > div {
-      flex: 1 1 auto;
-    }
-    
-    ul li,
-    ol li {
-      display: list-item;
-    }
+  /* Task list specific styles */
+  ul[data-type="taskList"] {
+    list-style: none;
+    margin-left: 0;
+    padding: 0;
 
-    ul[data-type="taskList"] > li {
+    li {
+      align-items: flex-start;
       display: flex;
+
+      > label {
+        flex: 0 0 auto;
+        margin-right: 0.5rem;
+        user-select: none;
+      }
+
+      > div {
+        flex: 1 1 auto;
+      }
+    }
+
+    input[type="checkbox"] {
+      cursor: pointer;
+    }
+
+    ul[data-type="taskList"] {
+      margin: 0;
     }
   }
 }
diff --git a/demos/src/Nodes/TaskItem/Vue/index.vue b/demos/src/Nodes/TaskItem/Vue/index.vue
index 7a0e0517e..3db13193d 100644
--- a/demos/src/Nodes/TaskItem/Vue/index.vue
+++ b/demos/src/Nodes/TaskItem/Vue/index.vue
@@ -1,18 +1,21 @@
 <template>
-  <div v-if="editor">
-    <button @click="editor.chain().focus().toggleTaskList().run()" :class="{ 'is-active': editor.isActive('taskList') }">
-      toggleTaskList
-    </button>
-    <button @click="editor.chain().focus().splitListItem('taskItem').run()" :disabled="!editor.can().splitListItem('taskItem')">
-      splitListItem
-    </button>
-    <button @click="editor.chain().focus().sinkListItem('taskItem').run()" :disabled="!editor.can().sinkListItem('taskItem')">
-      sinkListItem
-    </button>
-    <button @click="editor.chain().focus().liftListItem('taskItem').run()" :disabled="!editor.can().liftListItem('taskItem')">
-      liftListItem
-    </button>
-
+  <div v-if="editor" class="container">
+    <div class="control-group">
+      <div class="button-group">
+        <button @click="editor.chain().focus().toggleTaskList().run()" :class="{ 'is-active': editor.isActive('taskList') }">
+          Toggle task list
+        </button>
+        <button @click="editor.chain().focus().splitListItem('taskItem').run()" :disabled="!editor.can().splitListItem('taskItem')">
+          Split list item
+        </button>
+        <button @click="editor.chain().focus().sinkListItem('taskItem').run()" :disabled="!editor.can().sinkListItem('taskItem')">
+          Sink list item
+        </button>
+        <button @click="editor.chain().focus().liftListItem('taskItem').run()" :disabled="!editor.can().liftListItem('taskItem')">
+          Lift list item
+        </button>
+      </div>
+    </div>
     <editor-content :editor="editor" />
   </div>
 </template>
@@ -63,34 +66,51 @@ export default {
 </script>
 
 <style lang="scss">
-ul[data-type="taskList"] {
-  list-style: none;
-  padding: 0;
-
-  p {
-    margin: 0;
+/* Basic editor styles */
+.tiptap {
+  :first-child {
+    margin-top: 0;
   }
 
-  li {
-    display: flex;
+  /* List styles */
+  ul,
+  ol {
+    padding: 0 1rem;
+    margin: 1.25rem 1rem 1.25rem 0.4rem;
 
-    > label {
-      flex: 0 0 auto;
-      margin-right: 0.5rem;
-      user-select: none;
+    li p {
+      margin-top: 0.25em;
+      margin-bottom: 0.25em;
     }
+  }
 
-    > div {
-      flex: 1 1 auto;
-    }
+  /* Task list specific styles */
+  ul[data-type="taskList"] {
+    list-style: none;
+    margin-left: 0;
+    padding: 0;
 
-    ul li,
-    ol li {
-      display: list-item;
-    }
-
-    ul[data-type="taskList"] > li {
+    li {
+      align-items: flex-start;
       display: flex;
+
+      > label {
+        flex: 0 0 auto;
+        margin-right: 0.5rem;
+        user-select: none;
+      }
+
+      > div {
+        flex: 1 1 auto;
+      }
+    }
+
+    input[type="checkbox"] {
+      cursor: pointer;
+    }
+
+    ul[data-type="taskList"] {
+      margin: 0;
     }
   }
 }
diff --git a/demos/src/Nodes/TaskList/React/index.jsx b/demos/src/Nodes/TaskList/React/index.jsx
index 6532f647a..2a4f2a423 100644
--- a/demos/src/Nodes/TaskList/React/index.jsx
+++ b/demos/src/Nodes/TaskList/React/index.jsx
@@ -33,30 +33,34 @@ export default () => {
 
   return (
     <>
-      <button
-        onClick={() => editor.chain().focus().toggleTaskList().run()}
-        className={editor.isActive('taskList') ? 'is-active' : ''}
-      >
-        toggleTaskList
-      </button>
-      <button
-        onClick={() => editor.chain().focus().splitListItem('taskItem').run()}
-        disabled={!editor.can().splitListItem('taskItem')}
-      >
-        splitListItem
-      </button>
-      <button
-        onClick={() => editor.chain().focus().sinkListItem('taskItem').run()}
-        disabled={!editor.can().sinkListItem('taskItem')}
-      >
-        sinkListItem
-      </button>
-      <button
-        onClick={() => editor.chain().focus().liftListItem('taskItem').run()}
-        disabled={!editor.can().liftListItem('taskItem')}
-      >
-        liftListItem
-      </button>
+      <div className="control-group">
+        <div className="button-group">
+          <button
+            onClick={() => editor.chain().focus().toggleTaskList().run()}
+            className={editor.isActive('taskList') ? 'is-active' : ''}
+          >
+            Toggle task list
+          </button>
+          <button
+            onClick={() => editor.chain().focus().splitListItem('taskItem').run()}
+            disabled={!editor.can().splitListItem('taskItem')}
+          >
+            Split list item
+          </button>
+          <button
+            onClick={() => editor.chain().focus().sinkListItem('taskItem').run()}
+            disabled={!editor.can().sinkListItem('taskItem')}
+          >
+            Sink list item
+          </button>
+          <button
+            onClick={() => editor.chain().focus().liftListItem('taskItem').run()}
+            disabled={!editor.can().liftListItem('taskItem')}
+          >
+            Lift list item
+          </button>
+        </div>
+      </div>
 
       <EditorContent editor={editor} />
     </>
diff --git a/demos/src/Nodes/TaskList/React/styles.scss b/demos/src/Nodes/TaskList/React/styles.scss
index 694e786bf..225fc6a81 100644
--- a/demos/src/Nodes/TaskList/React/styles.scss
+++ b/demos/src/Nodes/TaskList/React/styles.scss
@@ -1,31 +1,48 @@
-ul[data-type="taskList"] {
-  list-style: none;
-  padding: 0;
-
-  p {
-    margin: 0;
+/* Basic editor styles */
+.tiptap {
+  :first-child {
+    margin-top: 0;
   }
 
-  li {
-    display: flex;
+  /* List styles */
+  ul,
+  ol {
+    padding: 0 1rem;
+    margin: 1.25rem 1rem 1.25rem 0.4rem;
 
-    > label {
-      flex: 0 0 auto;
-      margin-right: 0.5rem;
-      user-select: none;
+    li p {
+      margin-top: 0.25em;
+      margin-bottom: 0.25em;
+    }
+  }
+
+  /* Task list specific styles */
+  ul[data-type="taskList"] {
+    list-style: none;
+    margin-left: 0;
+    padding: 0;
+
+    li {
+      align-items: flex-start;
+      display: flex;
+
+      > label {
+        flex: 0 0 auto;
+        margin-right: 0.5rem;
+        user-select: none;
+      }
+
+      > div {
+        flex: 1 1 auto;
+      }
     }
 
-    > div {
-      flex: 1 1 auto;
+    input[type="checkbox"] {
+      cursor: pointer;
     }
 
-    ul li,
-    ol li {
-    	display: list-item;
-    }
-    
-    ul[data-type="taskList"] > li {
-    	display: flex;
+    ul[data-type="taskList"] {
+      margin: 0;
     }
   }
 }
diff --git a/demos/src/Nodes/TaskList/Vue/index.vue b/demos/src/Nodes/TaskList/Vue/index.vue
index 7a0e0517e..3db13193d 100644
--- a/demos/src/Nodes/TaskList/Vue/index.vue
+++ b/demos/src/Nodes/TaskList/Vue/index.vue
@@ -1,18 +1,21 @@
 <template>
-  <div v-if="editor">
-    <button @click="editor.chain().focus().toggleTaskList().run()" :class="{ 'is-active': editor.isActive('taskList') }">
-      toggleTaskList
-    </button>
-    <button @click="editor.chain().focus().splitListItem('taskItem').run()" :disabled="!editor.can().splitListItem('taskItem')">
-      splitListItem
-    </button>
-    <button @click="editor.chain().focus().sinkListItem('taskItem').run()" :disabled="!editor.can().sinkListItem('taskItem')">
-      sinkListItem
-    </button>
-    <button @click="editor.chain().focus().liftListItem('taskItem').run()" :disabled="!editor.can().liftListItem('taskItem')">
-      liftListItem
-    </button>
-
+  <div v-if="editor" class="container">
+    <div class="control-group">
+      <div class="button-group">
+        <button @click="editor.chain().focus().toggleTaskList().run()" :class="{ 'is-active': editor.isActive('taskList') }">
+          Toggle task list
+        </button>
+        <button @click="editor.chain().focus().splitListItem('taskItem').run()" :disabled="!editor.can().splitListItem('taskItem')">
+          Split list item
+        </button>
+        <button @click="editor.chain().focus().sinkListItem('taskItem').run()" :disabled="!editor.can().sinkListItem('taskItem')">
+          Sink list item
+        </button>
+        <button @click="editor.chain().focus().liftListItem('taskItem').run()" :disabled="!editor.can().liftListItem('taskItem')">
+          Lift list item
+        </button>
+      </div>
+    </div>
     <editor-content :editor="editor" />
   </div>
 </template>
@@ -63,34 +66,51 @@ export default {
 </script>
 
 <style lang="scss">
-ul[data-type="taskList"] {
-  list-style: none;
-  padding: 0;
-
-  p {
-    margin: 0;
+/* Basic editor styles */
+.tiptap {
+  :first-child {
+    margin-top: 0;
   }
 
-  li {
-    display: flex;
+  /* List styles */
+  ul,
+  ol {
+    padding: 0 1rem;
+    margin: 1.25rem 1rem 1.25rem 0.4rem;
 
-    > label {
-      flex: 0 0 auto;
-      margin-right: 0.5rem;
-      user-select: none;
+    li p {
+      margin-top: 0.25em;
+      margin-bottom: 0.25em;
     }
+  }
 
-    > div {
-      flex: 1 1 auto;
-    }
+  /* Task list specific styles */
+  ul[data-type="taskList"] {
+    list-style: none;
+    margin-left: 0;
+    padding: 0;
 
-    ul li,
-    ol li {
-      display: list-item;
-    }
-
-    ul[data-type="taskList"] > li {
+    li {
+      align-items: flex-start;
       display: flex;
+
+      > label {
+        flex: 0 0 auto;
+        margin-right: 0.5rem;
+        user-select: none;
+      }
+
+      > div {
+        flex: 1 1 auto;
+      }
+    }
+
+    input[type="checkbox"] {
+      cursor: pointer;
+    }
+
+    ul[data-type="taskList"] {
+      margin: 0;
     }
   }
 }
diff --git a/demos/src/Nodes/Text/React/index.jsx b/demos/src/Nodes/Text/React/index.jsx
index 3f3d40c97..ad53c71db 100644
--- a/demos/src/Nodes/Text/React/index.jsx
+++ b/demos/src/Nodes/Text/React/index.jsx
@@ -1,3 +1,5 @@
+import './styles.scss'
+
 import Document from '@tiptap/extension-document'
 import Paragraph from '@tiptap/extension-paragraph'
 import Text from '@tiptap/extension-text'
diff --git a/demos/src/Nodes/Text/React/styles.scss b/demos/src/Nodes/Text/React/styles.scss
new file mode 100644
index 000000000..afd5ba214
--- /dev/null
+++ b/demos/src/Nodes/Text/React/styles.scss
@@ -0,0 +1,6 @@
+/* Basic editor styles */
+.tiptap {
+  :first-child {
+    margin-top: 0;
+  }
+}
diff --git a/demos/src/Nodes/Text/Vue/index.vue b/demos/src/Nodes/Text/Vue/index.vue
index e0eaf2c6e..f83044915 100644
--- a/demos/src/Nodes/Text/Vue/index.vue
+++ b/demos/src/Nodes/Text/Vue/index.vue
@@ -39,3 +39,12 @@ export default {
   },
 }
 </script>
+
+<style lang="scss">
+/* Basic editor styles */
+.tiptap {
+  :first-child {
+    margin-top: 0;
+  }
+}
+</style>
diff --git a/demos/src/Nodes/Youtube/React/index.jsx b/demos/src/Nodes/Youtube/React/index.jsx
index e6d40b36a..f6bd4e962 100644
--- a/demos/src/Nodes/Youtube/React/index.jsx
+++ b/demos/src/Nodes/Youtube/React/index.jsx
@@ -1,20 +1,15 @@
 import './styles.scss'
 
+import Document from '@tiptap/extension-document'
+import Paragraph from '@tiptap/extension-paragraph'
+import Text from '@tiptap/extension-text'
 import Youtube from '@tiptap/extension-youtube'
 import { EditorContent, useEditor } from '@tiptap/react'
-import StarterKit from '@tiptap/starter-kit'
 import React from 'react'
 
 const MenuBar = ({ editor }) => {
-  const widthRef = React.useRef(null)
-  const heightRef = React.useRef(null)
-
-  React.useEffect(() => {
-    if (widthRef.current && heightRef.current) {
-      widthRef.current.value = 640
-      heightRef.current.value = 480
-    }
-  }, [widthRef.current, heightRef.current])
+  const [height, setHeight] = React.useState(480)
+  const [width, setWidth] = React.useState(640)
 
   if (!editor) {
     return null
@@ -26,25 +21,45 @@ const MenuBar = ({ editor }) => {
     if (url) {
       editor.commands.setYoutubeVideo({
         src: url,
-        width: Math.max(320, parseInt(widthRef.current.value, 10)) || 640,
-        height: Math.max(180, parseInt(heightRef.current.value, 10)) || 480,
+        width: Math.max(320, parseInt(width, 10)) || 640,
+        height: Math.max(180, parseInt(height, 10)) || 480,
       })
     }
   }
 
   return (
-    <>
-      <button id="add" onClick={addYoutubeVideo}>Add YouTube video</button>
-      <input id="width" type="number" min="320" max="1024" ref={widthRef} placeholder="width" />
-      <input id="height" type="number" min="180" max="720" ref={heightRef} placeholder="height" />
-    </>
+    <div className="control-group">
+      <div className="button-group">
+        <input
+          id="width"
+          type="number"
+          min="320"
+          max="1024"
+          placeholder="width"
+          value={width}
+          onChange={event => setWidth(event.target.value)}
+        />
+        <input
+          id="height"
+          type="number"
+          min="180"
+          max="720"
+          placeholder="height"
+          value={height}
+          onChange={event => setHeight(event.target.value)}
+        />
+        <button id="add" onClick={addYoutubeVideo}>Add YouTube video</button>
+      </div>
+    </div>
   )
 }
 
 export default () => {
   const editor = useEditor({
     extensions: [
-      StarterKit,
+      Document,
+      Paragraph,
+      Text,
       Youtube.configure({
         controls: false,
         nocookie: true,
@@ -65,9 +80,9 @@ export default () => {
   })
 
   return (
-    <div>
+    <>
       <MenuBar editor={editor} />
       <EditorContent editor={editor} />
-    </div>
+    </>
   )
 }
diff --git a/demos/src/Nodes/Youtube/React/styles.scss b/demos/src/Nodes/Youtube/React/styles.scss
index d1805b3a6..e1258eafd 100644
--- a/demos/src/Nodes/Youtube/React/styles.scss
+++ b/demos/src/Nodes/Youtube/React/styles.scss
@@ -1,73 +1,25 @@
 /* Basic editor styles */
 .tiptap {
-  > * + * {
-    margin-top: 0.75em;
-  }
-
-  ul,
-  ol {
-    padding: 0 1rem;
-  }
-
-  h1,
-  h2,
-  h3,
-  h4,
-  h5,
-  h6 {
-    line-height: 1.1;
-  }
-
-  code {
-    background-color: rgba(#616161, 0.1);
-    color: #616161;
-  }
-
-  pre {
-    background: #0D0D0D;
-    color: #FFF;
-    font-family: 'JetBrainsMono', monospace;
-    padding: 0.75rem 1rem;
-    border-radius: 0.5rem;
-
-    code {
-      color: inherit;
-      padding: 0;
-      background: none;
-      font-size: 0.8rem;
-    }
-  }
-
-  img {
-    max-width: 100%;
-    height: auto;
-  }
-
-  hr {
-    margin: 1rem 0;
-  }
-
-  blockquote {
-    padding-left: 1rem;
-    border-left: 2px solid rgba(#0D0D0D, 0.1);
-  }
-
-  iframe {
-    border: 8px solid #000;
-    border-radius: 4px;
-    min-width: 200px;
-    min-height: 200px;
-    display: block;
-    outline: 0px solid transparent;
+  :first-child {
+    margin-top: 0;
   }
 
+  /* Youtube embed */
   div[data-youtube-video] {
     cursor: move;
-    padding-right: 24px;
-  }
+    padding-right: 1.5rem;
 
-  .ProseMirror-selectednode iframe {
-    transition: outline 0.15s;
-    outline: 6px solid #ece111;
+    iframe {
+      border: 0.5rem solid var(--black-contrast);
+      display: block;
+      min-height: 200px;
+      min-width: 200px;
+      outline: 0px solid transparent;
+    }
+
+    &.ProseMirror-selectednode iframe {
+      outline: 3px solid var(--purple);
+      transition: outline 0.15s;
+    }
   }
 }
diff --git a/demos/src/Nodes/Youtube/Vue/index.vue b/demos/src/Nodes/Youtube/Vue/index.vue
index bec11a7b9..e7b146292 100644
--- a/demos/src/Nodes/Youtube/Vue/index.vue
+++ b/demos/src/Nodes/Youtube/Vue/index.vue
@@ -1,33 +1,37 @@
 <template>
-  <div>
-    <div v-if="editor">
-      <button id="add" @click="addVideo">
-        Add YouTube video
-      </button>
-      <input
-        id="width"
-        type="number"
-        v-model="width"
-        placeholder="width"
-        min="320"
-        max="1024"
-      >
-      <input
-        id="height"
-        type="number"
-        v-model="height"
-        placeholder="height"
-        min="180"
-        max="720"
-      >
-      <editor-content class="editor-1" :editor="editor" />
+  <div v-if="editor" class="container">
+    <div class="control-group">
+      <div class="button-group">
+        <input
+          id="width"
+          type="number"
+          v-model="width"
+          placeholder="width"
+          min="320"
+          max="1024"
+        >
+        <input
+          id="height"
+          type="number"
+          v-model="height"
+          placeholder="height"
+          min="180"
+          max="720"
+        >
+        <button id="add" @click="addVideo">
+          Add YouTube video
+        </button>
+      </div>
     </div>
+    <editor-content :editor="editor" />
   </div>
 </template>
 
 <script>
+import Document from '@tiptap/extension-document'
+import Paragraph from '@tiptap/extension-paragraph'
+import Text from '@tiptap/extension-text'
 import Youtube from '@tiptap/extension-youtube'
-import StarterKit from '@tiptap/starter-kit'
 import { Editor, EditorContent } from '@tiptap/vue-3'
 
 export default {
@@ -46,7 +50,9 @@ export default {
   mounted() {
     this.editor = new Editor({
       extensions: [
-        StarterKit,
+        Document,
+        Paragraph,
+        Text,
         Youtube.configure({
           controls: false,
           nocookie: true,
@@ -88,76 +94,27 @@ export default {
 <style lang="scss">
 /* Basic editor styles */
 .tiptap {
-  > * + * {
-    margin-top: 0.75em;
-  }
-
-  ul,
-  ol {
-    padding: 0 1rem;
-  }
-
-  h1,
-  h2,
-  h3,
-  h4,
-  h5,
-  h6 {
-    line-height: 1.1;
-  }
-
-  code {
-    background-color: rgba(#616161, 0.1);
-    color: #616161;
-  }
-
-  pre {
-    background: #0D0D0D;
-    color: #FFF;
-    font-family: 'JetBrainsMono', monospace;
-    padding: 0.75rem 1rem;
-    border-radius: 0.5rem;
-
-    code {
-      color: inherit;
-      padding: 0;
-      background: none;
-      font-size: 0.8rem;
-    }
-  }
-
-  img {
-    max-width: 100%;
-    height: auto;
-  }
-
-  hr {
-    margin: 1rem 0;
-  }
-
-  blockquote {
-    padding-left: 1rem;
-    border-left: 2px solid rgba(#0D0D0D, 0.1);
-  }
-
-  iframe {
-    border: 8px solid #000;
-    border-radius: 4px;
-    min-width: 200px;
-    min-height: 200px;
-    display: block;
-    outline: 0px solid transparent;
+  :first-child {
+    margin-top: 0;
   }
 
+  /* Youtube embed */
   div[data-youtube-video] {
     cursor: move;
-    padding-right: 24px;
-  }
+    padding-right: 1.5rem;
 
-  .ProseMirror-selectednode iframe {
-    transition: outline 0.15s;
-    outline: 6px solid #ece111;
+    iframe {
+      border: 0.5rem solid var(--black-contrast);
+      display: block;
+      min-height: 200px;
+      min-width: 200px;
+      outline: 0px solid transparent;
+    }
+
+    &.ProseMirror-selectednode iframe {
+      outline: 3px solid var(--purple);
+      transition: outline 0.15s;
+    }
   }
 }
-
 </style>
diff --git a/demos/src/Overview/Installation/Vue/index.vue b/demos/src/Overview/Installation/Vue/index.vue
index 2cc117a5a..997a864d2 100644
--- a/demos/src/Overview/Installation/Vue/index.vue
+++ b/demos/src/Overview/Installation/Vue/index.vue
@@ -31,3 +31,97 @@ export default {
   },
 }
 </script>
+
+<style lang="scss">
+/* Basic editor styles */
+.tiptap {
+  :first-child {
+    margin-top: 0;
+  }
+
+  /* List styles */
+  ul,
+  ol {
+    padding: 0 1rem;
+    margin: 1.25rem 1rem 1.25rem 0.4rem;
+
+    li p {
+      margin-top: 0.25em;
+      margin-bottom: 0.25em;
+    }
+  }
+
+  /* Heading styles */
+  h1,
+  h2,
+  h3,
+  h4,
+  h5,
+  h6 {
+    line-height: 1.1;
+    margin-top: 2.5rem;
+    text-wrap: pretty;
+  }
+
+  h1,
+  h2 {
+    margin-top: 3.5rem;
+    margin-bottom: 1.5rem;
+  }
+
+  h1 {
+    font-size: 1.4rem;
+  }
+
+  h2 {
+    font-size: 1.2rem;
+  }
+
+  h3 {
+    font-size: 1.1rem;
+  }
+
+  h4,
+  h5,
+  h6 {
+    font-size: 1rem;
+  }
+
+  /* Code and preformatted text styles */
+  code {
+    background-color: var(--purple-light);
+    border-radius: 0.4rem;
+    color: var(--black);
+    font-size: 0.85rem;
+    padding: 0.25em 0.3em;
+  }
+
+  pre {
+    background: var(--black);
+    border-radius: 0.5rem;
+    color: var(--white);
+    font-family: 'JetBrainsMono', monospace;
+    margin: 1.5rem 0;
+    padding: 0.75rem 1rem;
+
+    code {
+      background: none;
+      color: inherit;
+      font-size: 0.8rem;
+      padding: 0;
+    }
+  }
+
+  blockquote {
+    border-left: 3px solid var(--gray-3);
+    margin: 1.5rem 0;
+    padding-left: 1rem;
+  }
+
+  hr {
+    border: none;
+    border-top: 1px solid var(--gray-2);
+    margin: 2rem 0;
+  }
+}
+</style>
diff --git a/demos/src/Tutorials/1-1-textarea/React/Note.tsx b/demos/src/Tutorials/1-1-textarea/React/Note.tsx
index 36481c84d..6bca53bd2 100644
--- a/demos/src/Tutorials/1-1-textarea/React/Note.tsx
+++ b/demos/src/Tutorials/1-1-textarea/React/Note.tsx
@@ -1,5 +1,3 @@
-import './styles.css'
-
 import React, { useState } from 'react'
 
 import { TNote } from './types.js'
@@ -8,8 +6,6 @@ export default ({ note }: { note: TNote }) => {
   const [modelValue, setModelValue] = useState(note.content)
 
   return (
-    <textarea onChange={e => setModelValue(e.target.value)} value={modelValue}
-              className="p-2 border border-black rounded-lg"
-    ></textarea>
+    <textarea onChange={e => setModelValue(e.target.value)} value={modelValue}></textarea>
   )
 }
diff --git a/demos/src/Tutorials/1-1-textarea/React/index.tsx b/demos/src/Tutorials/1-1-textarea/React/index.tsx
index 56aac5eea..f90613a0c 100644
--- a/demos/src/Tutorials/1-1-textarea/React/index.tsx
+++ b/demos/src/Tutorials/1-1-textarea/React/index.tsx
@@ -1,4 +1,4 @@
-import './styles.css'
+import './styles.scss'
 
 import React from 'react'
 
@@ -8,19 +8,18 @@ import { TNote } from './types.js'
 const notes: TNote[] = [
   {
     id: 'note-1',
-    content: 'some random note text',
+    content: 'Some random note text',
   },
   {
     id: 'note-2',
-    content: 'some really random note text',
+    content: 'Some really random note text',
   },
 ]
 
 export default () => {
-
   return (
-    <div>
+    <>
       {notes.map(note => <Note note={note} key={note.id}/>)}
-    </div>
+    </>
   )
 }
diff --git a/demos/src/Tutorials/1-1-textarea/React/styles.css b/demos/src/Tutorials/1-1-textarea/React/styles.css
deleted file mode 100644
index 76fcadcc0..000000000
--- a/demos/src/Tutorials/1-1-textarea/React/styles.css
+++ /dev/null
@@ -1,3 +0,0 @@
-@import "tailwindcss/base";
-@import "tailwindcss/components";
-@import "tailwindcss/utilities";
diff --git a/demos/src/Tutorials/1-1-textarea/React/styles.scss b/demos/src/Tutorials/1-1-textarea/React/styles.scss
new file mode 100644
index 000000000..a6e586fa8
--- /dev/null
+++ b/demos/src/Tutorials/1-1-textarea/React/styles.scss
@@ -0,0 +1,68 @@
+/* Demo styling */
+#app {
+  gap: 1rem;
+  padding: 1.5rem;
+}
+
+/* Textarea styling */
+textarea,
+.textarea {
+  border-radius: 0.5rem;
+  border: 1px solid var(--gray-3);
+  color: var(--black);
+  font-family: inherit;
+  font-size: 0.875rem;
+  font-weight: 500;
+  line-height: 1.15;
+	margin: 0;
+  padding: 0.375rem 0.625rem;
+  transition: all .2s cubic-bezier(0.65,0.05,0.36,1);
+
+  &:hover {
+    border-color: var(--gray-4);
+    color: var(--black-contrast);
+  }
+
+  &[disabled] {
+    background: var(--gray-1);
+    color: var(--gray-4);
+  }
+
+  &:checked {
+    accent-color: var(--purple);
+  }
+
+  &::placeholder {
+    color: var(--gray-4);
+  }
+
+  &:focus-visible, 
+  &:focus {
+    border-color: var(--purple);
+    outline: none;
+  }
+
+  &.primary {
+    background: var(--black);
+    color: var(--white);
+
+    &:hover {
+      background-color: var(--black-contrast);
+    }
+
+    &[disabled] {
+      background: var(--gray-1);
+      color: var(--gray-4);
+    }
+  }
+
+  &.is-active {
+    background: var(--purple);
+    color: var(--white);
+
+    &:hover {
+      background-color: var(--purple-contrast);
+      color: var(--white);
+    }
+  }
+}
diff --git a/demos/src/Tutorials/1-1-textarea/Vue/Note.vue b/demos/src/Tutorials/1-1-textarea/Vue/Note.vue
index 2fc9ef80d..82c4fba43 100644
--- a/demos/src/Tutorials/1-1-textarea/Vue/Note.vue
+++ b/demos/src/Tutorials/1-1-textarea/Vue/Note.vue
@@ -15,5 +15,5 @@ watch(props, () => modelValueProxy.value = props.note?.content, {
 </script>
 
 <template>
-  <textarea v-model="modelValueProxy" class="p-2 border border-black rounded-lg"></textarea>
+  <textarea v-model="modelValueProxy" />
 </template>
diff --git a/demos/src/Tutorials/1-1-textarea/Vue/index.vue b/demos/src/Tutorials/1-1-textarea/Vue/index.vue
index f92fc0c88..b6167c6cf 100644
--- a/demos/src/Tutorials/1-1-textarea/Vue/index.vue
+++ b/demos/src/Tutorials/1-1-textarea/Vue/index.vue
@@ -1,20 +1,18 @@
 <script setup lang="ts">
-import './styles.css'
+import './styles.scss'
 
 import Note from './Note.vue'
 import { TNote } from './types.js'
 
 const notes: TNote[] = [
-  { id: 'note-1', content: 'some random note text' },
-  { id: 'note-2', content: 'some really random note text' },
+  { id: 'note-1', content: 'Some random note text' },
+  { id: 'note-2', content: 'Some really random note text' },
 ]
 
 </script>
 
 <template>
-  <div class="p-3">
-    <div v-for="note in notes" :key="note.id">
-      <Note :note="note"/>
-    </div>
-  </div>
+  <template v-for="note in notes" :key="note.id">
+    <Note :note="note" />
+  </template>
 </template>
diff --git a/demos/src/Tutorials/1-1-textarea/Vue/styles.css b/demos/src/Tutorials/1-1-textarea/Vue/styles.css
deleted file mode 100644
index 76fcadcc0..000000000
--- a/demos/src/Tutorials/1-1-textarea/Vue/styles.css
+++ /dev/null
@@ -1,3 +0,0 @@
-@import "tailwindcss/base";
-@import "tailwindcss/components";
-@import "tailwindcss/utilities";
diff --git a/demos/src/Tutorials/1-1-textarea/Vue/styles.scss b/demos/src/Tutorials/1-1-textarea/Vue/styles.scss
new file mode 100644
index 000000000..a6e586fa8
--- /dev/null
+++ b/demos/src/Tutorials/1-1-textarea/Vue/styles.scss
@@ -0,0 +1,68 @@
+/* Demo styling */
+#app {
+  gap: 1rem;
+  padding: 1.5rem;
+}
+
+/* Textarea styling */
+textarea,
+.textarea {
+  border-radius: 0.5rem;
+  border: 1px solid var(--gray-3);
+  color: var(--black);
+  font-family: inherit;
+  font-size: 0.875rem;
+  font-weight: 500;
+  line-height: 1.15;
+	margin: 0;
+  padding: 0.375rem 0.625rem;
+  transition: all .2s cubic-bezier(0.65,0.05,0.36,1);
+
+  &:hover {
+    border-color: var(--gray-4);
+    color: var(--black-contrast);
+  }
+
+  &[disabled] {
+    background: var(--gray-1);
+    color: var(--gray-4);
+  }
+
+  &:checked {
+    accent-color: var(--purple);
+  }
+
+  &::placeholder {
+    color: var(--gray-4);
+  }
+
+  &:focus-visible, 
+  &:focus {
+    border-color: var(--purple);
+    outline: none;
+  }
+
+  &.primary {
+    background: var(--black);
+    color: var(--white);
+
+    &:hover {
+      background-color: var(--black-contrast);
+    }
+
+    &[disabled] {
+      background: var(--gray-1);
+      color: var(--gray-4);
+    }
+  }
+
+  &.is-active {
+    background: var(--purple);
+    color: var(--white);
+
+    &:hover {
+      background-color: var(--purple-contrast);
+      color: var(--white);
+    }
+  }
+}
diff --git a/demos/src/Tutorials/1-2-tiptap/React/Note.tsx b/demos/src/Tutorials/1-2-tiptap/React/Note.tsx
index 7c7c726aa..acaecf632 100644
--- a/demos/src/Tutorials/1-2-tiptap/React/Note.tsx
+++ b/demos/src/Tutorials/1-2-tiptap/React/Note.tsx
@@ -1,5 +1,3 @@
-import './styles.css'
-
 import { EditorContent, useEditor } from '@tiptap/react'
 import { StarterKit } from '@tiptap/starter-kit'
 import React, { useState } from 'react'
@@ -13,7 +11,7 @@ export default ({ note }: { note: TNote }) => {
     content: modelValue,
     editorProps: {
       attributes: {
-        class: 'm-2 p-2 border border-black rounded-lg',
+        class: 'textarea',
       },
     },
     onUpdate() {
diff --git a/demos/src/Tutorials/1-2-tiptap/React/index.tsx b/demos/src/Tutorials/1-2-tiptap/React/index.tsx
index 56aac5eea..f90613a0c 100644
--- a/demos/src/Tutorials/1-2-tiptap/React/index.tsx
+++ b/demos/src/Tutorials/1-2-tiptap/React/index.tsx
@@ -1,4 +1,4 @@
-import './styles.css'
+import './styles.scss'
 
 import React from 'react'
 
@@ -8,19 +8,18 @@ import { TNote } from './types.js'
 const notes: TNote[] = [
   {
     id: 'note-1',
-    content: 'some random note text',
+    content: 'Some random note text',
   },
   {
     id: 'note-2',
-    content: 'some really random note text',
+    content: 'Some really random note text',
   },
 ]
 
 export default () => {
-
   return (
-    <div>
+    <>
       {notes.map(note => <Note note={note} key={note.id}/>)}
-    </div>
+    </>
   )
 }
diff --git a/demos/src/Tutorials/1-2-tiptap/React/styles.css b/demos/src/Tutorials/1-2-tiptap/React/styles.css
deleted file mode 100644
index 76fcadcc0..000000000
--- a/demos/src/Tutorials/1-2-tiptap/React/styles.css
+++ /dev/null
@@ -1,3 +0,0 @@
-@import "tailwindcss/base";
-@import "tailwindcss/components";
-@import "tailwindcss/utilities";
diff --git a/demos/src/Tutorials/1-2-tiptap/React/styles.scss b/demos/src/Tutorials/1-2-tiptap/React/styles.scss
new file mode 100644
index 000000000..d2a9c19d1
--- /dev/null
+++ b/demos/src/Tutorials/1-2-tiptap/React/styles.scss
@@ -0,0 +1,160 @@
+/* Basic editor styles */
+.tiptap {
+  :first-child {
+    margin-top: 0;
+  }
+
+  /* List styles */
+  ul, 
+  ol {
+    padding: 0 1rem;
+    margin: 1.25rem 1rem 1.25rem 0.4rem;
+    
+    li p {
+      margin-top: 0.25em;
+      margin-bottom: 0.25em;
+    }
+  }
+
+  /* Heading styles */
+  h1, 
+  h2, 
+  h3, 
+  h4, 
+  h5, 
+  h6 {
+    line-height: 1.1;
+    margin-top: 2.5rem;
+    text-wrap: pretty;
+  }
+
+  h1, 
+  h2 {
+    margin-top: 3.5rem;
+    margin-bottom: 1.5rem;
+  }
+
+  h1 { 
+    font-size: 1.4rem; 
+  }
+
+  h2 { 
+    font-size: 1.2rem; 
+  }
+
+  h3 { 
+    font-size: 1.1rem; 
+  }
+
+  h4, 
+  h5, 
+  h6 { 
+    font-size: 1rem; 
+  }
+
+  /* Code and preformatted text styles */
+  code {
+    background-color: var(--purple-light);
+    border-radius: 0.4rem;
+    color: var(--black);
+    font-size: 0.85rem;
+    padding: 0.25em 0.3em;
+  }
+
+  pre {
+    background: var(--black);
+    border-radius: 0.5rem;
+    color: var(--white);
+    font-family: 'JetBrainsMono', monospace;
+    margin: 1.5rem 0;
+    padding: 0.75rem 1rem;
+
+    code {
+      background: none;
+      color: inherit;
+      font-size: 0.8rem;
+      padding: 0;
+    }
+  }
+
+  blockquote {
+    border-left: 3px solid var(--gray-3);
+    margin: 1.5rem 0;
+    padding-left: 1rem;
+  }
+
+  hr {
+    border: none;
+    border-top: 1px solid var(--gray-2);
+    margin: 2rem 0;
+  }
+}
+
+/* Demo styling */
+#app {
+  gap: 1rem;
+  padding: 1.5rem;
+}
+
+/* Textarea styling */
+textarea,
+.textarea {
+  border-radius: 0.5rem;
+  border: 1px solid var(--gray-3);
+  color: var(--black);
+  font-family: inherit;
+  font-size: 0.875rem;
+  font-weight: 500;
+  line-height: 1.15;
+  margin: 0;
+  padding: 0.375rem 0.625rem;
+  transition: all .2s cubic-bezier(0.65,0.05,0.36,1);
+
+  &:hover {
+    border-color: var(--gray-4);
+    color: var(--black-contrast);
+  }
+
+  &[disabled] {
+    background: var(--gray-1);
+    color: var(--gray-4);
+  }
+
+  &:checked {
+    accent-color: var(--purple);
+  }
+
+  &::placeholder {
+    color: var(--gray-4);
+  }
+
+  &:focus-visible, 
+  &:focus {
+    border-color: var(--purple);
+    outline: none;
+  }
+
+  &.primary {
+    background: var(--black);
+    color: var(--white);
+
+    &:hover {
+      background-color: var(--black-contrast);
+    }
+
+    &[disabled] {
+      background: var(--gray-1);
+      color: var(--gray-4);
+    }
+  }
+
+  &.is-active {
+    background: var(--purple);
+    color: var(--white);
+
+    &:hover {
+      background-color: var(--purple-contrast);
+      color: var(--white);
+    }
+  }
+}
diff --git a/demos/src/Tutorials/1-2-tiptap/Vue/Note.vue b/demos/src/Tutorials/1-2-tiptap/Vue/Note.vue
index d3e6580f3..5ae6c0c7d 100644
--- a/demos/src/Tutorials/1-2-tiptap/Vue/Note.vue
+++ b/demos/src/Tutorials/1-2-tiptap/Vue/Note.vue
@@ -16,7 +16,7 @@ const editor = useEditor({
   content: props.note.content,
   editorProps: {
     attributes: {
-      class: 'm-2 p-2 border border-black rounded-lg',
+      class: 'textarea',
     },
   },
   extensions: [
@@ -27,5 +27,5 @@ const editor = useEditor({
 </script>
 
 <template>
-  <editor-content :editor="editor"></editor-content>
+  <editor-content :editor="editor" />
 </template>
diff --git a/demos/src/Tutorials/1-2-tiptap/Vue/index.vue b/demos/src/Tutorials/1-2-tiptap/Vue/index.vue
index 15a4339f6..aed806f4b 100644
--- a/demos/src/Tutorials/1-2-tiptap/Vue/index.vue
+++ b/demos/src/Tutorials/1-2-tiptap/Vue/index.vue
@@ -1,19 +1,19 @@
 <script setup lang="ts">
 
-import './styles.css'
+import './styles.scss'
 
 import Note from './Note.vue'
 import { TNote } from './types.js'
 
 const notes: TNote[] = [
-  { id: 'note-1', content: 'some random note text' },
-  { id: 'note-2', content: 'some really random note text' },
+  { id: 'note-1', content: 'Some random note text' },
+  { id: 'note-2', content: 'Some really random note text' },
 ]
 
 </script>
 
 <template>
-  <div v-for="note in notes" :key="note.id">
-    <Note :note="note"/>
-  </div>
+  <template v-for="note in notes" :key="note.id">
+    <Note :note="note" />
+  </template>
 </template>
diff --git a/demos/src/Tutorials/1-2-tiptap/Vue/styles.css b/demos/src/Tutorials/1-2-tiptap/Vue/styles.css
deleted file mode 100644
index 76fcadcc0..000000000
--- a/demos/src/Tutorials/1-2-tiptap/Vue/styles.css
+++ /dev/null
@@ -1,3 +0,0 @@
-@import "tailwindcss/base";
-@import "tailwindcss/components";
-@import "tailwindcss/utilities";
diff --git a/demos/src/Tutorials/1-2-tiptap/Vue/styles.scss b/demos/src/Tutorials/1-2-tiptap/Vue/styles.scss
new file mode 100644
index 000000000..d2a9c19d1
--- /dev/null
+++ b/demos/src/Tutorials/1-2-tiptap/Vue/styles.scss
@@ -0,0 +1,160 @@
+/* Basic editor styles */
+.tiptap {
+  :first-child {
+    margin-top: 0;
+  }
+
+  /* List styles */
+  ul, 
+  ol {
+    padding: 0 1rem;
+    margin: 1.25rem 1rem 1.25rem 0.4rem;
+    
+    li p {
+      margin-top: 0.25em;
+      margin-bottom: 0.25em;
+    }
+  }
+
+  /* Heading styles */
+  h1, 
+  h2, 
+  h3, 
+  h4, 
+  h5, 
+  h6 {
+    line-height: 1.1;
+    margin-top: 2.5rem;
+    text-wrap: pretty;
+  }
+
+  h1, 
+  h2 {
+    margin-top: 3.5rem;
+    margin-bottom: 1.5rem;
+  }
+
+  h1 { 
+    font-size: 1.4rem; 
+  }
+
+  h2 { 
+    font-size: 1.2rem; 
+  }
+
+  h3 { 
+    font-size: 1.1rem; 
+  }
+
+  h4, 
+  h5, 
+  h6 { 
+    font-size: 1rem; 
+  }
+
+  /* Code and preformatted text styles */
+  code {
+    background-color: var(--purple-light);
+    border-radius: 0.4rem;
+    color: var(--black);
+    font-size: 0.85rem;
+    padding: 0.25em 0.3em;
+  }
+
+  pre {
+    background: var(--black);
+    border-radius: 0.5rem;
+    color: var(--white);
+    font-family: 'JetBrainsMono', monospace;
+    margin: 1.5rem 0;
+    padding: 0.75rem 1rem;
+
+    code {
+      background: none;
+      color: inherit;
+      font-size: 0.8rem;
+      padding: 0;
+    }
+  }
+
+  blockquote {
+    border-left: 3px solid var(--gray-3);
+    margin: 1.5rem 0;
+    padding-left: 1rem;
+  }
+
+  hr {
+    border: none;
+    border-top: 1px solid var(--gray-2);
+    margin: 2rem 0;
+  }
+}
+
+/* Demo styling */
+#app {
+  gap: 1rem;
+  padding: 1.5rem;
+}
+
+/* Textarea styling */
+textarea,
+.textarea {
+  border-radius: 0.5rem;
+  border: 1px solid var(--gray-3);
+  color: var(--black);
+  font-family: inherit;
+  font-size: 0.875rem;
+  font-weight: 500;
+  line-height: 1.15;
+  margin: 0;
+  padding: 0.375rem 0.625rem;
+  transition: all .2s cubic-bezier(0.65,0.05,0.36,1);
+
+  &:hover {
+    border-color: var(--gray-4);
+    color: var(--black-contrast);
+  }
+
+  &[disabled] {
+    background: var(--gray-1);
+    color: var(--gray-4);
+  }
+
+  &:checked {
+    accent-color: var(--purple);
+  }
+
+  &::placeholder {
+    color: var(--gray-4);
+  }
+
+  &:focus-visible, 
+  &:focus {
+    border-color: var(--purple);
+    outline: none;
+  }
+
+  &.primary {
+    background: var(--black);
+    color: var(--white);
+
+    &:hover {
+      background-color: var(--black-contrast);
+    }
+
+    &[disabled] {
+      background: var(--gray-1);
+      color: var(--gray-4);
+    }
+  }
+
+  &.is-active {
+    background: var(--purple);
+    color: var(--white);
+
+    &:hover {
+      background-color: var(--purple-contrast);
+      color: var(--white);
+    }
+  }
+}
diff --git a/demos/src/Tutorials/1-2-tiptap_lexical/Lexical-React/index.tsx b/demos/src/Tutorials/1-2-tiptap_lexical/Lexical-React/index.tsx
index 56aac5eea..c0c5babba 100644
--- a/demos/src/Tutorials/1-2-tiptap_lexical/Lexical-React/index.tsx
+++ b/demos/src/Tutorials/1-2-tiptap_lexical/Lexical-React/index.tsx
@@ -17,10 +17,9 @@ const notes: TNote[] = [
 ]
 
 export default () => {
-
   return (
-    <div>
+    <>
       {notes.map(note => <Note note={note} key={note.id}/>)}
-    </div>
+    </>
   )
 }
diff --git a/demos/src/Tutorials/1-3-yjs/React/Note.tsx b/demos/src/Tutorials/1-3-yjs/React/Note.tsx
index ab52d2818..573f6fb26 100644
--- a/demos/src/Tutorials/1-3-yjs/React/Note.tsx
+++ b/demos/src/Tutorials/1-3-yjs/React/Note.tsx
@@ -1,5 +1,3 @@
-import './styles.css'
-
 import { Collaboration } from '@tiptap/extension-collaboration'
 import { EditorContent, useEditor } from '@tiptap/react'
 import { StarterKit } from '@tiptap/starter-kit'
@@ -15,7 +13,7 @@ export default ({ note }: { note: TNote }) => {
     content: note.defaultContent,
     editorProps: {
       attributes: {
-        class: 'm-2 p-2 border border-black rounded-lg',
+        class: 'textarea',
       },
     },
     extensions: [
diff --git a/demos/src/Tutorials/1-3-yjs/React/index.tsx b/demos/src/Tutorials/1-3-yjs/React/index.tsx
index c3dc344a6..7d323f864 100644
--- a/demos/src/Tutorials/1-3-yjs/React/index.tsx
+++ b/demos/src/Tutorials/1-3-yjs/React/index.tsx
@@ -1,4 +1,4 @@
-import './styles.css'
+import './styles.scss'
 
 import React from 'react'
 
@@ -8,19 +8,18 @@ import { TNote } from './types.js'
 const notes: TNote[] = [
   {
     id: 'note-1',
-    defaultContent: 'some random note text',
+    defaultContent: 'Some random note text',
   },
   {
     id: 'note-2',
-    defaultContent: 'some really random note text',
+    defaultContent: 'Some really random note text',
   },
 ]
 
 export default () => {
-
   return (
-    <div>
+    <>
       {notes.map(note => <Note note={note} key={note.id}/>)}
-    </div>
+    </>
   )
 }
diff --git a/demos/src/Tutorials/1-3-yjs/React/styles.css b/demos/src/Tutorials/1-3-yjs/React/styles.css
deleted file mode 100644
index 76fcadcc0..000000000
--- a/demos/src/Tutorials/1-3-yjs/React/styles.css
+++ /dev/null
@@ -1,3 +0,0 @@
-@import "tailwindcss/base";
-@import "tailwindcss/components";
-@import "tailwindcss/utilities";
diff --git a/demos/src/Tutorials/1-3-yjs/React/styles.scss b/demos/src/Tutorials/1-3-yjs/React/styles.scss
new file mode 100644
index 000000000..d2a9c19d1
--- /dev/null
+++ b/demos/src/Tutorials/1-3-yjs/React/styles.scss
@@ -0,0 +1,160 @@
+/* Basic editor styles */
+.tiptap {
+  :first-child {
+    margin-top: 0;
+  }
+
+  /* List styles */
+  ul, 
+  ol {
+    padding: 0 1rem;
+    margin: 1.25rem 1rem 1.25rem 0.4rem;
+    
+    li p {
+      margin-top: 0.25em;
+      margin-bottom: 0.25em;
+    }
+  }
+
+  /* Heading styles */
+  h1, 
+  h2, 
+  h3, 
+  h4, 
+  h5, 
+  h6 {
+    line-height: 1.1;
+    margin-top: 2.5rem;
+    text-wrap: pretty;
+  }
+
+  h1, 
+  h2 {
+    margin-top: 3.5rem;
+    margin-bottom: 1.5rem;
+  }
+
+  h1 { 
+    font-size: 1.4rem; 
+  }
+
+  h2 { 
+    font-size: 1.2rem; 
+  }
+
+  h3 { 
+    font-size: 1.1rem; 
+  }
+
+  h4, 
+  h5, 
+  h6 { 
+    font-size: 1rem; 
+  }
+
+  /* Code and preformatted text styles */
+  code {
+    background-color: var(--purple-light);
+    border-radius: 0.4rem;
+    color: var(--black);
+    font-size: 0.85rem;
+    padding: 0.25em 0.3em;
+  }
+
+  pre {
+    background: var(--black);
+    border-radius: 0.5rem;
+    color: var(--white);
+    font-family: 'JetBrainsMono', monospace;
+    margin: 1.5rem 0;
+    padding: 0.75rem 1rem;
+
+    code {
+      background: none;
+      color: inherit;
+      font-size: 0.8rem;
+      padding: 0;
+    }
+  }
+
+  blockquote {
+    border-left: 3px solid var(--gray-3);
+    margin: 1.5rem 0;
+    padding-left: 1rem;
+  }
+
+  hr {
+    border: none;
+    border-top: 1px solid var(--gray-2);
+    margin: 2rem 0;
+  }
+}
+
+/* Demo styling */
+#app {
+  gap: 1rem;
+  padding: 1.5rem;
+}
+
+/* Textarea styling */
+textarea,
+.textarea {
+  border-radius: 0.5rem;
+  border: 1px solid var(--gray-3);
+  color: var(--black);
+  font-family: inherit;
+  font-size: 0.875rem;
+  font-weight: 500;
+  line-height: 1.15;
+  margin: 0;
+  padding: 0.375rem 0.625rem;
+  transition: all .2s cubic-bezier(0.65,0.05,0.36,1);
+
+  &:hover {
+    border-color: var(--gray-4);
+    color: var(--black-contrast);
+  }
+
+  &[disabled] {
+    background: var(--gray-1);
+    color: var(--gray-4);
+  }
+
+  &:checked {
+    accent-color: var(--purple);
+  }
+
+  &::placeholder {
+    color: var(--gray-4);
+  }
+
+  &:focus-visible, 
+  &:focus {
+    border-color: var(--purple);
+    outline: none;
+  }
+
+  &.primary {
+    background: var(--black);
+    color: var(--white);
+
+    &:hover {
+      background-color: var(--black-contrast);
+    }
+
+    &[disabled] {
+      background: var(--gray-1);
+      color: var(--gray-4);
+    }
+  }
+
+  &.is-active {
+    background: var(--purple);
+    color: var(--white);
+
+    &:hover {
+      background-color: var(--purple-contrast);
+      color: var(--white);
+    }
+  }
+}
diff --git a/demos/src/Tutorials/1-3-yjs/Vue/Note.vue b/demos/src/Tutorials/1-3-yjs/Vue/Note.vue
index c555a7907..91755ee8e 100644
--- a/demos/src/Tutorials/1-3-yjs/Vue/Note.vue
+++ b/demos/src/Tutorials/1-3-yjs/Vue/Note.vue
@@ -15,7 +15,7 @@ const editor = useEditor({
   content: props.note.defaultContent,
   editorProps: {
     attributes: {
-      class: 'm-2 p-2 border border-black rounded-lg',
+      class: 'textarea',
     },
   },
   extensions: [
@@ -31,5 +31,5 @@ const editor = useEditor({
 </script>
 
 <template>
-  <editor-content :editor="editor"></editor-content>
+  <editor-content :editor="editor" />
 </template>
diff --git a/demos/src/Tutorials/1-3-yjs/Vue/index.vue b/demos/src/Tutorials/1-3-yjs/Vue/index.vue
index 19bed14be..9d9158cc9 100644
--- a/demos/src/Tutorials/1-3-yjs/Vue/index.vue
+++ b/demos/src/Tutorials/1-3-yjs/Vue/index.vue
@@ -1,19 +1,19 @@
 <script setup lang="ts">
 
-import './styles.css'
+import './styles.scss'
 
 import Note from './Note.vue'
 import { TNote } from './types.js'
 
 const notes: TNote[] = [
-  { id: 'note-1', defaultContent: 'some random note text' },
-  { id: 'note-2', defaultContent: 'some really random note text' },
+  { id: 'note-1', defaultContent: 'Some random note text' },
+  { id: 'note-2', defaultContent: 'Some really random note text' },
 ]
 
 </script>
 
 <template>
-  <div v-for="note in notes" :key="note.id">
-    <Note :note="note"/>
-  </div>
+  <template v-for="note in notes" :key="note.id">
+    <Note :note="note" />
+  </template>
 </template>
diff --git a/demos/src/Tutorials/1-3-yjs/Vue/styles.css b/demos/src/Tutorials/1-3-yjs/Vue/styles.css
deleted file mode 100644
index 76fcadcc0..000000000
--- a/demos/src/Tutorials/1-3-yjs/Vue/styles.css
+++ /dev/null
@@ -1,3 +0,0 @@
-@import "tailwindcss/base";
-@import "tailwindcss/components";
-@import "tailwindcss/utilities";
diff --git a/demos/src/Tutorials/1-3-yjs/Vue/styles.scss b/demos/src/Tutorials/1-3-yjs/Vue/styles.scss
new file mode 100644
index 000000000..d2a9c19d1
--- /dev/null
+++ b/demos/src/Tutorials/1-3-yjs/Vue/styles.scss
@@ -0,0 +1,160 @@
+/* Basic editor styles */
+.tiptap {
+  :first-child {
+    margin-top: 0;
+  }
+
+  /* List styles */
+  ul, 
+  ol {
+    padding: 0 1rem;
+    margin: 1.25rem 1rem 1.25rem 0.4rem;
+    
+    li p {
+      margin-top: 0.25em;
+      margin-bottom: 0.25em;
+    }
+  }
+
+  /* Heading styles */
+  h1, 
+  h2, 
+  h3, 
+  h4, 
+  h5, 
+  h6 {
+    line-height: 1.1;
+    margin-top: 2.5rem;
+    text-wrap: pretty;
+  }
+
+  h1, 
+  h2 {
+    margin-top: 3.5rem;
+    margin-bottom: 1.5rem;
+  }
+
+  h1 { 
+    font-size: 1.4rem; 
+  }
+
+  h2 { 
+    font-size: 1.2rem; 
+  }
+
+  h3 { 
+    font-size: 1.1rem; 
+  }
+
+  h4, 
+  h5, 
+  h6 { 
+    font-size: 1rem; 
+  }
+
+  /* Code and preformatted text styles */
+  code {
+    background-color: var(--purple-light);
+    border-radius: 0.4rem;
+    color: var(--black);
+    font-size: 0.85rem;
+    padding: 0.25em 0.3em;
+  }
+
+  pre {
+    background: var(--black);
+    border-radius: 0.5rem;
+    color: var(--white);
+    font-family: 'JetBrainsMono', monospace;
+    margin: 1.5rem 0;
+    padding: 0.75rem 1rem;
+
+    code {
+      background: none;
+      color: inherit;
+      font-size: 0.8rem;
+      padding: 0;
+    }
+  }
+
+  blockquote {
+    border-left: 3px solid var(--gray-3);
+    margin: 1.5rem 0;
+    padding-left: 1rem;
+  }
+
+  hr {
+    border: none;
+    border-top: 1px solid var(--gray-2);
+    margin: 2rem 0;
+  }
+}
+
+/* Demo styling */
+#app {
+  gap: 1rem;
+  padding: 1.5rem;
+}
+
+/* Textarea styling */
+textarea,
+.textarea {
+  border-radius: 0.5rem;
+  border: 1px solid var(--gray-3);
+  color: var(--black);
+  font-family: inherit;
+  font-size: 0.875rem;
+  font-weight: 500;
+  line-height: 1.15;
+  margin: 0;
+  padding: 0.375rem 0.625rem;
+  transition: all .2s cubic-bezier(0.65,0.05,0.36,1);
+
+  &:hover {
+    border-color: var(--gray-4);
+    color: var(--black-contrast);
+  }
+
+  &[disabled] {
+    background: var(--gray-1);
+    color: var(--gray-4);
+  }
+
+  &:checked {
+    accent-color: var(--purple);
+  }
+
+  &::placeholder {
+    color: var(--gray-4);
+  }
+
+  &:focus-visible, 
+  &:focus {
+    border-color: var(--purple);
+    outline: none;
+  }
+
+  &.primary {
+    background: var(--black);
+    color: var(--white);
+
+    &:hover {
+      background-color: var(--black-contrast);
+    }
+
+    &[disabled] {
+      background: var(--gray-1);
+      color: var(--gray-4);
+    }
+  }
+
+  &.is-active {
+    background: var(--purple);
+    color: var(--white);
+
+    &:hover {
+      background-color: var(--purple-contrast);
+      color: var(--white);
+    }
+  }
+}
diff --git a/demos/src/Tutorials/1-3-yjs_lexical/Lexical-React/index.tsx b/demos/src/Tutorials/1-3-yjs_lexical/Lexical-React/index.tsx
index c3dc344a6..8d6e51944 100644
--- a/demos/src/Tutorials/1-3-yjs_lexical/Lexical-React/index.tsx
+++ b/demos/src/Tutorials/1-3-yjs_lexical/Lexical-React/index.tsx
@@ -17,10 +17,9 @@ const notes: TNote[] = [
 ]
 
 export default () => {
-
   return (
-    <div>
+    <>
       {notes.map(note => <Note note={note} key={note.id}/>)}
-    </div>
+    </>
   )
 }
diff --git a/demos/src/Tutorials/1-4-collab/React/Note.tsx b/demos/src/Tutorials/1-4-collab/React/Note.tsx
index 9c7a9a270..38efcc782 100644
--- a/demos/src/Tutorials/1-4-collab/React/Note.tsx
+++ b/demos/src/Tutorials/1-4-collab/React/Note.tsx
@@ -1,5 +1,3 @@
-import './styles.css'
-
 import { TiptapCollabProvider } from '@hocuspocus/provider'
 import { Collaboration } from '@tiptap/extension-collaboration'
 import { EditorContent, useEditor } from '@tiptap/react'
@@ -27,12 +25,12 @@ export default ({ note }: { note: TNote }) => {
 
   const editor = useEditor({
     // make sure that you don't use `content` property anymore!
-    // If you want to add default content, feel free to just write text to the tiptap editor (i.e. editor.setContent (https://tiptap.dev/api/commands/set-content), but make sure that
+    // If you want to add default content, feel free to just write text to the Tiptap editor (i.e. editor.setContent (https://tiptap.dev/api/commands/set-content), but make sure that
     // you do this only once per document, otherwise the content will
     // be added again, and again, and again ..
     editorProps: {
       attributes: {
-        class: 'm-2 p-2 border border-black rounded-lg',
+        class: 'textarea',
       },
     },
     extensions: [
diff --git a/demos/src/Tutorials/1-4-collab/React/index.tsx b/demos/src/Tutorials/1-4-collab/React/index.tsx
index c3dc344a6..7d323f864 100644
--- a/demos/src/Tutorials/1-4-collab/React/index.tsx
+++ b/demos/src/Tutorials/1-4-collab/React/index.tsx
@@ -1,4 +1,4 @@
-import './styles.css'
+import './styles.scss'
 
 import React from 'react'
 
@@ -8,19 +8,18 @@ import { TNote } from './types.js'
 const notes: TNote[] = [
   {
     id: 'note-1',
-    defaultContent: 'some random note text',
+    defaultContent: 'Some random note text',
   },
   {
     id: 'note-2',
-    defaultContent: 'some really random note text',
+    defaultContent: 'Some really random note text',
   },
 ]
 
 export default () => {
-
   return (
-    <div>
+    <>
       {notes.map(note => <Note note={note} key={note.id}/>)}
-    </div>
+    </>
   )
 }
diff --git a/demos/src/Tutorials/1-4-collab/React/styles.css b/demos/src/Tutorials/1-4-collab/React/styles.css
deleted file mode 100644
index 76fcadcc0..000000000
--- a/demos/src/Tutorials/1-4-collab/React/styles.css
+++ /dev/null
@@ -1,3 +0,0 @@
-@import "tailwindcss/base";
-@import "tailwindcss/components";
-@import "tailwindcss/utilities";
diff --git a/demos/src/Tutorials/1-4-collab/React/styles.scss b/demos/src/Tutorials/1-4-collab/React/styles.scss
new file mode 100644
index 000000000..d2a9c19d1
--- /dev/null
+++ b/demos/src/Tutorials/1-4-collab/React/styles.scss
@@ -0,0 +1,160 @@
+/* Basic editor styles */
+.tiptap {
+  :first-child {
+    margin-top: 0;
+  }
+
+  /* List styles */
+  ul, 
+  ol {
+    padding: 0 1rem;
+    margin: 1.25rem 1rem 1.25rem 0.4rem;
+    
+    li p {
+      margin-top: 0.25em;
+      margin-bottom: 0.25em;
+    }
+  }
+
+  /* Heading styles */
+  h1, 
+  h2, 
+  h3, 
+  h4, 
+  h5, 
+  h6 {
+    line-height: 1.1;
+    margin-top: 2.5rem;
+    text-wrap: pretty;
+  }
+
+  h1, 
+  h2 {
+    margin-top: 3.5rem;
+    margin-bottom: 1.5rem;
+  }
+
+  h1 { 
+    font-size: 1.4rem; 
+  }
+
+  h2 { 
+    font-size: 1.2rem; 
+  }
+
+  h3 { 
+    font-size: 1.1rem; 
+  }
+
+  h4, 
+  h5, 
+  h6 { 
+    font-size: 1rem; 
+  }
+
+  /* Code and preformatted text styles */
+  code {
+    background-color: var(--purple-light);
+    border-radius: 0.4rem;
+    color: var(--black);
+    font-size: 0.85rem;
+    padding: 0.25em 0.3em;
+  }
+
+  pre {
+    background: var(--black);
+    border-radius: 0.5rem;
+    color: var(--white);
+    font-family: 'JetBrainsMono', monospace;
+    margin: 1.5rem 0;
+    padding: 0.75rem 1rem;
+
+    code {
+      background: none;
+      color: inherit;
+      font-size: 0.8rem;
+      padding: 0;
+    }
+  }
+
+  blockquote {
+    border-left: 3px solid var(--gray-3);
+    margin: 1.5rem 0;
+    padding-left: 1rem;
+  }
+
+  hr {
+    border: none;
+    border-top: 1px solid var(--gray-2);
+    margin: 2rem 0;
+  }
+}
+
+/* Demo styling */
+#app {
+  gap: 1rem;
+  padding: 1.5rem;
+}
+
+/* Textarea styling */
+textarea,
+.textarea {
+  border-radius: 0.5rem;
+  border: 1px solid var(--gray-3);
+  color: var(--black);
+  font-family: inherit;
+  font-size: 0.875rem;
+  font-weight: 500;
+  line-height: 1.15;
+  margin: 0;
+  padding: 0.375rem 0.625rem;
+  transition: all .2s cubic-bezier(0.65,0.05,0.36,1);
+
+  &:hover {
+    border-color: var(--gray-4);
+    color: var(--black-contrast);
+  }
+
+  &[disabled] {
+    background: var(--gray-1);
+    color: var(--gray-4);
+  }
+
+  &:checked {
+    accent-color: var(--purple);
+  }
+
+  &::placeholder {
+    color: var(--gray-4);
+  }
+
+  &:focus-visible, 
+  &:focus {
+    border-color: var(--purple);
+    outline: none;
+  }
+
+  &.primary {
+    background: var(--black);
+    color: var(--white);
+
+    &:hover {
+      background-color: var(--black-contrast);
+    }
+
+    &[disabled] {
+      background: var(--gray-1);
+      color: var(--gray-4);
+    }
+  }
+
+  &.is-active {
+    background: var(--purple);
+    color: var(--white);
+
+    &:hover {
+      background-color: var(--purple-contrast);
+      color: var(--white);
+    }
+  }
+}
diff --git a/demos/src/Tutorials/1-4-collab/Vue/Note.vue b/demos/src/Tutorials/1-4-collab/Vue/Note.vue
index e3b7e5546..44e2cbf60 100644
--- a/demos/src/Tutorials/1-4-collab/Vue/Note.vue
+++ b/demos/src/Tutorials/1-4-collab/Vue/Note.vue
@@ -28,12 +28,12 @@ onUnmounted(() => provider?.destroy())
 
 const editor = useEditor({
   // make sure that you don't use `content` property anymore!
-  // If you want to add default content, feel free to just write text to the tiptap editor (i.e. editor.setContent (https://tiptap.dev/api/commands/set-content), but make sure that
+  // If you want to add default content, feel free to just write text to the Tiptap editor (i.e. editor.setContent (https://tiptap.dev/api/commands/set-content), but make sure that
   // you do this only once per document, otherwise the content will
   // be added again, and again, and again ..
   editorProps: {
     attributes: {
-      class: 'm-2 p-2 border border-black rounded-lg',
+      class: 'textarea',
     },
   },
   extensions: [
@@ -49,5 +49,5 @@ const editor = useEditor({
 </script>
 
 <template>
-  <editor-content :editor="editor"></editor-content>
+  <editor-content :editor="editor" />
 </template>
diff --git a/demos/src/Tutorials/1-4-collab/Vue/index.vue b/demos/src/Tutorials/1-4-collab/Vue/index.vue
index b003c504f..26e14a048 100644
--- a/demos/src/Tutorials/1-4-collab/Vue/index.vue
+++ b/demos/src/Tutorials/1-4-collab/Vue/index.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
 
-import './styles.css'
+import './styles.scss'
 
 import Note from './Note.vue'
 import { TNote } from './types.js'
@@ -13,7 +13,7 @@ const notes: TNote[] = [
 </script>
 
 <template>
-  <div v-for="note in notes" :key="note.id">
-    <Note :note="note"/>
-  </div>
+  <template v-for="note in notes" :key="note.id">
+    <Note :note="note" />
+  </template>
 </template>
diff --git a/demos/src/Tutorials/1-4-collab/Vue/styles.css b/demos/src/Tutorials/1-4-collab/Vue/styles.css
deleted file mode 100644
index 76fcadcc0..000000000
--- a/demos/src/Tutorials/1-4-collab/Vue/styles.css
+++ /dev/null
@@ -1,3 +0,0 @@
-@import "tailwindcss/base";
-@import "tailwindcss/components";
-@import "tailwindcss/utilities";
diff --git a/demos/src/Tutorials/1-4-collab/Vue/styles.scss b/demos/src/Tutorials/1-4-collab/Vue/styles.scss
new file mode 100644
index 000000000..d2a9c19d1
--- /dev/null
+++ b/demos/src/Tutorials/1-4-collab/Vue/styles.scss
@@ -0,0 +1,160 @@
+/* Basic editor styles */
+.tiptap {
+  :first-child {
+    margin-top: 0;
+  }
+
+  /* List styles */
+  ul, 
+  ol {
+    padding: 0 1rem;
+    margin: 1.25rem 1rem 1.25rem 0.4rem;
+    
+    li p {
+      margin-top: 0.25em;
+      margin-bottom: 0.25em;
+    }
+  }
+
+  /* Heading styles */
+  h1, 
+  h2, 
+  h3, 
+  h4, 
+  h5, 
+  h6 {
+    line-height: 1.1;
+    margin-top: 2.5rem;
+    text-wrap: pretty;
+  }
+
+  h1, 
+  h2 {
+    margin-top: 3.5rem;
+    margin-bottom: 1.5rem;
+  }
+
+  h1 { 
+    font-size: 1.4rem; 
+  }
+
+  h2 { 
+    font-size: 1.2rem; 
+  }
+
+  h3 { 
+    font-size: 1.1rem; 
+  }
+
+  h4, 
+  h5, 
+  h6 { 
+    font-size: 1rem; 
+  }
+
+  /* Code and preformatted text styles */
+  code {
+    background-color: var(--purple-light);
+    border-radius: 0.4rem;
+    color: var(--black);
+    font-size: 0.85rem;
+    padding: 0.25em 0.3em;
+  }
+
+  pre {
+    background: var(--black);
+    border-radius: 0.5rem;
+    color: var(--white);
+    font-family: 'JetBrainsMono', monospace;
+    margin: 1.5rem 0;
+    padding: 0.75rem 1rem;
+
+    code {
+      background: none;
+      color: inherit;
+      font-size: 0.8rem;
+      padding: 0;
+    }
+  }
+
+  blockquote {
+    border-left: 3px solid var(--gray-3);
+    margin: 1.5rem 0;
+    padding-left: 1rem;
+  }
+
+  hr {
+    border: none;
+    border-top: 1px solid var(--gray-2);
+    margin: 2rem 0;
+  }
+}
+
+/* Demo styling */
+#app {
+  gap: 1rem;
+  padding: 1.5rem;
+}
+
+/* Textarea styling */
+textarea,
+.textarea {
+  border-radius: 0.5rem;
+  border: 1px solid var(--gray-3);
+  color: var(--black);
+  font-family: inherit;
+  font-size: 0.875rem;
+  font-weight: 500;
+  line-height: 1.15;
+  margin: 0;
+  padding: 0.375rem 0.625rem;
+  transition: all .2s cubic-bezier(0.65,0.05,0.36,1);
+
+  &:hover {
+    border-color: var(--gray-4);
+    color: var(--black-contrast);
+  }
+
+  &[disabled] {
+    background: var(--gray-1);
+    color: var(--gray-4);
+  }
+
+  &:checked {
+    accent-color: var(--purple);
+  }
+
+  &::placeholder {
+    color: var(--gray-4);
+  }
+
+  &:focus-visible, 
+  &:focus {
+    border-color: var(--purple);
+    outline: none;
+  }
+
+  &.primary {
+    background: var(--black);
+    color: var(--white);
+
+    &:hover {
+      background-color: var(--black-contrast);
+    }
+
+    &[disabled] {
+      background: var(--gray-1);
+      color: var(--gray-4);
+    }
+  }
+
+  &.is-active {
+    background: var(--purple);
+    color: var(--white);
+
+    &:hover {
+      background-color: var(--purple-contrast);
+      color: var(--white);
+    }
+  }
+}
diff --git a/docs/collaboration/getting-started/install.md b/docs/collaboration/getting-started/install.md
index 00c08df85..b7d34a26e 100644
--- a/docs/collaboration/getting-started/install.md
+++ b/docs/collaboration/getting-started/install.md
@@ -58,7 +58,7 @@ export default () => {
     ],
     content: `
       <p>
-        This is a radically reduced version of tiptap. It has support for a document, with paragraphs and text. That’s it. It’s probably too much for real minimalists though.
+        This is a radically reduced version of Tiptap. It has support for a document, with paragraphs and text. That’s it. It’s probably too much for real minimalists though.
       </p>
       <p>
         The paragraph extension is not really required, but you need at least one node. Sure, that node can be something different.
@@ -120,7 +120,7 @@ export default () => {
     ],
     content: `
       <p>
-        This is a radically reduced version of tiptap. It has support for a document, with paragraphs and text. That’s it. It’s probably too much for real minimalists though.
+        This is a radically reduced version of Tiptap. It has support for a document, with paragraphs and text. That’s it. It’s probably too much for real minimalists though.
       </p>
       <p>
         The paragraph extension is not really required, but you need at least one node. Sure, that node can be something different.
@@ -197,7 +197,7 @@ export default () => {
 
           editor.commands.setContent(`
           <p>
-          This is a radically reduced version of tiptap. It has support for a document, with paragraphs and text. That’s it. It’s probably too much for real minimalists though.
+          This is a radically reduced version of Tiptap. It has support for a document, with paragraphs and text. That’s it. It’s probably too much for real minimalists though.
         </p>
         <p>
           The paragraph extension is not really required, but you need at least one node. Sure, that node can be something different.
diff --git a/docs/collaboration/install.md b/docs/collaboration/install.md
index 4080a5262..a8af9e1e6 100644
--- a/docs/collaboration/install.md
+++ b/docs/collaboration/install.md
@@ -57,7 +57,7 @@ export default () => {
     ],
     content: `
       <p>
-        This is a radically reduced version of tiptap. It has support for a document, with paragraphs and text. That’s it. It’s probably too much for real minimalists though.
+        This is a radically reduced version of Tiptap. It has support for a document, with paragraphs and text. That’s it. It’s probably too much for real minimalists though.
       </p>
       <p>
         The paragraph extension is not really required, but you need at least one node. Sure, that node can be something different.
@@ -125,7 +125,7 @@ export default () => {
     ],
     content: `
       <p>
-        This is a radically reduced version of tiptap. It has support for a document, with paragraphs and text. That’s it. It’s probably too much for real minimalists though.
+        This is a radically reduced version of Tiptap. It has support for a document, with paragraphs and text. That’s it. It’s probably too much for real minimalists though.
       </p>
       <p>
         The paragraph extension is not really required, but you need at least one node. Sure, that node can be something different.
@@ -177,7 +177,7 @@ export default () => {
 
         editor.commands.setContent(`
         <p>
-          This is a radically reduced version of tiptap. It has support for a document, with paragraphs and text. That’s it. It’s probably too much for real minimalists though.
+          This is a radically reduced version of Tiptap. It has support for a document, with paragraphs and text. That’s it. It’s probably too much for real minimalists though.
         </p>
         <p>
           The paragraph extension is not really required, but you need at least one node. Sure, that node can be something different.
diff --git a/docs/guide/node-views/examples.md b/docs/guide/node-views/examples.md
index 55b778f0c..77952ffa3 100644
--- a/docs/guide/node-views/examples.md
+++ b/docs/guide/node-views/examples.md
@@ -14,11 +14,6 @@ Drag handles aren’t that easy to add. We are still on the lookout what’s the
 
 https://embed.tiptap.dev/preview/GuideNodeViews/DragHandle
 
-## Table of contents
-This one loops through the editor content, gives all headings an ID and renders a Table of Contents with Vue.
-
-https://embed.tiptap.dev/preview/GuideNodeViews/TableOfContents
-
 ## Drawing in the editor
 The drawing example shows a SVG that enables you to draw inside the editor.
 
diff --git a/docs/guide/node-views/react.md b/docs/guide/node-views/react.md
index 7958af589..f28cd6db1 100644
--- a/docs/guide/node-views/react.md
+++ b/docs/guide/node-views/react.md
@@ -80,7 +80,7 @@ import { NodeViewWrapper, NodeViewContent } from '@tiptap/react'
 
 export default () => {
   return (
-    <NodeViewWrapper className="react-component-with-content">
+    <NodeViewWrapper className="react-component">
       <span className="label" contentEditable={false}>React Component</span>
 
       <NodeViewContent className="content" />