# Decks written in Markdown

**Récit** turns a Markdown (or MDX) file into a slide deck. The deck below is one: click it, then
press → to advance, :kbd[S] for the presenter console or :kbd[T] to switch theme.

<StoryEmbed slug="hero" />

## Example decks

Every card below is a **real deck** compiled from the
[`examples/`](https://github.com/vguerand/recit/tree/main/examples) folder of the repository. Click
one to read its page: features, source code and an interactive preview.

<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",
  }}
/>

## The deck format

<FeatureGrid cols={4}>
  <FeatureCard icon="🖥️" title="Presenter console" description="Current and next slide, speaker notes, timer and estimated duration, on a second screen." site="docs" href="/formats/deck/presenter-console" />
  <FeatureCard icon="📱" title="Smartphone remote" description="Scan a QR code and drive the deck from your phone on the local network." site="docs" href="/formats/deck/smartphone-remote" />
  <FeatureCard icon="🪜" title="Steps" description="Reveal lists, cards and answers one by one with :::step blocks." href="/demos/course" />
  <FeatureCard icon="📝" title="Speaker notes" description="A :::notes block per slide, shown in the console and optionally in the PDF." href="/demos/tech-talk" />
  <FeatureCard icon="📄" title="PDF and HTML export" description="One PDF page per slide, or a single self-contained HTML file to share anywhere." href="/templates" />
  <FeatureCard icon="∑" title="KaTeX math" description="Inline and display formulas written in plain LaTeX, rendered at build time." href="/demos/course" />
  <FeatureCard icon="🔀" title="Mermaid diagrams" description="Flowcharts and sequence diagrams from a fenced code block." href="/demos/site" />
  <FeatureCard icon="🧩" title="MDX components" description="Grid, Card, Callout, Step and your own stateful React components." href="/demos/mdx" />
</FeatureGrid>

## Start a deck

<TutorialSteps>
  <TutorialStep title="Create a deck" duration="10 s">
    `recit init` writes a starter `slides.md` (add `--config` for a `recit.config.ts`).

    ```bash
    npx recit init slides.md
    ```

  </TutorialStep>
  <TutorialStep title="Write with live reload" duration="1 min">
    `recit dev` serves the deck with hot reload. Add `--remote` to drive it from your phone.

    ```bash
    npx recit dev slides.md
    ```

  </TutorialStep>
  <TutorialStep title="Build a static site" duration="10 s">
    `recit build` writes `index.html` and its assets to `./dist`, ready for any static host.

    ```bash
    npx recit build slides.md
    ```

  </TutorialStep>
  <TutorialStep title="Export" duration="10 s">
    `recit export` writes a PDF, or a single portable HTML file with `--html`.

    ```bash
    npx recit export slides.md
    npx recit export slides.md --html
    ```

  </TutorialStep>
</TutorialSteps>

Prefer a richer starting point? Copy one of the [templates](/templates). The full syntax is
documented on [docs.recit.dev](https://docs.recit.dev).