{
  "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.",
  "links_out": [
    "/docs/video/cli",
    "/docs/video/e2e"
  ]
}