# Demos

Every demo is a folder of [`examples/`](https://github.com/vguerand/recit/tree/main/examples) you
can run locally. Click a card to read its page (features, source code, interactive deck), or open
the demo fullscreen from there.

<StoryGallery
  decks={["starter", "tech-talk", "showcase", "pitch", "course", "mdx", "site"]}
  links={{
    starter: "/demos/starter",
    "tech-talk": "/demos/tech-talk",
    showcase: "/demos/showcase",
    pitch: "/demos/pitch",
    course: "/demos/course",
    mdx: "/demos/mdx",
    site: "/demos/site",
  }}
/>

## Which example for which need?

| Demo                          | Level        | What it shows                                            |
| ----------------------------- | ------------ | -------------------------------------------------------- |
| [Starter](/demos/starter)     | Beginner     | the minimum: plain Markdown, no configuration            |
| [Tech talk](/demos/tech-talk) | Beginner     | cards, quote, Mermaid diagram, speaker notes             |
| [Showcase](/demos/showcase)   | Intermediate | every layout, the full configuration, a custom component |
| [Pitch](/demos/pitch)         | Intermediate | 4:3 format, light theme, brand colors, fade transitions  |
| [Course](/demos/course)       | Intermediate | math, table, tabbed code, quiz with steps                |
| [MDX](/demos/mdx)             | Advanced     | stateful React components, expressions, imports          |
| [Site](/demos/site)           | Advanced     | publishing stories inside a Récit site                   |

## Run an example

```bash
pnpm install
pnpm build
pnpm --filter recit-example-deck-showcase dev
```

Every deck example also provides `build`, `export` (PDF) and `export:html`. Want to start from one?
See [Templates](/templates).