Start

opt-deck

Embed editable presentations in React and connect brands, customer editions, AI proposals, playback and export through one document.

reopt designUpdated Nov 1, 2026

Try the editor Browse design collections

Choose a guide

Follow the guides from your first embed to host contracts for AI, persistence and export.

Install and embedInstall the package, host runtime assets and connect a controlled editor or standalone viewer.Document model and editingUnderstand v2 documents, atomic commands, undo/redo, brands and customer-edition merges.AI generation and proposalsConvert model responses into validated document changes with review, cancellation, conflict handling and undo.Persistence, assets and sharingHost contracts for autosave, conflict detection, recovery, uploads and read-only sharing.Presentation and exportViewer integration, presenter mode, motion/media and the capabilities of PNG, PDF, PPTX, MP4 and portable output.API reference and troubleshootingPublic component, callback, controller and server contracts, plus remedies for common integration errors.

1. One document across the workflow

The editor provides a free-position canvas, an overview of multiple slides and a presentation view. Text, vectors, tables, charts, images and media remain individual scene elements instead of being flattened into a slide image.

Create a branded source presentation, derive customer editions, and selectively merge later source updates. Manual edits and accepted AI proposals use the same validation and transaction rules.

2. Choose an entry point

@reopt-ai/opt-deck: DeckEditor, Deck, useDeck and editor types for authoring in an app.
@reopt-ai/opt-deck/viewer: Viewer-only entry for playback without editor panels or export encoders.
@reopt-ai/opt-deck/server: Schemas, migration, transactions, editions and AI contracts without React client APIs or the DOM.
@reopt-ai/opt-deck/json-render: Import the deck's json-render contract: deckCatalog, spec rendering and patching, prompts and streams. A deck is a standard json-render spec; the scene engine is its renderer.
@reopt-ai/opt-deck/opt-charts: Optional adapter for all 31 opt-charts data visualizations and four chart shells.
@reopt-ai/opt-deck/opt-datagrid: Optional opt-datagrid adapter for spreadsheet editing and presentation tables.
@reopt-ai/opt-deck/styles.css: Import editor and viewer styling once. Host WASM and font assets separately.

2. Choose an entry point
Item	Behavior and usage
@reopt-ai/opt-deck	DeckEditor, Deck, useDeck and editor types for authoring in an app.
@reopt-ai/opt-deck/viewer	Viewer-only entry for playback without editor panels or export encoders.
@reopt-ai/opt-deck/server	Schemas, migration, transactions, editions and AI contracts without React client APIs or the DOM.
@reopt-ai/opt-deck/json-render	Import the deck's json-render contract: deckCatalog, spec rendering and patching, prompts and streams. A deck is a standard json-render spec; the scene engine is its renderer.
@reopt-ai/opt-deck/opt-charts	Optional adapter for all 31 opt-charts data visualizations and four chart shells.
@reopt-ai/opt-deck/opt-datagrid	Optional opt-datagrid adapter for spreadsheet editing and presentation tables.
@reopt-ai/opt-deck/styles.css	Import editor and viewer styling once. Host WASM and font assets separately.

3. Rendering and state boundaries

DeckDocument v2 stores content, brand, assets and motion. Selection, camera and transient drag previews belong to the editor session. The CanvasKit/Skia canvas, presentation, thumbnails and output adapters share scene and text-layout data.

Each editor has an independent history. Use value/onChange for host-owned documents, or useDeck for custom command UI and history. Two separate stores do not share an undo stack.

4. Three design collections

Choose editorial, product or executive with createDeckDocument. Each collection supplies 12 editable sample slides. Edit elements in the playground and compare collections in Explore.

editorial: Typography-led introductions and brand stories.
product: Product narratives with features and metrics.
executive: Decision-making presentations built around evidence, comparison and proposals.

4. Three design collections
Item	Behavior and usage
editorial	Typography-led introductions and brand stories.
product	Product narratives with features and metrics.
executive	Decision-making presentations built around evidence, comparison and proposals.

5. Supported scope and current limits

Import JSON, portable .deck files and supported editable SVG paths; export PNG, PDF, PPTX and MP4. Arbitrary PPTX/Keynote reconstruction and real-time multi-user editing are not provided.

Supported PPTX elements remain editable, while some effects use per-element image fallbacks. Check font substitution and media/encoder support in the receiving environment. Existing verification is not a guarantee of visual quality or performance in every environment.