open-slide

Slide module exports

The shape the runtime expects from each slides/<id>/index.tsx.

slides/<id>/index.tsx
import type { Page, SlideMeta } from '@open-slide/core';

const Cover: Page = () => <div>{/* ... */}</div>;

export const meta: SlideMeta = {
  title: 'Cover',
  theme: 'corporate',
};

export const notes = ['Open with the analyst quote.'];

export default [Cover] satisfies Page[];

Default export

Page[] — the array of components, in display order. Each component fills its container; the runtime renders one at a time onto the 1920×1080 canvas.

type Page = ComponentType & {
  transition?: SlideTransition;
};

meta (optional)

Prop

Type

notes (optional)

Plain-text strings (line breaks preserved), index-aligned with the page array. Surfaced in the presenter view — see Present mode.

export const notes: (string | undefined)[] = [
  'Open with a smile.',
  undefined,
  'Pause for questions.',
];

transition (optional)

A module-level SlideTransition becomes the default animation between every page in the deck. Per-page overrides are assigned on the Page component itself. See SlideTransition for the full schema.

import type { SlideTransition } from '@open-slide/core';

export const transition: SlideTransition = {
  duration: 200,
  exit:  { /* … */ },
  enter: { /* … */ },
};

Imports from @open-slide/core

import {
  CANVAS_WIDTH,        // 1920
  CANVAS_HEIGHT,       // 1080
  ImagePlaceholder,    // sized empty placeholder — see /docs/reference/image-placeholder
  MorphElement,        // match an element across pages — see /docs/primitive/morph-element
} from '@open-slide/core';
import type {
  MorphElementProps,
  Page,
  SlideMeta,
  SlideModule,
  SlideTransition,     // per-page / module-level animations — see /docs/reference/slide-transitions
  MorphTransition,
  TransitionPhase,
  ImagePlaceholderProps,
} from '@open-slide/core';

On this page