# Récit documentation

**Récit** turns one Markdown (or MDX) source into many outputs. You write **scenes** separated by
`---` lines, Récit compiles them into a **story**, and a **format** renders that story: a slide deck
today, and later a video, a data report, a webtoon, a book, a roadmap, a calendar or web stories.

The first format, **deck**, is ready: grids, images, highlighted code, math, diagrams, progressive
steps, a presenter console, a smartphone remote, PDF export and single-file HTML export. Every deck
can also be embedded in a Récit site, as the pages of this one do.

## Quickstart

```bash
pnpm add -D @recit/cli
npx recit init slides.md
npx recit dev slides.md
```

:::note{title="Not on npm yet"}

The packages arrive with the public alpha (P5). Until then, run Récit from the repository:
`git clone https://github.com/vguerand/recit.git && pnpm install && pnpm build`, then
`pnpm --filter recit-example-deck-starter dev`.

:::

```md title="slides.md"
---
title: Lorem ipsum
---

--- layout=cover

# Hello 👋

--- layout=grid cols=2

# Two ideas

:::card
### Simple
Plain Markdown, nothing else.
:::

:::card
### Complete
Themes, exports, presenter console.
:::
```

The [quickstart](/documentation/getting-started/quickstart) explains each command, and the
[tutorial](/documentation/getting-started/tutorial) takes you from this file to a themed deck
published in a documentation site.

## Where to start?

<FeatureGrid cols={3}>
  <FeatureCard icon="📘" title="Documentation" description="Quickstart, tutorial, writing scenes, configuration, presenting and exporting." href="/documentation/getting-started/quickstart" />
  <FeatureCard icon="🧭" title="Formats" description="One source, many outputs: what is available today and what is coming next." href="/formats/overview" />
  <FeatureCard icon="🎨" title="Theme" description="Colors, typography, radius, footer, dark mode, aspect ratio and custom CSS." href="/theme/overview" />
  <FeatureCard icon="⌨️" title="CLI" description="recit init, dev, build and export, with every option." href="/documentation/reference/cli" />
  <FeatureCard icon="🧩" title="Components" description="Grid, Card, Callout, Step, Mermaid and the other components, in every format." site="components" />
  <FeatureCard icon="🖼️" title="Demos" description="The gallery of decks, with their source and a fullscreen preview." site="presentation" />
</FeatureGrid>