diff --git a/demos/src/GuideContent/ReadOnly/React/index.html b/demos/src/GuideContent/ReadOnly/React/index.html
new file mode 100644
index 00000000..1f5c0319
--- /dev/null
+++ b/demos/src/GuideContent/ReadOnly/React/index.html
@@ -0,0 +1,15 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
+  <body>
+    <div id="app"></div>
+    <script type="module">
+      import setup from "../../../../setup/react.ts";
+      import source from "@source";
+      setup("GuideContent/ReadOnly", source);
+    </script>
+  </body>
+</html>
diff --git a/demos/src/GuideContent/ReadOnly/React/index.jsx b/demos/src/GuideContent/ReadOnly/React/index.jsx
new file mode 100644
index 00000000..3d2dccfc
--- /dev/null
+++ b/demos/src/GuideContent/ReadOnly/React/index.jsx
@@ -0,0 +1,47 @@
+import React, { useState, useEffect } from 'react'
+import { useEditor, EditorContent } from '@tiptap/react'
+import StarterKit from '@tiptap/starter-kit'
+import './styles.scss'
+
+export default () => {
+  const [editable, setEditable] = useState(false)
+  const editor = useEditor({
+    editable,
+    content: `
+        <p>
+          This text is <strong>read-only</strong>. No matter what you try, you are not able to edit something. Okay, if you toggle the checkbox above you’ll be able to edit the text.
+        </p>
+        <p>
+          If you want to check the state, you can call <code>editor.isEditable()</code>.
+        </p>
+      `,
+    extensions: [StarterKit],
+  })
+
+  useEffect(() => {
+    if (!editor) {
+      return null
+    }
+
+    editor.setEditable(editable)
+  }, [editor, editable])
+
+  if (!editor) {
+    return null
+  }
+
+  return (
+    <>
+      <div className="checkbox">
+        <input
+          type="checkbox"
+          id="editable"
+          value={editable}
+          onChange={event => setEditable(event.target.checked)}
+        />
+        <label htmlFor="editable">editable</label>
+      </div>
+      <EditorContent editor={editor} />
+    </>
+  )
+}
diff --git a/demos/src/GuideContent/ReadOnly/React/index.spec.js b/demos/src/GuideContent/ReadOnly/React/index.spec.js
new file mode 100644
index 00000000..99ace8a1
--- /dev/null
+++ b/demos/src/GuideContent/ReadOnly/React/index.spec.js
@@ -0,0 +1,29 @@
+context('/src/GuideContent/ReadOnly/React/', () => {
+  before(() => {
+    cy.visit('/src/GuideContent/ReadOnly/React/')
+  })
+
+  beforeEach(() => {
+    cy.get('.ProseMirror').then(([{ editor }]) => {
+      editor.commands.clearContent()
+    })
+  })
+
+  it('should be read-only', () => {
+    cy.get('.ProseMirror').then(([{ editor }]) => {
+      editor.setEditable(false)
+      cy.get('.ProseMirror').type('Edited: ')
+
+      cy.get('.ProseMirror p:first').should('not.contain', 'Edited: ')
+    })
+  })
+
+  it('should be editable', () => {
+    cy.get('.ProseMirror').then(([{ editor }]) => {
+      editor.setEditable(true)
+      cy.get('.ProseMirror').type('Edited: ')
+
+      cy.get('.ProseMirror p:first').should('contain', 'Edited: ')
+    })
+  })
+})
diff --git a/demos/src/GuideContent/ReadOnly/React/styles.scss b/demos/src/GuideContent/ReadOnly/React/styles.scss
new file mode 100644
index 00000000..71e5d046
--- /dev/null
+++ b/demos/src/GuideContent/ReadOnly/React/styles.scss
@@ -0,0 +1,19 @@
+/* Basic editor styles */
+.ProseMirror {
+  > * + * {
+    margin-top: 0.75em;
+  }
+}
+
+.checkbox {
+  margin-bottom: 1rem;
+
+  input[type="checkbox"] {
+    margin-right: 0.5rem;
+  }
+}
+
+[contenteditable="false"] {
+  color: #999;
+  cursor: not-allowed;
+}
