Open Slide

https://open-slide.dev/docs
Admin
Open Slide is a slide framework built for coding agents that renders React-based presentations onto...
Tokens:9,663
Snippets:144
Trust Score:5.3
Update:1 month ago
Show doc for...
Tokens:
Raw
### Post-initialization commands

Source: https://open-slide.dev/docs/cli/init

Commands to navigate to the project directory, install dependencies, and start the development server.

```bash
cd my-deck
npm install
npm run dev
```

--------------------------------

### Initialize a new Open Slide project

Source: https://open-slide.dev/docs/getting-started

Use the CLI to scaffold a new workspace and start the development server.

```bash
npx @open-slide/cli init my-deck
cd my-deck
npm run dev
```

--------------------------------

### Run the development server

Source: https://open-slide.dev/docs/cli/dev

Commands to start the development server using various package managers.

```bash
open-slide dev
# or, via the generated script
npm run dev
```

--------------------------------

### Execute /apply-comments command

Source: https://open-slide.dev/docs/skills/apply-comments

Example output showing the execution of the command and the number of markers processed across files.

```text
› /apply-comments
✓ 3 markers · slides/q2-launch/index.tsx
✓ 1 marker  · slides/intro/index.tsx
```

--------------------------------

### Configure open-slide

Source: https://open-slide.dev/docs/cli/dev

Example configuration file for overriding default settings like the port and slides directory.

```typescript
import type { OpenSlideConfig } from '@open-slide/core';

const config: OpenSlideConfig = {
  port: 5174,
  slidesDir: 'slides',
};

export default config;
```

--------------------------------

### Basic ImagePlaceholder Usage

Source: https://open-slide.dev/docs/reference/image-placeholder

Example of importing and using the ImagePlaceholder component within a slide component.

```tsx
import { ImagePlaceholder } from '@open-slide/core';

const Hero = () => (
  <ImagePlaceholder hint="Product hero screenshot" width={1280} height={720} />
);

export default [Hero];
```

--------------------------------

### Initialize a new project

Source: https://open-slide.dev/docs

Use the CLI to scaffold a new open-slide project.

```bash
npx @open-slide/cli init
```

--------------------------------

### Build and preview the project

Source: https://open-slide.dev/docs/getting-started

Generate a static build for deployment and preview the output locally.

```bash
npm run build      # static build to dist/
npm run preview    # preview the static build locally
```

--------------------------------

### Build and Preview Static Site

Source: https://open-slide.dev/docs/core-feature/export

Use these commands to generate a static site in the dist/ directory and verify the output locally.

```bash
npm run build
npm run preview     # serves dist/ for sanity-checking
```

--------------------------------

### Run open-slide preview

Source: https://open-slide.dev/docs/cli/preview

Execute the preview command to serve the production build locally.

```bash
open-slide preview
# or
npm run preview
```

--------------------------------

### Initialize a new workspace

Source: https://open-slide.dev/docs/cli/init

Scaffold a new project in the specified directory or the current folder if omitted.

```bash
npx @open-slide/cli init [directory]
```

--------------------------------

### Build the project

Source: https://open-slide.dev/docs/cli/build

Commands to trigger a static build of the slides.

```bash
open-slide build
# or
npm run build
```

--------------------------------

### npx @open-slide/cli init

Source: https://open-slide.dev/docs/cli/init

Scaffolds a new open-slide workspace in the specified directory.

```APIDOC
## CLI Command: init

### Description
Scaffold a new workspace. If the directory is omitted, an interactive run prompts for one (defaulting to the current folder); non-interactive runs use the current folder. If the directory is provided and doesn't exist, it is created.

### Usage
`npx @open-slide/cli init [directory]`

### Flags
- **-f, --force** (boolean) - Optional - Scaffold into the target even if it's not empty.
- **-n, --name <name>** (string) - Optional - Override the generated package.json name.
- **--use-npm** (boolean) - Optional - Install with npm.
- **--use-pnpm** (boolean) - Optional - Install with pnpm.
- **--use-yarn** (boolean) - Optional - Install with yarn.
- **--use-bun** (boolean) - Optional - Install with bun.
- **--no-install** (boolean) - Optional - Skip dependency installation.
- **--no-git** (boolean) - Optional - Skip git init and the initial commit.
```

--------------------------------

### Generated project structure

Source: https://open-slide.dev/docs/cli/init

The directory layout created after running the init command.

