renderStillOnWeb()<AvailableFrom v="4.0.397" />

:::warning Experimental feature - expect bugs and breaking changes at any time.
Track progress on GitHub and discuss in the #web-renderer channel on Discord. :::

Part of the @remotion/web-renderer package.

Renders a single frame in the browser.

If you want to render a video instead, use renderMediaOnWeb().

import {renderStillOnWeb} from '@remotion/web-renderer';
import {Video} from '@remotion/media';

const Component: React.FC = () => {
  return <Video src="https://remotion.media/video.mp4" />;
};

const still = await renderStillOnWeb({
  composition: {
    component: Component,
    durationInFrames: 100,
    fps: 30,
    width: 1920,
    height: 1080,
    id: 'my-composition',
  },
  frame: 0,
});

const pngBlob = await still.blob({format: 'png'});

Arguments

An object with the following properties:

composition

An object describing a composition. The object should have the following properties:

• id: A unique identifier for the composition.
• component: A React component that renders the content.
• durationInFrames: The duration of the composition in frames.
• fps: The frame rate of the composition.
• width: The width of the output in pixels.
• height: The height of the output in pixels.
• defaultProps?: Optional default props to pass to the component.
• calculateMetadata?: Optional function to calculate metadata. If provided, width, height, fps, and durationInFrames can be omitted and will be calculated dynamically.

frame

number

Which frame of the composition should be rendered. Frames are zero-indexed.

inputProps?

object

Input Props to pass to component.
You may transform input props using calculateMetadata().

:::note You cannot use getInputProps() to read input props in client-side rendering. :::

scale?

number

delayRenderTimeoutInMilliseconds?

number

A number describing how long the render may take to resolve all delayRender() calls before it times out.
Default is 30000.

logLevel?

string <TsType type="LogLevel" source="remotion" />

Determines how much information is logged during rendering.
Default is "info".

signal?

AbortSignal

An AbortSignal that allows the render to be cancelled.

const Component: React.FC = () => null;

const composition = {
  component: Component,
  durationInFrames: 100,
  fps: 30,
  width: 100,
  height: 100,
  id: 'my-composition',
};

// ---cut---
import {renderStillOnWeb} from '@remotion/web-renderer';

const controller = new AbortController();

// Cancel after 5 seconds
setTimeout(() => controller.abort(), 5000);

await renderStillOnWeb({
  composition,
  frame: 0,
  signal: controller.signal,
});

See Cancelling renders for more details and error handling patterns.

mediaCacheSizeInBytes?

number | null

onArtifact?

function

Handle an artifact that was emitted by the <Artifact> component.

schema?

Zod v4 schema <TsType type="$ZodObject" source="zod/v4/core" />

A Zod v4 schema to validate the input props. See Schemas for more information.

licenseKey?

string

A license key to use for this render.
See Telemetry in client-side rendering for more information.

isProduction?<AvailableFrom v="4.0.409"/>

default true

allowHtmlInCanvas?<AvailableFrom v="4.0.447" />

boolean

Return value

Returns a promise that resolves to a <TsType type="RenderStillOnWebResult" source="@remotion/web-renderer" href="/docs/web-renderer/types#renderstillonwebresult" /> once the frame has been painted to an internal canvas.

internalState

Internal bookkeeping used by the web renderer (e.g. for tests and diagnostics).

canvas()

Returns a promise for the OffscreenCanvas holding the rendered pixels. You can draw from it or pass it to other APIs.

blob(options?)

Encodes the canvas to a Blob. Pass <TsType type="RenderStillOnWebEncodeOptions" source="@remotion/web-renderer" href="/docs/web-renderer/types#renderstillonwebencodeoptions" /> (format, optional quality for JPEG/WebP).

url(options?)

Same as blob(), then URL.createObjectURL(). Revoke with URL.revokeObjectURL() when finished.

const Component: React.FC = () => null;
const composition = {
  component: Component,
  durationInFrames: 100,
  fps: 30,
  width: 100,
  height: 100,
  id: 'my-composition',
};

// ---cut---
import {renderStillOnWeb} from '@remotion/web-renderer';

const still = await renderStillOnWeb({
  composition,
  frame: 0,
});

const canvas = await still.canvas();
const jpegBlob = await still.blob({format: 'jpeg', quality: 0.85});
const objectUrl = await still.url({format: 'png'});

const img = document.createElement('img');
img.src = objectUrl;
document.body.appendChild(img);

See also

• Source code for this function
• Client-side rendering
• renderMediaOnWeb()
• renderStill()
• renderStillOnLambda()