diff --git a/docs/src/demos/Examples/Tasks/React/index.jsx b/docs/src/demos/Examples/Tasks/React/index.jsx
new file mode 100644
index 00000000..2345b4a4
--- /dev/null
+++ b/docs/src/demos/Examples/Tasks/React/index.jsx
@@ -0,0 +1,43 @@
+import React from 'react'
+import { useEditor, EditorContent } from '@tiptap/react'
+import Document from '@tiptap/extension-document'
+import Paragraph from '@tiptap/extension-paragraph'
+import Text from '@tiptap/extension-text'
+import TaskList from '@tiptap/extension-task-list'
+import TaskItem from '@tiptap/extension-task-item'
+import './styles.scss'
+
+const CustomDocument = Document.extend({
+  content: 'taskList',
+})
+
+const CustomTaskItem = TaskItem.extend({
+  content: 'inline*',
+})
+
+export default () => {
+  const editor = useEditor({
+    extensions: [
+      CustomDocument,
+      Paragraph,
+      Text,
+      TaskList,
+      CustomTaskItem,
+    ],
+    content: `
+      <ul data-type="taskList">
+        <li data-type="taskItem" data-checked="true">flour</li>
+        <li data-type="taskItem" data-checked="true">baking powder</li>
+        <li data-type="taskItem" data-checked="true">salt</li>
+        <li data-type="taskItem" data-checked="false">sugar</li>
+        <li data-type="taskItem" data-checked="false">milk</li>
+        <li data-type="taskItem" data-checked="false">eggs</li>
+        <li data-type="taskItem" data-checked="false">butter</li>
+      </ul>
+    `,
+  })
+
+  return (
+    <EditorContent editor={editor} />
+  )
+}
diff --git a/docs/src/demos/Examples/Tasks/React/styles.scss b/docs/src/demos/Examples/Tasks/React/styles.scss
new file mode 100644
index 00000000..f10c6ad9
--- /dev/null
+++ b/docs/src/demos/Examples/Tasks/React/styles.scss
@@ -0,0 +1,18 @@
+ul[data-type="taskList"] {
+  list-style: none;
+  padding: 0;
+
+  li {
+    display: flex;
+    align-items: center;
+
+    > label {
+      flex: 0 0 auto;
+      margin-right: 0.5rem;
+    }
+  }
+
+  input[type="checkbox"] {
+    cursor: pointer;
+  }
+}
diff --git a/docs/src/demos/Examples/Tasks/Vue/index.spec.js b/docs/src/demos/Examples/Tasks/Vue/index.spec.js
new file mode 100644
index 00000000..a318cf07
--- /dev/null
+++ b/docs/src/demos/Examples/Tasks/Vue/index.spec.js
@@ -0,0 +1,7 @@
+context('/demos/Examples/Tasks/Vue', () => {
+  before(() => {
+    cy.visit('/demos/Examples/Tasks/Vue')
+  })
+
+  // TODO: Write tests
+})
diff --git a/docs/src/demos/Examples/Tasks/index.vue b/docs/src/demos/Examples/Tasks/Vue/index.vue
similarity index 95%
rename from docs/src/demos/Examples/Tasks/index.vue
rename to docs/src/demos/Examples/Tasks/Vue/index.vue
index bae4c4fd..a767f5d8 100644
--- a/docs/src/demos/Examples/Tasks/index.vue
+++ b/docs/src/demos/Examples/Tasks/Vue/index.vue
@@ -1,7 +1,5 @@
 <template>
-  <div v-if="editor">
-    <editor-content :editor="editor" />
-  </div>
+  <editor-content :editor="editor" />
 </template>
 
 <script>
diff --git a/docs/src/demos/Examples/Tasks/index.spec.js b/docs/src/demos/Examples/Tasks/index.spec.js
deleted file mode 100644
index 87065b64..00000000
--- a/docs/src/demos/Examples/Tasks/index.spec.js
+++ /dev/null
@@ -1,7 +0,0 @@
-context('/demos/Examples/Tasks', () => {
-  before(() => {
-    cy.visit('/demos/Examples/Tasks')
-  })
-
-  // TODO: Write tests
-})
diff --git a/docs/src/docPages/examples/tasks.md b/docs/src/docPages/examples/tasks.md
index 6ccb6c50..7ded27a4 100644
--- a/docs/src/docPages/examples/tasks.md
+++ b/docs/src/docPages/examples/tasks.md
@@ -1,3 +1,6 @@
 # Tasks
 
-<demo name="Examples/Tasks" />
+<demos :items="{
+  Vue: 'Examples/Tasks/Vue',
+  React: 'Examples/Tasks/React',
+}" />