```text
my-deck/
├── slides/
│   └── getting-started/    # starter slide + its assets
├── themes/                 # empty — shared design systems
├── assets/                 # global assets (@assets/* alias)
├── .agents/
│   └── skills/             # bundled agent skills
├── .claude/
│   └── skills/             # symlinks into .agents/skills/
├── open-slide.config.ts    # framework config
├── AGENTS.md               # agent rules
├── CLAUDE.md               # symlink to AGENTS.md
├── package.json
├── tsconfig.json
└── netlify.toml / vercel.json   # one-click deploy configs
```

--------------------------------

### Apply Theme via CLI

Source: https://open-slide.dev/docs/core-feature/themes

Command to invoke the agent to create a slide using a specific theme.

```bash
/create-slide for "Q3 board update — use the corporate theme"
```

--------------------------------

### Runtime CLI scripts in package.json

Source: https://open-slide.dev/docs/cli/overview

Standard scripts configuration for executing Open-Slide runtime commands via npm.

```json
{
  "scripts": {
    "dev": "open-slide dev",
    "build": "open-slide build",
    "preview": "open-slide preview",
    "sync:skills": "open-slide sync:skills"
  }
}
```

--------------------------------

### View the generated project structure

Source: https://open-slide.dev/docs/getting-started

The workspace includes directories for slides, themes, agent skills, and configuration files.

```text
my-deck/
├── slides/
│   └── getting-started/    # your first slide
├── themes/                 # shared design systems
├── .agents/skills/         # bundled agent skills
├── open-slide.config.ts    # framework config
├── AGENTS.md               # agent rules (CLAUDE.md symlinks to it)
└── package.json
```

--------------------------------

### Run sync:skills command

Source: https://open-slide.dev/docs/cli/sync-skills

Execute the sync command directly or via npm to refresh skill definitions.

```bash
open-slide sync:skills
# or
npm run sync:skills
```

--------------------------------

### Build output structure

Source: https://open-slide.dev/docs/cli/build

The directory structure generated after running the build command.

```text
dist/
├── index.html
├── assets/
│   └── ...hashed files...
└── ...
```

--------------------------------

### Import core utilities

Source: https://open-slide.dev/docs/reference/slide-meta

Commonly used constants, components, and types imported from the @open-slide/core package.

```typescript
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';
```

--------------------------------

### Importing Assets in React

Source: https://open-slide.dev/docs/core-feature/assets-manager

Demonstrates how to import slide-local assets using relative paths and global assets using the @assets Vite alias.

```typescript
import cover from './assets/cover.png';      // slide-local
import chart from './assets/chart.svg';      // slide-local
import logo from '@assets/acme.svg';         // global

const Cover = () => (
  <>
    <img src={cover} alt="" />
    <img src={logo} alt="" />
  </>
);
```

--------------------------------

### Basic Configuration Template

Source: https://open-slide.dev/docs/reference/config

The default structure for the open-slide.config.ts file using the OpenSlideConfig type.

```typescript
import type { OpenSlideConfig } from '@open-slide/core';

const config: OpenSlideConfig = {};

export default config;
```

--------------------------------

### Configure Build Settings

Source: https://open-slide.dev/docs/core-feature/export

Customize the exported presentation by modifying the build object in your configuration file.

```typescript
import type { OpenSlideConfig } from '@open-slide/core';

const config: OpenSlideConfig = {
  build: {
    showSlideBrowser: false,    // hide the deck index
    showSlideUi: false,         // hide on-canvas UI (toolbar etc.)
    allowHtmlDownload: false,   // hide the export menu (HTML / PDF / PPTX)
  },
};

export default config;
```

--------------------------------

### ImagePlaceholder Sizing Modes

Source: https://open-slide.dev/docs/reference/image-placeholder

Demonstrates fixed-size placeholders versus placeholders that fill their parent container.

```tsx
// Fixed
<ImagePlaceholder hint="Q3 revenue chart" width={960} height={540} />

// Fill a flex/grid cell
<div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 32 }}>
  <ImagePlaceholder hint="Before — old dashboard" />
  <ImagePlaceholder hint="After — new dashboard" />
</div>
```

--------------------------------

### Implementing Incremental Content Reveal

Source: https://open-slide.dev/docs/primitive/step

Use Steps and Step components to wrap content that should be revealed sequentially. The final state of the page remains a complete composition.

```tsx
import { Step, Steps, type Page } from '@open-slide/core';

const Problem: Page = () => (
  <section style={{ width: '100%', height: '100%', padding: 120 }}>
    <h1>The audience reads faster than you speak.</h1>

    <Steps>
      <Step>
        <p>Showing every bullet at once invites pre-reading.</p>
      </Step>
      <Step>
        <p>Reveal the setup, then the consequence, then the turn.</p>
      </Step>
      <Step>
        <p>The final page state still reads as one complete composition.</p>
      </Step>
    </Steps>
  </section>
);
```

