diff --git a/demos/src/GuideContent/GenerateText/React/index.html b/demos/src/GuideContent/GenerateText/React/index.html
new file mode 100644
index 00000000..18018e1d
--- /dev/null
+++ b/demos/src/GuideContent/GenerateText/React/index.html
@@ -0,0 +1,15 @@
+
+
+
+
+
+
+
+
+
+
+
diff --git a/demos/src/GuideContent/GenerateText/React/index.jsx b/demos/src/GuideContent/GenerateText/React/index.jsx
new file mode 100644
index 00000000..c2bcdc47
--- /dev/null
+++ b/demos/src/GuideContent/GenerateText/React/index.jsx
@@ -0,0 +1,62 @@
+import React, { useMemo } from 'react'
+import { generateText } from '@tiptap/core'
+import Document from '@tiptap/extension-document'
+import Paragraph from '@tiptap/extension-paragraph'
+import Text from '@tiptap/extension-text'
+import HardBreak from '@tiptap/extension-hard-break'
+
+const json = {
+ type: 'doc',
+ content: [
+ {
+ type: 'paragraph',
+ content: [
+ {
+ type: 'text',
+ text: 'This is a paragraph.',
+ },
+ ],
+ },
+ {
+ type: 'paragraph',
+ content: [
+ {
+ type: 'text',
+ text: 'Here is another paragraph …',
+ },
+ {
+ type: 'hardBreak',
+ },
+ {
+ type: 'text',
+ text: '… with an hard break.',
+ },
+ ],
+ },
+ ],
+}
+
+export default () => {
+ const output = useMemo(() => {
+ return generateText(
+ json,
+ [
+ Document,
+ Paragraph,
+ Text,
+ HardBreak,
+ // other extensions …
+ ],
+ {
+ // define a custom block separator if you want to
+ blockSeparator: '\n\n',
+ },
+ )
+ }, [json])
+
+ return (
+
+ {output}
+
+ )
+}
diff --git a/demos/src/GuideContent/GenerateText/React/index.spec.js b/demos/src/GuideContent/GenerateText/React/index.spec.js
new file mode 100644
index 00000000..91e29475
--- /dev/null
+++ b/demos/src/GuideContent/GenerateText/React/index.spec.js
@@ -0,0 +1,7 @@
+context('/src/GuideContent/GenerateText/React/', () => {
+ before(() => {
+ cy.visit('/src/GuideContent/GenerateText/React/')
+ })
+
+ // TODO: Write tests
+})