{ "slug": "video/quickstart", "title": "Video quickstart", "description": "Create, preview, render, and inspect a Cuitty Video composition.", "url": "https://cuitty.com/docs/video/quickstart", "markdown_url": "https://cuitty.com/docs/video/quickstart.md", "json_url": "https://cuitty.com/docs/video/quickstart.json", "frontmatter": { "title": "Video quickstart", "description": "Create, preview, render, and inspect a Cuitty Video composition.", "order": 1, "section": "Video", "updatedAt": "2026-05-24" }, "headings": [ { "depth": 1, "slug": "video-quickstart", "text": "Video quickstart" }, { "depth": 2, "slug": "install-the-workspace", "text": "Install the workspace" }, { "depth": 2, "slug": "create-a-composition", "text": "Create a composition" }, { "depth": 2, "slug": "preview-the-composition", "text": "Preview the composition" }, { "depth": 2, "slug": "render-the-video", "text": "Render the video" }, { "depth": 2, "slug": "next-steps", "text": "Next steps" } ], "body_markdown": "# Video quickstart\n\nCuitty Video turns a TypeScript composition or YAML document into a rendered video. The local pipeline compiles the composition into IR, renders frames with Playwright, and encodes the final artifact with FFmpeg.\n\n## Install the workspace\n\nFrom the video repository:\n\n```bash\ncd ~/Code/cuitty/video\nbun install\nbun run typecheck\n```\n\nRendering requires FFmpeg and a Playwright-compatible browser on the machine that runs the renderer.\n\n## Create a composition\n\nCreate `examples/hello.yaml`:\n\n```yaml\ncomposition:\n id: hello-video\n width: 1280\n height: 720\n fps: 30\n duration: 5s\n\nlayers:\n - id: background\n render:\n type: gradient\n colors: [\"#0f172a\", \"#312e81\"]\n direction: \"135deg\"\n\n - id: title\n clips:\n - id: intro-title\n start: 0s\n end: 5s\n render:\n type: text\n text: \"Hello from Cuitty Video\"\n fontSize: 64\n color: \"#ffffff\"\n animate:\n - property: opacity\n from: 0\n to: 1\n start: 0s\n duration: 1s\n easing: cubic-out\n\noutput:\n codec: h264\n crf: 18\n```\n\n## Preview the composition\n\nUse the CLI to validate the file and print its timeline summary:\n\n```bash\nbun --cwd packages/cli src/index.ts preview ../../examples/hello.yaml\n```\n\nInspect a single frame:\n\n```bash\nbun --cwd packages/cli src/index.ts preview ../../examples/hello.yaml --frame 60\n```\n\n## Render the video\n\nRender to MP4:\n\n```bash\nmkdir -p output\nbun --cwd packages/cli src/index.ts render ../../examples/hello.yaml -o ../../output/hello.mp4 --codec h264 --crf 18\n```\n\nUse `--dry-run` when you want to parse and validate without invoking Playwright or FFmpeg:\n\n```bash\nbun --cwd packages/cli src/index.ts render ../../examples/hello.yaml --dry-run\n```\n\n## Next steps\n\n- Use the TypeScript SDK when the timeline is generated from code or application data.\n- Use YAML when compositions should live in config, tests, or content workflows.\n- Use [CLI reference](/docs/video/cli) for automation commands.\n- Use [E2E visibility](/docs/video/e2e) to leave inspectable render artifacts.", "body_html": "

Video quickstart

\n

Cuitty Video turns a TypeScript composition or YAML document into a rendered video. The local pipeline compiles the composition into IR, renders frames with Playwright, and encodes the final artifact with FFmpeg.

\n

Install the workspace

\n

From the video repository:

\n
cd ~/Code/cuitty/video\nbun install\nbun run typecheck
\n

Rendering requires FFmpeg and a Playwright-compatible browser on the machine that runs the renderer.

\n

Create a composition

\n

Create examples/hello.yaml:

\n
composition:\n  id: hello-video\n  width: 1280\n  height: 720\n  fps: 30\n  duration: 5s\n\nlayers:\n  - id: background\n    render:\n      type: gradient\n      colors: [\"#0f172a\", \"#312e81\"]\n      direction: \"135deg\"\n\n  - id: title\n    clips:\n      - id: intro-title\n        start: 0s\n        end: 5s\n        render:\n          type: text\n          text: \"Hello from Cuitty Video\"\n          fontSize: 64\n          color: \"#ffffff\"\n        animate:\n          - property: opacity\n            from: 0\n            to: 1\n            start: 0s\n            duration: 1s\n            easing: cubic-out\n\noutput:\n  codec: h264\n  crf: 18
\n

Preview the composition

\n

Use the CLI to validate the file and print its timeline summary:

\n
bun --cwd packages/cli src/index.ts preview ../../examples/hello.yaml
\n

Inspect a single frame:

\n
bun --cwd packages/cli src/index.ts preview ../../examples/hello.yaml --frame 60
\n

Render the video

\n

Render to MP4:

\n
mkdir -p output\nbun --cwd packages/cli src/index.ts render ../../examples/hello.yaml -o ../../output/hello.mp4 --codec h264 --crf 18
\n

Use --dry-run when you want to parse and validate without invoking Playwright or FFmpeg:

\n
bun --cwd packages/cli src/index.ts render ../../examples/hello.yaml --dry-run
\n

Next steps

\n", "links_out": [ "/docs/video/cli", "/docs/video/e2e" ] }