Skip to main content

renderStillOnWeb()v4.0.397

Part of the @remotion/web-renderer package.

Renders a single frame in the browser.

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

Example usage
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

Scales the output dimensions by a factor. For example, a 1280x720px frame will become a 1920x1080px frame with a scale factor of 1.5. See Scaling for more details.

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 LogLevel

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

signal?​

AbortSignal

An AbortSignal that allows the render to be cancelled.

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

Specify the memory budget for decoded media cached by <Video> and <Audio> from @remotion/media, in bytes. This value also determines the maximum read cache size for each distinct media source. It is not a limit on total memory usage.
The default is half of the available system memory when the render starts.

onArtifact?​

function

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

schema?​

Zod v4 schema $ZodObject

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 for more information.

isProduction?v4.0.409​

default true

Pass false if this a development render to not count it as a billable render on remotion.pro. Only can be used in conjuction with licenseKey.

allowHtmlInCanvas?v4.0.447​

boolean — default false

When client-side rendering is enabled in the Studio, allow the experimental Chromium HTML-in-canvas API to be used for capturing frames. See HTML-in-canvas docs.

Return value​

Returns a promise that resolves to a 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 RenderStillOnWebEncodeOptions (format, optional quality for JPEG/WebP).

url(options?)​

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

Blob, canvas, and object URL
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​