Deck authoring

A Slida deck is a single .astro or .mdx file. Both formats render pages with the same layout system, but they use different authoring styles.

Layout defaults

Slida chooses a layout for every page:

Page 1 defaults to cover.
Page 2 and later default to default.
Explicit layout IDs must start with a lowercase letter and may contain lowercase letters, numbers, and hyphens.

Use an explicit layout when the selected theme provides a layout you want to use:

<layout id="default" />

Astro decks

Astro decks import Page and place only top-level <Page> components in the file:

---
import Page from "@slida/cli/page";
---

<Page title="Presentation title">
  <layout id="cover" />
  <h1>Presentation title</h1>
  <p>Presentation subtitle</p>
</Page>

<Page title="Content slide">
  <layout id="default" />
  <h1>Content slide</h1>
  <p>Write slide content with Astro components and HTML.</p>
</Page>

The <layout id="..." /> element is metadata. It must be a self-closing child of a page and is removed before the slide content is rendered.

MDX decks

MDX decks are split into pages with horizontal rules:

# Cover title

Cover subtitle

---

# Content slide

- Bullet
- Bullet

Slida wraps each MDX page in a generated <Page> component. A page may contain at most one <layout id="..." /> declaration. Empty pages are not valid, so avoid adjacent horizontal rules and trailing dividers without content.

Named slots

Themes can expose named slots for multi-region layouts. For example, the google-basic theme includes a two-column layout with left and right slots. Use Astro’s standard slot attribute to target those regions:

<Page title="Two-column slide">
  <layout id="two-column" />
  <h1>Two columns</h1>
  <p slot="left">Left side</p>
  <p slot="right">Right side</p>
</Page>

The same slot attributes work in MDX when you use JSX elements:

<layout id="two-column" />

# Two columns

<p slot="left">Left side</p>
<p slot="right">Right side</p>

Available layout IDs and slot names depend on the selected theme.