--------------------------------

### Define slide transition

Source: https://open-slide.dev/docs/reference/slide-meta

Configuration for module-level animations between pages.

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

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

--------------------------------

### Theme File Layout

Source: https://open-slide.dev/docs/core-feature/themes

The directory structure for theme files, where each theme consists of a markdown recipe and a corresponding demo file.

```text
themes/
├── corporate.md
├── corporate.demo.tsx
├── editorial.md
├── editorial.demo.tsx
├── retro-print.md
└── retro-print.demo.tsx
```

--------------------------------

### Workspace file structure

Source: https://open-slide.dev/docs/cli/sync-skills

Visual representation of the directory structure managed by the sync process.

```text
.agents/
└── skills/
    └── <name>/        # canonical copy from @open-slide/core
.claude/
└── skills/
    └── <name>         # symlink to ../../.agents/skills/<name>
```

--------------------------------

### Create a slide using an agent

Source: https://open-slide.dev/docs/getting-started

Invoke the agent skill within an agent-aware editor to generate slide content based on a prompt.

```text
/create-slide for "Q2 launch — 3 chapters, mixed text density, subtle motion, dark aesthetic"
```

--------------------------------

### Theme Demo Component

Source: https://open-slide.dev/docs/core-feature/themes

A TypeScript module used for the live preview of a theme in the development UI.

```typescript
import type { Page } from '@open-slide/core';

const Cover: Page = () => (/* …inline Title / Footer using theme tokens… */);
const Content: Page = () => (/* … */);

export default [Cover, Content];
```

--------------------------------

### Steps and Step Components

Source: https://open-slide.dev/docs/primitive/step

The Steps component acts as a container for multiple Step components, which control the incremental reveal of content.

```APIDOC
## Steps Component

### Description
A container component that manages the reveal sequence of its child Step components.

### Usage
Wrap multiple `Step` components within a `Steps` component to enable incremental reveal behavior.

## Step Component

### Description
A wrapper component that defines a specific piece of content to be revealed during the stepping process.

### Props
- **duration** (number) - Optional - The duration of the fade-in animation in milliseconds. Defaults to 180.

### Reveal Rules
- `Step` must be a direct child of `Steps` to function as a step.
- Non-`Step` children inside `Steps` render immediately.
- Multiple `Steps` groups on one page compose in document order.
```

--------------------------------

### Configure Deployment Subpath

Source: https://open-slide.dev/docs/reference/config

Set the base property to deploy the build under a specific sub-directory.

```typescript
const config: OpenSlideConfig = {
  base: '/my-slides/',
};
```

--------------------------------

### Project Asset Directory Structure

Source: https://open-slide.dev/docs/core-feature/assets-manager

Visual representation of the project structure showing the separation between global assets and slide-local assets.

```text
project-root/
├── assets/                  # global — shared across decks
│   ├── acme.svg
│   └── avatar.png
└── slides/
    └── q2-launch/
        ├── index.tsx
        └── assets/          # slide-local — only this deck
            ├── cover.png
            ├── chart.svg
            └── intro.mp4
```

--------------------------------

### Define presenter notes

Source: https://open-slide.dev/docs/reference/slide-meta

An array of strings for presenter notes, index-aligned with the page array.

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

--------------------------------

### Configure morph transition with custom timing

Source: https://open-slide.dev/docs/reference/slide-transitions

Define a SlideTransition object with specific duration, enter/exit keyframes, and a custom morph configuration.

```typescript
export const transition: SlideTransition = {
  duration: 900,
  enter: { keyframes: [{ opacity: 0.35 }, { opacity: 1 }] },
  exit: { keyframes: [{ opacity: 1 }, { opacity: 0.35 }] },
  morph: {
    duration: 900,
    easing: 'cubic-bezier(0.22, 1, 0.36, 1)',
  },
};
```

--------------------------------

### Define a slide module

Source: https://open-slide.dev/docs/reference/slide-meta

The standard structure for a slide module, including the default export of pages and optional metadata.

```typescript
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[];
```

--------------------------------

### Theme Markdown Template

Source: https://open-slide.dev/docs/core-feature/themes

A template for defining theme properties such as palette, typography, and voice in a markdown file.

