Create Slides

An OpenPress slide workspace is built from direct slide sources, not large layout wrappers. Each slide owns its composition; reusable deck UI and theme CSS stay local to that Press.

Use Slide, Frame, Text, Line, MediaObject, and other core objects directly. Put visual styling in theme CSS, editable copy in Text children, fixed placement in box, and flow constraints in Frame layout.

Step 1: Initialize the workspace

npm create @open-press@latest <project-name> -- --type slides

This creates a slide Press with a 16:9 page geometry. OpenPress slide coordinates use a 1920 x 1080 base canvas.

Step 2: Keep press.tsx as slide registration

press/<slug>/press.tsx should stay simple. It describes deck order; each slide’s actual layout lives in its slide 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" />
      <Slide id="statement" />
    </Press>
  );
}

Step 3: Add a blank slide source

node packages/core/engine/cli.mjs slide . add intro --press slide

The command creates slides/intro/slide.tsx and updates the Press registration. Replace the minimal placeholder with the slide’s actual composition.

press/slide/
  press.tsx
  theme/default.css
  slides/
    intro/slide.tsx

If the same content-free visual primitive is already used on another slide, place it in ui/ or components/ inside this Press. Keep one-off composition and content in the slide source.

Step 4: Write slide source with core objects

Slide source should use core objects directly instead of hiding editable content inside abstract wrapper props.

import { Frame, Line, Slide, Text } from "@open-press/core";

export default function CoverSlide() {
  return (
    <Slide id="cover" className="op-source-deck-slide">
      <Frame frameKey="canvas" chrome={false} className="op-source-deck-canvas">
        <Text as="p" label="date" box={{ x: 100, y: 80 }} className="op-source-deck-date">
          26 JUNE 2024
        </Text>
        <Text as="h1" label="title" box={{ x: 100, y: 360, w: 1155 }} className="op-source-deck-title">
          A line is length without breadth.
        </Text>
        <Line label="red-rule" box={{ x: 100, y: 774, w: 270, h: 4 }} className="op-source-deck-red-rule" />
      </Frame>
    </Slide>
  );
}

Step 5: Verify

npm run build

For local preview, run:

npm run dev:workspace

See Core Object API for object identity, label, box, and Frame layout rules.