loadBrowserBundle()v4.0.527

Executes a BrowserBundle and returns the root component it registered with registerRoot(). Import it from @remotion/browser-bundler/runtime.

warning

Draft API: This API is not yet stable. We are in the experimental phase of this package and reserve to change it at any time.

This API executes trusted code only. It is not a sandbox.

Each call evaluates a fresh bundle. For state-preserving edits, use createBrowserBundleRuntime() with enableFastRefresh: true instead.

After compiling a project with createBrowserBundler():

load-composition.ts
import {
  getBrowserComposition,
  loadBrowserBundle,
} from '@remotion/browser-bundler/runtime';

const root = loadBrowserBundle({bundle});
const composition = await getBrowserComposition({
  root,
  compositionId: 'HelloWorld',
  inputProps: {},
});

Options

bundle

The complete BrowserBundle returned by a bundler's bundle() method. Its entry point must synchronously call registerRoot() exactly once with a root component. Registering after an awaited operation or in a timer is not supported.

Fast Refresh bundles are not accepted by this one-shot loader.

Exporting a video component without registering a root is not sufficient. Use the normal Remotion project structure.

Return value

The registered root component, typed as React.FC.

Registration is captured separately for each bundle. Loading a bundle does not replace the host app's global Remotion root registration. React, React DOM, and Remotion imports are shared with the host app.

The returned root registers compositions; it is not the video component to pass to <Player>. Use getBrowserComposition() to select a composition by ID and obtain its component, props, and video configuration.

Code execution

The function synchronously evaluates bundle.code using Function. Both source code and imported npm dependencies execute with the host page's privileges. They can access its DOM, storage, and network; do not pass untrusted bundles.

Your Content Security Policy must allow JavaScript code evaluation. The overall workflow also requires workers, WebAssembly, and allowed asset and dependency requests. See trusted code only.

Each call executes the bundle again. There is no automatic cleanup of its side effects, and disposing the compiler does not undo them.

Errors

Throws if evaluation fails, a shared import is unavailable, or the bundle does not register a valid root exactly once. Errors from importing or initializing project code can occur here even if compilation succeeded.

Compatibility

Browsers			Environments
Chrome	Firefox	Safari	Client-side rendering	Server-side rendering	Player	Studio
	Not tested	Not tested

The experimental browser workflow has only been tested in Chrome. Load bundles in the host app, not during server rendering.

Options​

bundle​

Return value​

Code execution​

Errors​

Compatibility​

See also​