Tech talk | Presentation

A conference talk: cover, card grid, quote and Mermaid diagram, with speaker notes on every slide. Slide options are written as JSON (--- { "layout": "grid" }).

BeginnerCardsMermaidSpeaker notesJSON options

pnpm --filter recit-example-deck-tech-talk dev

▶ Open the demoexamples/deck-tech-talk/slides.md

The demo

Click the deck, then use ← → · 5 slides · 00:46Open fullscreen →

Try it

Open the presenter console (S): the notes of each slide are shown.
Give the Mermaid diagram a title with title="…" after the opening fence.
Add a third card and "cols": 3.

Source code

---
title: Lorem Ipsum Talk
description: "A conference talk: card grid, quote, Mermaid diagram and speaker notes."
lang: en
---

--- { "layout": "center", "id": "tech-cover" }

# Lorem Ipsum Talk 2026
### Dolor sit amet consectetur

**Adipiscing Elit** • *Sed do eiusmod*

:::notes
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor.
:::

--- { "layout": "grid", "cols": 2, "id": "architecture" }

# Tempor incididunt

:::card
### 🚀 Ut labore
- Et dolore magna aliqua
- Ut enim ad minim veniam
- Quis nostrud exercitation
:::

:::card
### 🎨 Ullamco laboris
- Nisi ut aliquip ex ea
- Commodo consequat
- Duis aute irure dolor
:::

:::notes
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris.
:::

--- { "layout": "center", "id": "quote" }

> "Excepteur sint occaecat cupidatat non proident."
>
> — Lorem Ipsum

:::notes
Sunt in culpa qui officia deserunt mollit anim id est laborum.
:::

--- { "layout": "default", "id": "flow-mermaid" }

# Fluxus lorem

```mermaid
graph LR
  A[Lorem] --> B[Ipsum]
  B --> C{Dolor}
  C -- Sit --> D[Amet]
  D --> E[Consectetur]
```

:::notes
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum.
:::

--- { "layout": "center", "id": "fin" }

# Gratias!
### Quaestiones & responsa