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/Diff Review
Reviewopt-editor example

Diff Review

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

Review changed blocks with hover diff and block-level actions.

diffreviewai
bun add @reopt-ai/opt-editor
EditorcreateEditorStoredefaultCatalogdiffSpecsDetailedEditorSpec
1024px
Diff Review
suggestionDecorations + mode="diff"
2 changed blocks

Hover a changed block to inspect the AI suggestion.

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.

Related Examples

ℹ️

EAV mappedcampaigns.launch_plan1 snapshots
Appopt-editor

Notes App

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

appnotesbrandapp-sdkhistoryeav+1
EditorcreateEditorStoredefaultCatalogEditorSpec+1
Open

ℹ️

Starteropt-editor

Basic Editor

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

editauthoringeditor
EditorcreateEditorStoredefaultCatalogEditorSpec
Open
Headless
Custom shell around BlockTree

Headlessopt-editor

Headless Composition

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

edittoolbarcomposition
EditorProviderBlockTreeBlockToolbarcreateEditorStore+2
Open
PreviousHeadless CompositionNextStatic Renderer