diff --git a/src/editor/Editor.tsx b/src/editor/Editor.tsx
new file mode 100644
index 0000000..8dae98f
--- /dev/null
+++ b/src/editor/Editor.tsx
@@ -0,0 +1,24 @@
+import { EditorContent, useEditor } from "@tiptap/react";
+import type { JSONContent } from "@tiptap/core";
+import { editorExtensions } from "./extensions";
+
+interface EditorProps {
+  chapterId: string;
+  content: JSONContent;
+  onChange: (content: JSONContent) => void;
+}
+
+export function Editor({ chapterId, content, onChange }: EditorProps) {
+  const editor = useEditor(
+    {
+      extensions: editorExtensions,
+      content,
+      autofocus: "start",
+      editorProps: { attributes: { class: "prose" } },
+      onUpdate: ({ editor }) => onChange(editor.getJSON()),
+    },
+    [chapterId]
+  );
+
+  return <EditorContent editor={editor} className="editor-host" />;
+}
diff --git a/src/editor/extensions.ts b/src/editor/extensions.ts
new file mode 100644
index 0000000..e395b92
--- /dev/null
+++ b/src/editor/extensions.ts
@@ -0,0 +1,11 @@
+import type { Extensions } from "@tiptap/core";
+import StarterKit from "@tiptap/starter-kit";
+import Placeholder from "@tiptap/extension-placeholder";
+
+export const editorExtensions: Extensions = [
+  StarterKit.configure({
+    heading: { levels: [2, 3] },
+    codeBlock: false,
+  }),
+  Placeholder.configure({ placeholder: "Begin your chapter…" }),
+];