Skip to main content

renderStillOnWeb()

warning

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

Available from v4.397 - 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
tsx
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.

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 - optional

An AbortSignal that allows the render to be cancelled.

tsx
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,
});

mediaCacheSizeInBytes?​

number | null - optional

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 - optional

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

schema?​

Zod schema AnyZodObject

A Zod 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.

Return value​

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

blob​

A Blob containing the rendered image.

Display the image
tsx
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​