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

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

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

Headlessopt-editor

Headless Composition

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

edittoolbarcomposition
EditorProviderBlockTreeBlockToolbarcreateEditorStore+2
Open
PreviousDiff Review