packages/docs/docs/client-side-rendering/page-responsiveness.mdx
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.
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.
Pass pageResponsiveness to renderMediaOnWeb().
const Component: React.FC = () => null;
// ---cut---
import {renderMediaOnWeb} from '@remotion/web-renderer';
await renderMediaOnWeb({
composition: {
id: 'my-composition',
component: Component,
durationInFrames: 100,
fps: 30,
width: 1920,
height: 1080,
},
pageResponsiveness: 'high',
});
"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.
Pass a positive number to set the interval in milliseconds.
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,
});
When rendering with the Web Renderer in Remotion Studio, the render modal exposes a <kbd>Page Responsiveness</kbd> setting in the <kbd>Other</kbd> tab. The default is <kbd>Medium</kbd>.
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.