Headless Widgets Typed document data
Each block has an ID, type, schema version, and JSON data. Register a validator alongside your component.
React / TypeScript / MIT
A document editor built
from your components.
Turn React components into editable blocks. Get document state, undo and redo, and a separate renderer. Keep control of the interface and storage.
Typed blocks. Your design.
pnpm add @headless-widgets/react @headless-widgets/editorTry it
One block. Two views.
Edit the fields. Watch the rendered output update.
Editor1 block
Output
Ready to editLocal demo · reload to reset
What it handles
Less editor plumbing to build.
Editing and history
Insert, reorder, copy, and remove blocks. Undo and redo are part of the editor state.
Changes you can persist
Receive set, remove, and order patches. Connect those events to your application's storage.
A separate reader
Render the same document on published pages. Keep editing dependencies on the authoring route.
Where it fits
For apps with their own UI.
Use it for a CMS, a documentation tool, or an editor embedded in your product. Add rich text only where a block needs it.
What you bring
Your components, CSS, persistence, permissions, and publishing workflow. This toolkit supplies the document and editing layer.
Explore example documentsPre-1.0 software. APIs and schemas may change.