diff --git a/demos/src/Extensions/Placeholder/React/index.html b/demos/src/Extensions/Placeholder/React/index.html
new file mode 100644
index 00000000..45bacec3
--- /dev/null
+++ b/demos/src/Extensions/Placeholder/React/index.html
@@ -0,0 +1,15 @@
+
+
+
+
+
+
+
+
+
+
+
diff --git a/demos/src/Extensions/Placeholder/React/index.jsx b/demos/src/Extensions/Placeholder/React/index.jsx
new file mode 100644
index 00000000..b1b7a7d4
--- /dev/null
+++ b/demos/src/Extensions/Placeholder/React/index.jsx
@@ -0,0 +1,27 @@
+import React from 'react'
+import { useEditor, EditorContent } from '@tiptap/react'
+import StarterKit from '@tiptap/starter-kit'
+import Placeholder from '@tiptap/extension-placeholder'
+import './styles.scss'
+
+export default () => {
+ const editor = useEditor({
+ extensions: [
+ StarterKit,
+ Placeholder.configure({
+ // Use a placeholder:
+ placeholder: 'Write something …',
+ // Use different placeholders depending on the node type:
+ // placeholder: ({ node }) => {
+ // if (node.type.name === 'heading') {
+ // return 'What’s the title?'
+ // }
+
+ // return 'Can you add some further context?'
+ // },
+ }),
+ ],
+ })
+
+ return
+}
diff --git a/demos/src/Extensions/Placeholder/React/styles.scss b/demos/src/Extensions/Placeholder/React/styles.scss
new file mode 100644
index 00000000..4da9f361
--- /dev/null
+++ b/demos/src/Extensions/Placeholder/React/styles.scss
@@ -0,0 +1,24 @@
+/* Basic editor styles */
+.ProseMirror {
+ > * + * {
+ margin-top: 0.75em;
+ }
+}
+
+/* Placeholder (at the top) */
+.ProseMirror p.is-editor-empty:first-child::before {
+ color: #adb5bd;
+ content: attr(data-placeholder);
+ float: left;
+ height: 0;
+ pointer-events: none;
+}
+
+/* Placeholder (on every new line) */
+/*.ProseMirror p.is-empty::before {
+ color: #adb5bd;
+ content: attr(data-placeholder);
+ float: left;
+ height: 0;
+ pointer-events: none;
+}*/