Skip to main content

renderStillOnWeb()v4.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 to an image 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 {blob} = await renderStillOnWeb({
  composition: {
    component: Component,
    durationInFrames: 100,
    fps: 30,
    width: 1920,
    height: 1080,
    id: 'my-composition',
  },
  frame: 0,
  imageFormat: '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.

imageFormat​

string RenderStillOnWebImageFormat

The format of the output image.

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.

allowHtmlInCanvas?​

boolean

Default false. In the Remotion Studio, the checkbox under Other is initialized from Config.setAllowHtmlInCanvasEnabled() and the --allow-html-in-canvas CLI flag:

When client-side rendering is enabled in the Studio, allow the experimental Chromium HTML-in-Canvas path (drawElementImage) for capturing frames instead of the built-in DOM composer. See Web Renderer docs.

When true, Chromium-based browsers that expose the experimental HTML-in-Canvas API (drawElementImage, enabled e.g. via chrome://flags/#canvas-draw-element) may rasterize the full composition frame with the browser engine instead of Remotion’s built-in DOM composer. This is usually faster but pixels may not match the software path.

A warning is logged when the native path is used, or when drawElementImage is available but capture fails for another reason. Use logLevel: 'warn' or lower if you do not see these messages.

Set to false to always use the built-in composer (for consistent pixels or when debugging differences).

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);

const {blob} = await renderStillOnWeb({
  composition,
  frame: 0,
  imageFormat: 'png',
  signal: controller.signal,
});

See Cancelling renders for more details and error handling patterns.

mediaCacheSizeInBytes?​

number | null

Specify the maximum size of the cache that <Video> and <Audio> from @remotion/media may use combined, in bytes.
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 in client-side rendering 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.

Return value​

Returns a promise resolving to an object with the following properties:

blob​

A Blob containing the rendered image.

Display the image
import {renderStillOnWeb} from '@remotion/web-renderer';

const {blob} = await renderStillOnWeb({
  composition,
  frame: 0,
  imageFormat: 'png',
});

// Display the image
const url = URL.createObjectURL(blob);
const img = document.createElement('img');
img.src = url;
document.body.appendChild(img);

See also​