open-press

Runtime

Slides Architecture

How slide Presses are structured: Press markers, folder-per-slide source, theme CSS, core objects, and stable object identity.

OpenPress keeps deck order, per-slide source, shared deck UI, and theme CSS separate. Each slide remains directly editable, while the Press can still provide a coherent visual system.

press.tsx describes order

press/<slug>/press.tsx is the deck index. It registers playback order with <Slide id="..." />; each slide’s real composition lives in its own source file.

import { Press, Slide } from "@open-press/core";

export default function SlidePress() {
  return (
    <Press slug="slide" title="Deck Title" type="slides" page="slide-16-9">
      <Slide id="cover" />
      <Slide id="agenda" />
    </Press>
  );
}

Each slide has its own source file

Each slide lives at press/<slug>/slides/<id>/slide.tsx. That file is the visual source and usually composes Slide, Frame, Text, Line, MediaObject, and other core objects.

Folder-per-slide keeps the workflow practical:

  1. Authors and agents can edit one slide without changing a monolithic deck file.
  2. Git diffs and history stay readable.
  3. Workbench actions such as add, delete, and skip map to explicit source folders.

New slides start as blank, direct source

open-press slide add <id> --press <slug> creates a minimal slide source and registers its ID. Edit that source directly to build the slide’s actual composition.

Keep a one-off visual treatment in its slide. When a content-free visual primitive has a second real use, extract it into press/<slug>/ui/ or press/<slug>/components/. Keep deck-wide typography, color, spacing, and effects in press/<slug>/theme/default.css.

Object identity is expressed with primitives

Editable objects should not be hidden inside large compound wrapper props. Compose source with core objects directly:

  • Frame uses frameKey for identity.
  • Text, Line, and MediaObject use stable label values.
  • Use box for fixed placement. The 16:9 slide base canvas is 1920 x 1080.
  • Use Frame layout for flow constraints.
  • Put typography, color, spacing, and visual effects in theme CSS.

The engine derives full locators from these primitives for Workbench inline editing, comments, thumbnails, and preview. Authors and agents are responsible for stable local IDs and clear source structure.

See Core Object API for details.