diff --git a/demos/src/GuideContent/GenerateHTML/React/index.html b/demos/src/GuideContent/GenerateHTML/React/index.html
new file mode 100644
index 00000000..5ef78c0b
--- /dev/null
+++ b/demos/src/GuideContent/GenerateHTML/React/index.html
@@ -0,0 +1,15 @@
+
+
+
+
+
+
+
+
+
+
+
diff --git a/demos/src/GuideContent/GenerateHTML/React/index.jsx b/demos/src/GuideContent/GenerateHTML/React/index.jsx
new file mode 100644
index 00000000..9a664036
--- /dev/null
+++ b/demos/src/GuideContent/GenerateHTML/React/index.jsx
@@ -0,0 +1,51 @@
+import React, { useMemo } from 'react'
+// Option 1: Browser + server-side
+import { generateHTML } from '@tiptap/html'
+// Option 2: Browser-only (lightweight)
+// import { generateHTML } from '@tiptap/core'
+import Document from '@tiptap/extension-document'
+import Paragraph from '@tiptap/extension-paragraph'
+import Text from '@tiptap/extension-text'
+import Bold from '@tiptap/extension-bold'
+
+const json = {
+ type: 'doc',
+ content: [
+ {
+ type: 'paragraph',
+ content: [
+ {
+ type: 'text',
+ text: 'Example ',
+ },
+ {
+ type: 'text',
+ marks: [
+ {
+ type: 'bold',
+ },
+ ],
+ text: 'Text',
+ },
+ ],
+ },
+ ],
+}
+
+export default () => {
+ const output = useMemo(() => {
+ return generateHTML(json, [
+ Document,
+ Paragraph,
+ Text,
+ Bold,
+ // other extensions …
+ ])
+ }, [json])
+
+ return (
+
+ {output}
+
+ )
+}
diff --git a/demos/src/GuideContent/GenerateHTML/React/index.spec.js b/demos/src/GuideContent/GenerateHTML/React/index.spec.js
new file mode 100644
index 00000000..ffed7d12
--- /dev/null
+++ b/demos/src/GuideContent/GenerateHTML/React/index.spec.js
@@ -0,0 +1,7 @@
+context('/src/GuideContent/GenerateHTML/React/', () => {
+ before(() => {
+ cy.visit('/src/GuideContent/GenerateHTML/React/')
+ })
+
+ // TODO: Write tests
+})