Slides

Basics

Slides are separated by --- and may contain YAML frontmatter:

---
layout: Section
---

# Big Idea

Content here.

Layout names are PascalCase. If no layout: is specified, Default is used.

Layouts receive a title prop extracted from the first # heading in the slide, plus any additional frontmatter fields as props.

Multiple MDX Files

The deck entry file defaults to deck.mdx, and --deck <file.mdx> can select another root document. Additional MDX files are included via standard ESM imports:

import Intro from './slides/intro.mdx'
import Demo from './slides/demo.mdx'

<Intro />

<Demo />

How Honeydeck Distinguishes MDX from Components

• Imports from .mdx files → slide-structural (creates slide boundaries).
• Imports from .tsx/.ts/.jsx/.js or packages → normal inline components.

import DemoSlides from './demo.mdx'   // slide group
import Chart from './Chart'            // normal inline component

Slide Expansion

If an imported .mdx file contains --- separators, those slides are expanded at the location where the component is rendered. Rendering an imported MDX component always creates slide boundaries around it.

Frontmatter in Imported Files

• The first frontmatter block of the deck entry file defines deck-level settings and first-slide settings.
• Frontmatter in imported MDX files is slide-level only — they cannot define deck settings.

Default Layouts

Honeydeck's built-in defaults are clean and minimal. They provide:

Two-Column Layout

Uses explicit slot components:

---
layout: TwoCol
---

import { Left, Right } from '@honeydeck/honeydeck/layouts/TwoCol'

<Left>
## Pros
- Fast
- Simple
</Left>

<Right>
## Cons
- Limited
</Right>

Image Layout

Displays a specified image prominently (not as background):

---
layout: Image
image: /diagrams/architecture.png
darkImage: /diagrams/architecture-dark.png
---

# System Architecture

Caption below the image.

Side Image Layouts

Use ImageLeft or ImageRight when the image should sit beside the slide content:

---
layout: ImageLeft
image: /photos/product.jpg
darkImage: /photos/product-dark.jpg
alt: Product detail
---

# Product Detail

Short supporting copy beside the image.

Assets

Static files live in /public. Reference them with /public/…:

<img src="/public/cover.jpg" />