
<Hero />

## One source, many renderings

The source below is a story: plain Markdown, with a `---` line between scenes. Next to it, Récit
tells it as a deck. Click the deck, then use the arrow keys.

<SideBySide>
  <div>
    <Caption>Source</Caption>
    <SourceFile deck="one-source" title="stories/one-source.md" />
  </div>
  <div>
    <Caption>Deck</Caption>
    <StoryEmbed slug="one-source" />
  </div>
</SideBySide>

The same file also reads as a [documentation page](/one-source): each scene becomes a section,
without a single line changed.

## Every format

Each format is a way to tell the same source. The deck and the documentation page are available
today, and the [motion](https://motion.recit.dev) films already play in the browser; the others follow the
roadmap, one phase at a time.

<FormatGrid />

## Getting started

Récit is not published on npm yet: packages arrive with the public alpha. Until then, run it from
the repository (Node.js 22+ and pnpm).

```bash
git clone https://github.com/vguerand/recit.git
cd recit
pnpm install
pnpm build
```

Start an example deck with hot reload:

```bash
pnpm --filter recit-example-deck-starter dev
```

Then write your own story with the `recit` command, built in `packages/cli`:

```bash
alias recit="node $PWD/packages/cli/bin/recit.js"
recit init slides.md --config   # slides.md and recit.config.ts
recit dev slides.md --open      # live preview
recit export slides.md          # PDF, or --html for a single file
```

The [documentation](https://docs.recit.dev) walks through each step.

## Go further

<FeatureGrid cols={3}>
  <FeatureCard
    title="Docs"
    description="Writing, configuration, formats, CLI and reference."
    site="docs"
  />
  <FeatureCard
    title="Presentation"
    description="The deck format: gallery of decks and templates to copy."
    site="presentation"
  />
  <FeatureCard
    title="Motion"
    description="The motion format: films in Markdown, played in the browser and rendered to MP4."
    site="motion"
  />
  <FeatureCard
    title="Components"
    description="Every component, its props and its Markdown syntax."
    site="components"
  />
  <FeatureCard
    title="GitHub"
    description="Source code and issues."
    href="https://github.com/vguerand/recit"
  />
</FeatureGrid>
