📄️ Define the schema
The playground schema defines every block type the editor and renderer understand: config shape, slots, and optional context.
📄️ Block components
Block components are React components that receive BlockProps from the renderer and render a single block. The same components are used for preview and inside the editor canvas (the editor wraps them with chrome like edit/remove).
📄️ Wire up the editor
The visual editor uses EditorProvider, EditorDndProvider, BlockPalette, and EditorCanvas from @genetik/editor-react. The host holds content state and passes it down; the editor mutates content via onChange.
📄️ JSON mode and preview
The playground offers two ways to edit content (JSON and visual) and a live preview that uses the same schema and component map.
📄️ Congratulations
You've walked through the main pieces of this tutorial:
📄️ Next steps
- Package docs — Deep dive into schema, content, editor, renderer, and context-events.