Renderer#

@clipkit/renderer renders a ClipKit Source to an MP4 on your own machine. It drives a Playwright-controlled headless Chrome that loads @clipkit/runtime and exports MP4 via the same WebCodecs path the playground uses — so what you see in the browser is exactly what comes out of the file.

It's the Node-side counterpart to @clipkit/runtime: the runtime is the engine; the renderer is the thin harness that drives it headless and writes a file. It's what clipkit render uses locally.

Want GPU-accelerated rendering, ProRes / AV1 / transparent output, or no browser to manage? ClipKit offers hosted rendering — clipkit render --cloud, or POST a Source to the API and get a file back. See pricing.

License#

Apache-2.0. Use it, embed it, build your own product on it, render for your own customers — all free. (It loads @clipkit/runtime, which is under the Business Source License 1.1; embedding it this way is explicitly permitted.)

Install#

npm install @clipkit/renderer

Requires Google Chrome (or Chromium) installed. The renderer launches your system Chrome — Playwright's bundled Chromium ships without WebCodecs, which the MP4 exporter needs. No extra browser download.

Usage#

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

const result = await render({
  source: { /* a ClipKit Source */ },
  backend: 'auto',
  onProgress: (frame, total) => process.stdout.write(`\r${frame}/${total}`),
});

await writeFile('out.mp4', result.buffer);

`render(options)`#

Field	Type	Default	Description
`source`	`Source`	required	A schema-valid ClipKit Source.
`backend`	`'auto' \| 'webgpu' \| 'webgl2'`	`'auto'`	Which compositor backend to force.
`resolution`	`'source' \| '720p' \| '1080p' \| '1440p' \| '4k'`	`'source'`	Output height tier (keeps the Source's aspect ratio).
`bitrate`	`number`	auto	Override the video bitrate, in bits/second.
`onProgress`	`(frame, total) => void`	—	Called once per encoded frame.
`timeoutMs`	`number`	`300_000`	Hard timeout; the render throws if exceeded.

Return value#

interface RenderResult {
  buffer: Buffer;        // MP4 (H.264) bytes
  ext: 'mp4';
  mime: 'video/mp4';
  width: number;
  height: number;
  durationSec: number;
  frameRate: number;
}

Stills#

renderStill captures a single frame to PNG — a fast thumbnail or visual check without a full encode:

import { renderStill } from '@clipkit/renderer';
const png = await renderStill({ source, time: 0.5 });

Backends#

The runtime negotiates WebGPU → WebGL2 automatically. The backend option forces a choice:

'auto' (default) — try WebGPU, fall back to WebGL2.
'webgl2' — skip WebGPU. The most portable choice on servers and CI.
'webgpu' — refuse to fall back; the render fails if WebGPU isn't available.

On GPU-less Linux / CI, WebGL2 runs under SwiftShader (software) — correct, but slower than realtime. For speed at scale, use hosted rendering.

Output format#

@clipkit/renderer outputs H.264 MP4 — the fast, in-browser WebCodecs path. ProRes, AV1, and transparent (alpha) formats are produced by ClipKit's hosted renderer (clipkit render --cloud), which post-processes on the server.

Assets#

HTTP(S) URLs are supported for all asset fields (source on video, image, and audio elements).