---
title: Quickstart
description: Create a Odori project, author a JSX timeline, preview it instantly, and export it when the cut is ready.
sidebar:
  order: 1
---

## Give your agent one prompt

```text
Set up Odori video authoring in this folder, then install the Odori agent
skill: npx skills add allenzhou101/odori --skill odori-quickstart
--yes. Create a polished first video using real product evidence and
source-owned components. When you're done, start Studio so I can watch the
video while we work.
```

The skill contains the initialization decision, component starter set,
first-cut structure, visual defaults, and verification loop. You do not need a
separate studio or an MP4 render while authoring.

Its first question is whether to import a design system. Point it at a
repository, a token file, or a brand kit and it maps the colors, type, fonts,
logos, and motion into `videos/brands/`, which every video then inherits. Say
skip and it starts from Odori's defaults rather than inventing a palette.

## Create a project manually

```bash
pnpm create odori@latest product-stories
cd product-stories
pnpm install
```

Install the Odori quickstart skill when an agent will author the first cut:

```bash
npx skills add allenzhou101/odori \
  --skill odori-quickstart \
  --yes
```

Use the manual commands when you do not want an agent to initialize the project.

1. **Start the development server**

    Run `pnpm odori dev`. Odori starts [Studio](/docs/guides/studio) on
    `http://127.0.0.1:4300`. Studio discovers every `videos/**/video.tsx`
    composition and every `*.preview.tsx` component fixture.

2. **Create a video**

    Run `pnpm odori new launch`. The generator creates a typed React entry
    under `videos/launch/`.

3. **Add video components**

    Browse `pnpm odori registry`, then run
    `pnpm odori add @odori/title-reveal @odori/code-proof @odori/end-card`.
    Source is copied into `videos/components/` and belongs to your repository.

4. **Check the cut**

    Run `pnpm odori test`. Odori mounts every video, samples representative
    frames, and reports blank frames, content that escapes the canvas, and text
    too small to read.

5. **Export when ready**

    Run `pnpm odori export launch`, or start an export from Studio. Preview
    never requires an MP4 render.

## Generated project

<FileTree>

- videos/
  - layout.tsx
  - brands/
    - paper.ts
  - components/
    - title-reveal/
      - title-reveal.tsx
      - title-reveal.preview.tsx
    - end-card/
      - end-card.tsx
      - end-card.preview.tsx
  - launch/
    - video.tsx
- public/
  - fonts/
- odori.config.ts
- package.json

</FileTree>

In a standalone video project, Odori creates only the video-facing source. In a
Next.js project, `app/` and `videos/` remain siblings: routes are web entry
points; videos are render entry points.

## Your first video

```tsx title="videos/launch/video.tsx" lineNumbers
import {Scene, Video, defineVideoMetadata} from "odori";
import {EndCard} from "../components/end-card/end-card";
import {TitleReveal} from "../components/title-reveal/title-reveal";
import {productLayout} from "../layout";

export const metadata = defineVideoMetadata({
  title: "Hello, odori",
  layout: productLayout,
  duration: "8s",
});

export default function LaunchVideo() {
  return (
    <Video>
      <Scene duration="5s">
        <TitleReveal title="Video projects deserve a framework." />
      </Scene>
      <Scene duration="3s">
        <EndCard title="Built with odori" />
      </Scene>
    </Video>
  );
}
```

## Core commands

| Command | Purpose |
| --- | --- |
| `odori dev` | Discover project resources and start Studio |
| `odori init` | Add `videos/` and `odori.config.ts` to an existing project |
| `odori new <name>` | Generate a `video.tsx` entry |
| `odori add <components>` | Install editable component source |
| `odori registry` | List available components and their temporal contracts |
| `odori list` | Print discovered video IDs and formats |
| `odori inspect <id>` | Show resolved layout, inputs, scenes, and the frozen manifest |
| `odori still <id> --frame 120` | Render one deterministic frame |
| `odori test [id]` | Validate contracts and representative frames |
| `odori export <id>` | Render, mix audio, and encode a distributable file |
| `odori jobs` | List export jobs, their attempts, and their output |
| `odori diff` / `odori update` | Compare and apply upstream component changes |

Every command accepts `--input '{"headline":"..."}'` to supply schema-valid
inputs, and `still` and `export` accept `--output <path>`.

:::tip
Use live preview throughout authoring. Export only when you need a distributable
artifact, final codec verification, or production delivery.
:::