Headless Widgets 0.1.0Source on GitHub

Interactive

Playground

Build a document with the demo widgets. Add blocks, edit their data, and inspect the output.

Add
Editor9 blocks
Text
Metrics
Item
Item
Item
Rich text
Loading editor...
Table
Code
Note
FAQ
Item
Item
Item
Checklist
Links
Item
Item
Item
Output

Headless Widgets / v0.1.0

A toolkit for building editable documents from React components. This first release separates the document model, editing controls, and published renderer so your application can own the interface and storage.

Release at a glance

Version
0.1.0

Early release; APIs may change

Packages
4

Core, editor, rich text, rich-text editor

License
MIT

Use in personal and commercial projects

What ships in this release

Define each widget with a data validator, default value, renderer, and optional editor. Documents keep stable block IDs and schema versions.

The editor supports insertion, selection, reordering, duplication, removal, and undo/redo. Rich text is optional and its editor loads separately.

Choose the packages you need

PackageResponsibility
@headless-widgets/reactDocument model, validation, registry, and rendering
@headless-widgets/editorEditing state, controls, history, and patch events
@headless-widgets/rich-textStatic rich-text output without Lexical
@headless-widgets/rich-text-editorLazy rich-text editor and formatting commands
Install the document and editor packages
pnpm add @headless-widgets/react @headless-widgets/editor

Before you adopt it

Which React versions are supported?

The packages support React 18.2 and React 19. They include TypeScript declarations and do not inject CSS.

Does the toolkit save documents to a server?

No. Use onCommit for the full document and onPatch for changed blocks. Your application owns storage, authentication, permissions, and publishing.

Is Markdown the editable source of truth?

No. Versioned JSON is the source of truth. Markdown is an optional export and cannot restore arbitrary application widgets.

Adoption checklist

  • Review the package responsibilities
  • Try your own widget in the playground
  • Validate a representative saved document
  • Decide how patches reach your storage
  • Pin package versions before integration
Ready to editLocal demo · reload to reset