---
title: Video quickstart
description: Create, preview, render, and inspect a Cuitty Video composition.
section: Video
order: 1
updatedAt: 2026-05-24
slug: video/quickstart
---
# Video quickstart

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.

## Install the workspace

From the video repository:

```bash
cd ~/Code/cuitty/video
bun install
bun run typecheck
```

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

## Create a composition

Create `examples/hello.yaml`:

```yaml
composition:
  id: hello-video
  width: 1280
  height: 720
  fps: 30
  duration: 5s

layers:
  - id: background
    render:
      type: gradient
      colors: ["#0f172a", "#312e81"]
      direction: "135deg"

  - id: title
    clips:
      - id: intro-title
        start: 0s
        end: 5s
        render:
          type: text
          text: "Hello from Cuitty Video"
          fontSize: 64
          color: "#ffffff"
        animate:
          - property: opacity
            from: 0
            to: 1
            start: 0s
            duration: 1s
            easing: cubic-out

output:
  codec: h264
  crf: 18
```

## Preview the composition

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

```bash
bun --cwd packages/cli src/index.ts preview ../../examples/hello.yaml
```

Inspect a single frame:

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

## Render the video

Render to MP4:

```bash
mkdir -p output
bun --cwd packages/cli src/index.ts render ../../examples/hello.yaml -o ../../output/hello.mp4 --codec h264 --crf 18
```

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

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

## Next steps

- Use the TypeScript SDK when the timeline is generated from code or application data.
- Use YAML when compositions should live in config, tests, or content workflows.
- Use [CLI reference](/docs/video/cli) for automation commands.
- Use [E2E visibility](/docs/video/e2e) to leave inspectable render artifacts.