```markdown
---
name: Corporate
description: Calm corporate look with a single accent.
mode: dark
---

# Corporate

## Palette
- ink: #0a0a0c
- accent: #4a52b5
- mint: #1f8458

## Typography
- display: 'Söhne', system-ui
- mono: 'JetBrains Mono'

## Voice
- Tight, declarative, never coy.
- One concept per slide.
```

--------------------------------

### Define a basic slide page

Source: https://open-slide.dev/docs/primitive/page

Implement a slide using the Page type and useSlidePageNumber hook. The default export must be an array of pages defining the deck order.

```typescript
import { type Page, type SlideMeta, useSlidePageNumber } from '@open-slide/core';

const Cover: Page = () => {
  const { current, total } = useSlidePageNumber();

  return (
    <section
      style={{
        width: '100%',
        height: '100%',
        background: '#08090a',
        color: '#f7f8f8',
        position: 'relative',
        overflow: 'hidden',
      }}
    >
      <p>{current} / {total}</p>
      <h1>Q2 launch</h1>
    </section>
  );
};

export const meta: SlideMeta = {
  title: 'Q2 launch',
};

export default [Cover] satisfies Page[];
```

--------------------------------

### Define speaker notes

Source: https://open-slide.dev/docs/core-feature/present-mode

Create an array of strings aligned with the page index to display speaker notes. Use undefined to omit notes for specific slides.

```javascript
export const notes = [
  'Open with a smile. Mention the analyst quote from yesterday.',
  undefined,
  'Pause here for questions. The chart is a hand-off.',
];
```

--------------------------------

### Configuring Step Reveal Duration

Source: https://open-slide.dev/docs/primitive/step

Customize the reveal animation speed using the duration prop. Non-Step children inside a Steps container will render immediately.

```tsx
<Steps>
  <h2>Always visible</h2>
  <Step duration={240}>First reveal</Step>
  <Step>Second reveal</Step>
</Steps>
```

--------------------------------

### Use direction hook in CSS calc

Source: https://open-slide.dev/docs/reference/slide-transitions

Utilize the --osd-dir variable within a calc function to mirror animations based on navigation direction.

```javascript
{ transform: 'translateX(calc(var(--osd-dir, 1) * 8px))' },
{ transform: 'translateX(0)' },
```

--------------------------------

### Define a slide component

Source: https://open-slide.dev/docs

Create a slide by exporting an array of React components that fill the 1920x1080 container.

```typescript
import type { Page, SlideMeta } from '@open-slide/core';

const Cover: Page = () => (
  <div style={{ width: '100%', height: '100%', background: '#08090a', color: '#f7f8f8' }}>
    <h1 style={{ fontSize: 188, letterSpacing: '-0.04em' }}>
      Hello, <em style={{ color: '#7170ff' }}>open-slide</em>.
    </h1>
  </div>
);

export const meta: SlideMeta = { title: 'Getting started', theme: 'corporate' };
export default [Cover] satisfies Page[];
```

--------------------------------

### Configuring Morph Transition

Source: https://open-slide.dev/docs/primitive/morph-element

Enable morphing in the SlideTransition object to trigger the animation between pages.

```typescript
export const transition: SlideTransition = {
  duration: 600,
  morph: true,
};
```

--------------------------------

### SlideTransition Schema

Source: https://open-slide.dev/docs/reference/slide-transitions

The structure for defining slide transitions, including duration, easing, and specific phases for entering, exiting, and morphing.

```APIDOC
## SlideTransition

### Properties
- **duration** (number) - Required - The duration of the transition in milliseconds.
- **easing** (string) - Optional - The easing function for the transition.
- **enter** (TransitionPhase) - Optional - The animation phase for entering the slide.
- **exit** (TransitionPhase) - Optional - The animation phase for exiting the slide.
- **morph** (boolean | MorphTransition) - Optional - Configuration for morphing elements between slides.

## TransitionPhase

### Properties
- **keyframes** (Keyframe[] | PropertyIndexedKeyframes) - Required - The keyframes for the animation.
- **duration** (number) - Optional - Duration for this specific phase.
- **easing** (string) - Optional - Easing function for this phase.
- **delay** (number) - Optional - Delay before this phase starts.

## MorphTransition

### Properties
- **duration** (number) - Optional - Duration for the morph animation.
- **easing** (string) - Optional - Easing function for the morph.
- **delay** (number) - Optional - Delay before the morph starts.
```

--------------------------------

### ImagePlaceholder

Source: https://open-slide.dev/docs/reference/image-placeholder

A component that renders a sized, dashed box with a hint label, used as a placeholder for images in slide layouts.

