diff --git a/docs/src/demos/Examples/Book/React/index.jsx b/docs/src/demos/Examples/Book/React/index.jsx
new file mode 100644
index 00000000..fe6e83db
--- /dev/null
+++ b/docs/src/demos/Examples/Book/React/index.jsx
@@ -0,0 +1,145 @@
+import React from 'react'
+import { useEditor, EditorContent } from '@tiptap/react'
+import StarterKit from '@tiptap/starter-kit'
+import { content } from '../content.js'
+import './styles.scss'
+
+const MenuBar = ({ editor }) => {
+  if (!editor) {
+    return null
+  }
+
+  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>
+    </>
+  )
+}
+
+export default () => {
+  const editor = useEditor({
+    extensions: [
+      StarterKit,
+    ],
+    content,
+    editorProps: {
+      attributes: {
+        spellcheck: 'false',
+      },
+    },
+  })
+
+  return (
+    <div>
+      <MenuBar editor={editor} />
+      <EditorContent editor={editor} />
+    </div>
+  )
+}
diff --git a/docs/src/demos/Examples/Book/React/styles.scss b/docs/src/demos/Examples/Book/React/styles.scss
new file mode 100644
index 00000000..9a6d1a7c
--- /dev/null
+++ b/docs/src/demos/Examples/Book/React/styles.scss
@@ -0,0 +1,54 @@
+/* Basic editor styles */
+.ProseMirror {
+  > * + * {
+    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);
+  }
+}
diff --git a/docs/src/demos/Examples/Book/Vue/index.spec.js b/docs/src/demos/Examples/Book/Vue/index.spec.js
new file mode 100644
index 00000000..a53927b4
--- /dev/null
+++ b/docs/src/demos/Examples/Book/Vue/index.spec.js
@@ -0,0 +1,7 @@
+context('/demos/Examples/Book/Vue', () => {
+  before(() => {
+    cy.visit('/demos/Examples/Book/Vue')
+  })
+
+  // TODO: Write tests
+})
diff --git a/docs/src/demos/Examples/Book/index.vue b/docs/src/demos/Examples/Book/Vue/index.vue
similarity index 99%
rename from docs/src/demos/Examples/Book/index.vue
rename to docs/src/demos/Examples/Book/Vue/index.vue
index b8a4e5d8..aecd85db 100644
--- a/docs/src/demos/Examples/Book/index.vue
+++ b/docs/src/demos/Examples/Book/Vue/index.vue
@@ -72,7 +72,7 @@
 <script>
 import { Editor, EditorContent } from '@tiptap/vue-2'
 import StarterKit from '@tiptap/starter-kit'
-import { content } from './content.js'
+import { content } from '../content.js'
 
 export default {
   components: {
diff --git a/docs/src/demos/Examples/Book/index.spec.js b/docs/src/demos/Examples/Book/index.spec.js
deleted file mode 100644
index da746949..00000000
--- a/docs/src/demos/Examples/Book/index.spec.js
+++ /dev/null
@@ -1,7 +0,0 @@
-context('/demos/Examples/Book', () => {
-  before(() => {
-    cy.visit('/demos/Examples/Book')
-  })
-
-  // TODO: Write tests
-})
diff --git a/docs/src/docPages/examples/book.md b/docs/src/docPages/examples/book.md
index 9883d36f..efb72861 100644
--- a/docs/src/docPages/examples/book.md
+++ b/docs/src/docPages/examples/book.md
@@ -4,4 +4,7 @@ This demo has 250 paragraphs and more than 22,000 words, check the performance y
 
 Most of the processing is needed to check the active state of the buttons for the selection. If you’d like to optimize for really long texts, try to limit these checks in your toolbar. But honestly, we think it’s great already, isn’t it?
 
-<demo name="Examples/Book" />
+<demos :items="{
+  Vue: 'Examples/Book/Vue',
+  React: 'Examples/Book/React',
+}" />