Presentation and export

1. Presentation view

DeckViewer provides navigation, fullscreen, presenter notes, a timer, pointer and presenter window. Pair slideId with onSlideChange to synchronize host UI. onPresent overrides the editor built-in presentation transition.

Presenter windows and fullscreen depend on browser activation and popup policies. Check window opening, navigation, media playback and reduced-motion behavior in the actual presentation environment.

"use client";
import { DeckViewer } from "@reopt-ai/opt-deck/viewer";
import type { DeckDocument } from "@reopt-ai/opt-deck/server";
import "@reopt-ai/opt-deck/styles.css";

export function PresentationViewer({ document }: { document: DeckDocument }) {
  return (
    <DeckViewer
      document={document}
      locale="ko"
      controls
      showNotes={false}
      autoPlay={false}
      style={{ height: 720 }}
    />
  );
}

2. What each format preserves

3. Built-in export and host jobs

Choose a format in the editor export menu. onExport delegates pdf/pptx/mp4/portable to the host. JSON and PNG do not use this callback.

The callback owns completion or download and throws on failure. For long-running server jobs, the host implements creation, progress polling, cancellation and delivery. This example assumes the endpoint returns the completed file.

import type { DeckEditorProps } from "@reopt-ai/opt-deck";

export const exportWithHost: NonNullable<DeckEditorProps["onExport"]> =
  async (format, document, signal) => {
    // Host-defined endpoint. It returns the completed file in this example.
    const response = await fetch("/api/presentation-export", {
      method: "POST",
      headers: { "Content-Type": "application/json" },
      body: JSON.stringify({ format, document }),
      signal,
    });
    if (!response.ok) throw new Error("Export failed");
    const blob = await response.blob();
    signal.throwIfAborted();
    const url = URL.createObjectURL(blob);
    const link = window.document.createElement("a");
    link.href = url;
    link.download = "presentation." + (format === "portable" ? "deck" : format);
    window.document.body.append(link);
    link.click();
    link.remove();
    setTimeout(() => URL.revokeObjectURL(url), 30_000);
  };

4. Fonts and external assets

Prepare actual fonts before PDF export. Respect font embedding permissions and replace restricted fonts when necessary. PPTX recipients need the same fonts installed; substitution can change wrapping and layout.

Output environments also need access to remote image, media and font URLs. Report permission, expiry and CORS failures rather than silently omitting content. Reopen downloaded portable and output files, especially those with media.

5. Motion, video and audio

Slide transitions and object animations use a timeline shared by presentation and video export. Final video is rendered rather than captured as a browser screen recording. Playback still depends on autoplay policies and codec support.

Audio appears as a selectable editor card, but that card is hidden from visual output. Check representative frames, trim boundaries and audio signals in both presentation playback and MP4 output.

6. Compatibility checks

Build a small fixture with the actual fonts, Korean, emoji, long paragraphs, tables, charts and media you use. Compare editor and presentation, verify PDF search/text order, PPTX editability/font substitution, and MP4 timing/audio.

Arbitrary PPTX/.key import is not supported. SVG imports convert supported paths into editable nodes and reject unsupported text/effects. Do not bypass validation to force an unsupported import.