Headless editor infrastructure for React products

The Editor Your Users Actually Want.

Headless. Block-based. Markdown-first. Built for React & Next.js.

Get Started Try Playground

Live Demo

Built with power tools:

React

TypeScript

Tiptap

Tailwind CSS

Developer Experience

Stop writing boilerplate. Start shipping.

The Old Way

Manual Tiptap wiring

const editor = useEditor({
  extensions: [
    StarterKit,
    Link.configure({ openOnClick: false }),
    Placeholder.configure({ placeholder: 'Write...' }),
    UniqueID.configure({ types: ['paragraph', 'heading', 'listItem'] }),
    Table.configure({ resizable: true }),
  ],
  content: initial,
  onUpdate: ({ editor }) => setLocalState(editor.getJSON()),
  editorProps: {
    handleKeyDown(view, event) {
      // custom glue code
    },
  },
})

The Hybric Way

Small API surface

<HybricEditor
  content={initialDoc}
  onDebouncedUpdate={({ editor }) => save(editor.getJSON())}
/>

Feature Density

Everything needed to ship a production markdown editor.

Block Identity

Database-ready JSON with UUIDs for every paragraph, heading, and list item.

Keyboard First

Markdown shortcuts and context commands keep writing flow uninterrupted.

Headless UI

Drop into your design system and style with your own Tailwind tokens.

React + TypeScript

Typed callbacks and extension composition for safe integration.

Performance

Optimized for long documents with practical rendering safeguards.

Extensible Core

Keep StarterKit defaults and append custom Tiptap extensions as needed.

Build your next note app today.

Bring stable block IDs and modern editing UX into your product quickly.