@clipkit/renderer

Render a ClipKit Source to an MP4 on your own machine — headless Chrome + WebCodecs, driven by Playwright. It's the Node-side renderer for @clipkit/runtime: the runtime is the engine; this is the thin harness that drives it headless and writes a file.

npm install @clipkit/renderer

Requires Google Chrome (or Chromium) installed. The renderer launches your system Chrome via Playwright — the bundled Chromium ships without WebCodecs, which the MP4 exporter needs.

Usage

import { render } from '@clipkit/renderer';
import { writeFile } from 'node:fs/promises';

const source = {
  clipkit_version: '1.1',
  output_format: 'mp4',
  width: 1280,
  height: 720,
  duration: 3,
  frame_rate: 30,
  background_color: '#0a0a12',
  elements: [
    {
      id: 'title', type: 'text', track: 1, time: 0, duration: 3,
      x: 640, y: 360, x_anchor: 0.5, y_anchor: 0.5, width: 1000,
      text: 'Hello, ClipKit', text_align: 'center',
      font_size: 80, fill_color: '#ffffff',
      animations: [{ type: 'fade-in', time: 0, duration: 0.6 }],
    },
  ],
};

const { buffer } = await render({ source, onProgress: (f, t) => console.log(`${f}/${t}`) });
await writeFile('out.mp4', buffer);

API

`render(options): Promise<RenderResult>`

Option	Type	Default
`source`	`Source`	—	the ClipKit document to render (required)
`backend`	`'auto' \| 'webgpu' \| 'webgl2'`	`'auto'`	force a runtime backend; `'webgl2'` is the most portable
`resolution`	`'source' \| '480p' … '4k'`	`'source'`	output height tier (keeps the Source aspect)
`bitrate`	`number`	auto	video bitrate, bits/second
`onProgress`	`(frame, total) => void`	—	per-frame progress
`timeoutMs`	`number`	`300000`	fail if no result within this window
`showBrowser`	`boolean`	`false`	show the Chrome window (debugging)

RenderResult = { buffer, ext: 'mp4', mime: 'video/mp4', width, height, durationSec, frameRate }.

What this does and doesn't do

✅ Does: Source → MP4 (H.264) locally, the same compositor + WebCodecs encoder as the ClipKit editor, in headless Chrome. Free, runs anywhere with Chrome.
❌ Doesn't: ProRes / AV1 / transparent formats, a hosted rendering API, or GPU- accelerated server rendering. Those live in ClipKit's hosted service at clipkit.dev.

License

Apache-2.0. (It loads @clipkit/runtime, which is licensed under the BSL 1.1.)