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/Static Renderer
Renderopt-editor 예제

Static Renderer

저장된 EditorSpec을 읽기 전용 콘텐츠로 렌더링하는 publish/output 예제입니다.

Render persisted content without mounting the editing engine.

renderread-onlypublish
bun add @reopt-ai/opt-editor
StaticRendererEditorSpec
1024px
Render Output

Published operating note

StaticRenderer is useful when the editing engine is no longer needed and you only want deterministic output from a stored EditorSpec.

This output can render in server components, docs, previews, and publish surfaces.
  • No editing state to hydrate
  • Ideal for canonical previews
  • Same spec format as the live editor

관련 예제

ℹ️

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
열기
Headless
Custom shell around BlockTree

Headlessopt-editor

Headless Composition

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

edittoolbarcomposition
EditorProviderBlockTreeBlockToolbarcreateEditorStore+2
열기
이전Diff Review