diff --git a/demos/src/Extensions/Gapcursor/React/index.html b/demos/src/Extensions/Gapcursor/React/index.html
new file mode 100644
index 00000000..47ec915c
--- /dev/null
+++ b/demos/src/Extensions/Gapcursor/React/index.html
@@ -0,0 +1,15 @@
+
+
+
+
+
+
+
+
+
+
+
diff --git a/demos/src/Extensions/Gapcursor/React/index.jsx b/demos/src/Extensions/Gapcursor/React/index.jsx
new file mode 100644
index 00000000..76559b04
--- /dev/null
+++ b/demos/src/Extensions/Gapcursor/React/index.jsx
@@ -0,0 +1,20 @@
+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 Gapcursor from '@tiptap/extension-gapcursor'
+import Image from '@tiptap/extension-image'
+import './styles.scss'
+
+export default () => {
+ const editor = useEditor({
+ extensions: [Document, Paragraph, Text, Image, Gapcursor],
+ content: `
+ 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.
+ 
+ `,
+ })
+
+ return
+}
diff --git a/demos/src/Extensions/Gapcursor/React/index.spec.js b/demos/src/Extensions/Gapcursor/React/index.spec.js
new file mode 100644
index 00000000..b7732493
--- /dev/null
+++ b/demos/src/Extensions/Gapcursor/React/index.spec.js
@@ -0,0 +1,7 @@
+context('/src/Examples/Gapcursor/React/', () => {
+ before(() => {
+ cy.visit('/src/Examples/Gapcursor/React/')
+ })
+
+ // TODO: Write tests
+})
diff --git a/demos/src/Extensions/Gapcursor/React/styles.scss b/demos/src/Extensions/Gapcursor/React/styles.scss
new file mode 100644
index 00000000..23deef10
--- /dev/null
+++ b/demos/src/Extensions/Gapcursor/React/styles.scss
@@ -0,0 +1,11 @@
+/* Basic editor styles */
+.ProseMirror {
+ > * + * {
+ margin-top: 0.75em;
+ }
+
+ img {
+ height: auto;
+ max-width: 100%;
+ }
+}