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

AI 시대를 위한 디자인 시스템

  • 문서
  • 가격
  • 릴리즈 노트
  • GitHub
  • 서비스 약관
  • 개인정보처리방침

© 2026 reopt-ai. All rights reserved.

Explore/opt-editor/Headless Composition
Headlessopt-editor 예제

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

관련 예제

ℹ️

Starteropt-editor

Basic Editor

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

editauthoringeditor
EditorcreateEditorStoredefaultCatalogEditorSpec
열기
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
열기

ℹ️

EAV mappedcampaigns.launch_plan1 snapshots
Appopt-editor

Notes App

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

appnotesbrandapp-sdkhistoryeav+1
EditorcreateEditorStoredefaultCatalogEditorSpec+1
열기
이전Basic Editor다음Diff Review