reopt design
DocsExploreTemplatesCanvasToolsPricing
Login
opt-uiopt-chartsopt-datagridopt-editoropt-calendaropt-filemanageropt-chatopt-shellbrandapp-ui
opt-editor6
Headless Composition
reopt designreopt design

A design system for the AI era

  • Docs
  • Pricing
  • Releases
  • About
  • Contact
  • Terms of Service
  • Privacy Policy

reopt Inc.Business registration no. 217-88-02453contact@reopt.ai

© 2026 reopt Inc. All rights reserved.

Headlessopt-editor example

Headless Composition

Compose a custom authoring surface with BlockTree, BlockToolbar, document versions, and working undo/redo controls.

edittoolbarcomposition
bun add @reopt-ai/opt-editor

APIs used

EditorProviderBlockTreeBlockToolbarcreateEditorStoredefaultCatalogEditorSpec

Live preview

Change the width and theme, then interact with the components.

1024px
Headless
Custom shell around BlockTree
v2

Install and import

Related docsOpen playground

Install

bun add @reopt-ai/opt-editor

Import

import { EditorProvider, BlockTree, BlockToolbar, createEditorStore, defaultCatalog, type EditorSpec } from "@reopt-ai/opt-editor";

Related Examples

opt-editor

Basic Editor

Examples

Edit headings, paragraphs, and a callout with Editor, defaultCatalog, and an in-memory document store.

opt-editor

Version History

Examples

Edit a document, undo and redo changes, save in-memory snapshots, preview saved content, and restore any version as one undoable change.

opt-editor

Diff Review

Examples

Review changes with keyboard-accessible decisions: accept updates the document, reject keeps the original, and reset starts over.

PreviousBasic EditorNextDiff Review