Skip to main content

Page responsivenessv4.0.487

warning

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

The Web Renderer runs in the same browser tab as the page that starts the render.

A render can do expensive synchronous work. Capturing one frame can involve measuring layout, walking the DOM, capturing elements and textures and drawing them to a canvas. While this work is running, the browser may not be able to paint updates or react to clicks.

Page responsiveness controls how often Remotion tries to free the event loop between expensive render phases so the browser can update the page.

Default behavior​

By default, renderMediaOnWeb() uses "medium" page responsiveness. Every 33ms of rendering work, Remotion tries to free the event loop so the page can stay responsive.

The default favors an interactive page. The tradeoff is render speed. Freeing the event loop gives the browser time to work, so a render may finish later than if page responsiveness is disabled.

Changing the setting​

Pass pageResponsiveness to renderMediaOnWeb().

render.tsx
import {renderMediaOnWeb} from '@remotion/web-renderer';

await renderMediaOnWeb({
  composition: {
    id: 'my-composition',
    component: Component,
    durationInFrames: 100,
    fps: 30,
    width: 1920,
    height: 1080,
  },
  pageResponsiveness: 'high',
});

Available values​

"disabled"​

Do not pause rendering for page responsiveness. This prioritizes render speed, but can make the page less responsive.

Use this when the page does not need to stay interactive while the render runs.

"low"​

Every 100ms of rendering work, Remotion tries to free the event loop.

Use this if render speed matters more than immediate page updates, but the page should not feel fully blocked.

"medium"​

Every 33ms of rendering work, Remotion tries to free the event loop.

This is the default.

"high"​

Every 16ms of rendering work, Remotion tries to free the event loop.

Use this when keeping the page responsive matters more than finishing the render as fast as possible.

Number​

Pass a positive number to set the interval in milliseconds.

render.tsx
import {renderMediaOnWeb} from '@remotion/web-renderer';

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

await renderMediaOnWeb({
  composition: {
    id: 'my-composition',
    component: Component,
    durationInFrames: 100,
    fps: 30,
    width: 1920,
    height: 1080,
  },
  pageResponsiveness: 50,
});

In Remotion Studio​

When rendering with the Web Renderer in Remotion Studio, the render modal exposes a Page Responsiveness setting in the Other tab. The default is Medium.

Limitations​

This option is best effort. Remotion only frees the event loop between safe points in the render pipeline, so it cannot interrupt a single long synchronous browser or graphics operation.

If one frame contains especially expensive work, the page may still be blocked until that operation finishes.

See also​