```APIDOC
## ImagePlaceholder

### Description
A typed stand-in for a real image. It renders a sized, dashed box with a hint label to reserve space in a layout before the final image asset is available.

### Props
- **hint** (string) - Required - Describes the content to be supplied.
- **width** (number) - Optional - The fixed width of the placeholder.
- **height** (number) - Optional - The fixed height of the placeholder.
- **style** (CSSProperties) - Optional - Custom styles for the component.
- **className** (string) - Optional - CSS class names for the component.

### Usage Example
```tsx
import { ImagePlaceholder } from '@open-slide/core';

// Fixed size
<ImagePlaceholder hint="Product hero screenshot" width={1280} height={720} />

// Fill parent
<ImagePlaceholder hint="Dashboard screenshot" />
```
```

--------------------------------

### Placeholder Replacement Structure

Source: https://open-slide.dev/docs/reference/image-placeholder

The structure of the img element generated by the replacement workflow.

```tsx
<img
  src={<ident>}
  alt="<hint>"
  style={{ width, height, objectFit: 'cover', objectPosition: '50% 50%' }}
/>
```

--------------------------------

### Define Page type

Source: https://open-slide.dev/docs/reference/slide-meta

The Page type definition used for components in the slide deck.

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

--------------------------------

### Apply per-page transition overrides

Source: https://open-slide.dev/docs/primitive/page

Attach a SlideTransition object to a Page component to customize animation behavior for specific slides.

```typescript
import type { Page, SlideTransition } from '@open-slide/core';

const Cover: Page = () => <section>…</section>;

const coverTransition: SlideTransition = {
  duration: 240,
  enter: {
    keyframes: [
      { opacity: 0, transform: 'translateY(8px)' },
      { opacity: 1, transform: 'translateY(0)' },
    ],
  },
};

Cover.transition = coverTransition;
```

--------------------------------

### Implementing MorphElement in a Slide

Source: https://open-slide.dev/docs/primitive/morph-element

Wrap visual objects with MorphElement using a shared ID to enable morphing transitions between pages.

```typescript
import { MorphElement, type Page, type SlideTransition } from '@open-slide/core';

const Token = ({ x, y, size }: { x: number; y: number; size: number }) => (
  <MorphElement id="token">
    <div
      style={{
        position: 'absolute',
        left: x,
        top: y,
        width: size,
        height: size,
        borderRadius: size * 0.24,
        background: 'var(--osd-accent)',
      }}
    />
  </MorphElement>
);

const Start: Page = () => <Token x={160} y={180} size={180} />;
const End: Page = () => <Token x={1420} y={720} size={96} />;

export const transition: SlideTransition = {
  duration: 700,
  morph: {
    duration: 700,
    easing: 'cubic-bezier(0.22, 1, 0.36, 1)',
  },
};

export default [Start, End] satisfies Page[];
```

--------------------------------

### Define a SlideTransition for a deck

Source: https://open-slide.dev/docs/primitive/transition

Exports a SlideTransition object within a slide module to set default enter and exit animations for the deck.

```typescript
import type { Page, SlideTransition } from '@open-slide/core';

const Cover: Page = () => <section>…</section>;
const Agenda: Page = () => <section>…</section>;

export const transition: SlideTransition = {
  duration: 220,
  exit: {
    duration: 140,
    easing: 'cubic-bezier(0.4, 0, 1, 1)',
    keyframes: [
      { opacity: 1, transform: 'translateY(0)' },
      { opacity: 0, transform: 'translateY(-4px)' },
    ],
  },
  enter: {
    duration: 220,
    delay: 80,
    easing: 'cubic-bezier(0, 0, 0.2, 1)',
    keyframes: [
      { opacity: 0, transform: 'translateY(6px)' },
      { opacity: 1, transform: 'translateY(0)' },
    ],
  },
};

export default [Cover, Agenda] satisfies Page[];
```

--------------------------------

### Override SlideTransition on a specific page

Source: https://open-slide.dev/docs/primitive/transition

Sets a page-specific transition override by assigning a SlideTransition object to the Page.transition property.

```typescript
const Cover: Page = () => <section>…</section>;
const Agenda: Page = () => <section>…</section>;

export const transition: SlideTransition = {
  duration: 220,
  enter: {
    keyframes: [{ opacity: 0 }, { opacity: 1 }],
  },
};

Agenda.transition = {
  duration: 320,
  enter: {
    keyframes: [
      { opacity: 0, transform: 'scale(0.98)' },
      { opacity: 1, transform: 'scale(1)' },
    ],
  },
};
```
Tokens:
Raw