reopt designreopt design
DocsExploreToolsPricingBuilder
Explore/
opt-ui161opt-charts21opt-datagrid5opt-editor5opt-chat6opt-shell14brandapp-ui8Examples12
reopt designreopt design

A design system for the AI era

  • Docs
  • Pricing
  • Releases
  • GitHub
  • Terms of Service
  • Privacy Policy

© 2026 reopt-ai. All rights reserved.

Explore/opt-editor/Headless Composition
Headlessopt-editor example

Headless Composition

EditorProvider, BlockTree, BlockToolbar를 분리해 커스텀 chrome을 붙이는 조합 예제입니다.

Compose your own shell around BlockTree and BlockToolbar.

edittoolbarcomposition
bun add @reopt-ai/opt-editor
EditorProviderBlockTreeBlockToolbarcreateEditorStoredefaultCatalogEditorSpec
1024px
Headless
Custom shell around BlockTree
v2

Related Examples

ℹ️

Starteropt-editor

Basic Editor

Editor 컴포넌트 하나로 작성 화면을 빠르게 붙이는 가장 짧은 시작점입니다.

editauthoringeditor
EditorcreateEditorStoredefaultCatalogEditorSpec
Open
Diff Review
suggestionDecorations + mode="diff"
2 changed blocks

Renewal committee memo

The current draft summarizes why the customer expansion is likely to close this quarter.

Next step: align the ROI paragraph with the updated committee recommendation.

Reviewopt-editor

Diff Review

mode="diff"와 suggestionDecorations로 AI 제안을 블록 단위로 검수하는 리뷰 예제입니다.

diffreviewai
EditorcreateEditorStoredefaultCatalogdiffSpecsDetailed+1
Open

ℹ️

EAV mappedcampaigns.launch_plan1 snapshots
Appopt-editor

Notes App

opt-editor를 중심으로 템플릿, 핀, 페이지 복제, 댓글 게이트, AI 업데이트, 버전 복원, EAV record mapping, BrandApp 동기화 패널을 붙인 제품형 노트 앱입니다.

appnotesbrandapp-sdkhistoryeav+1
EditorcreateEditorStoredefaultCatalogEditorSpec+1
Open
PreviousBasic EditorNextDiff Review