# Odori

> A React video framework with file-system conventions, source-owned components, instant preview, and production rendering.

## Docs

- [Docs](https://www.odori.dev/docs): Odori is the application framework for React video, with conventions, components, preview, and production rendering around a first-class videos folder.
- [Quickstart](https://www.odori.dev/docs/quickstart): Create a Odori project, author a JSX timeline, preview it instantly, and export it when the cut is ready.

### Core concepts

- [Project structure](https://www.odori.dev/docs/concepts/project-structure): The videos source root and the special files Odori discovers, inherits, and compiles.
- [The video file](https://www.odori.dev/docs/concepts/video-files): Author timelines as normal JSX while exporting static metadata for discovery and production rendering.
- [Preview and render lifecycle](https://www.odori.dev/docs/concepts/lifecycle): One prepared manifest drives live preview, deterministic stills, tests, and on-demand encoded exports.

### Guides

- [Video components](https://www.odori.dev/docs/guides/components): Install polished, temporal React components as source and compose them directly inside video.tsx.
- [Studio](https://www.odori.dev/docs/guides/studio): The filesystem-driven workspace for discovering, previewing, and stress-testing Odori videos and components.
- [Layouts and brands](https://www.odori.dev/docs/guides/layouts): Inherit format, typography, motion, safe areas, audio policy, and design tokens through the videos tree.
- [Audio](https://www.odori.dev/docs/guides/audio): Place sound on the timeline declaratively, preview it against the frame clock, and mix it into the export.
- [Data and assets](https://www.odori.dev/docs/guides/data): Resolve async work before playback, freeze mutable inputs, and keep frame rendering deterministic.
- [Next.js integration](https://www.odori.dev/docs/guides/nextjs): Use one repository for web routes and videos without coupling the two entry systems.

### Reference

- [Authoring API](https://www.odori.dev/docs/reference/api): The public React and TypeScript surface for Odori videos, layouts, inputs, preparation, and assets.
- [CLI](https://www.odori.dev/docs/reference/cli): Every odori command, its flags, and what it writes.
- [Odori vs Remotion vs HyperFrames](https://www.odori.dev/docs/reference/comparison): How the three authoring models in this repository differ in timeline, discovery, components, preview, and export.
- [Alternative structures](https://www.odori.dev/docs/reference/alternatives): Other project and authoring models Odori could support, and why videos plus JSX is the default.