Skip to main content

Contributing to client-side rendering

The code for @remotion/web-renderer is located in the packages/web-renderer folder.
Before running any of these commands, do the main setup.

Developing in watch mode​

To develop the web renderer, you can use the watch mode:

In ./
sh
bun run watchwebrenderer

This will automatically rebuild the package when you make changes to the code.

Running tests​

This package uses test-driven development. Changes are tested using Vitest Browser Mode.

First you need to install the browser dependencies:

In packages/web-renderer
sh
bunx playwright install --with-deps

Then you can run the tests:

sh
bun run testwebrenderer

To only run a specific test file, you can specify the file name:

sh
bunx vitest src/test/video.test.tsx

To only run a specific test, you can change test() to test.only().

To only run the test in a specific browser, you can specify the browser name:

sh
bunx vitest --browser chromium
bunx vitest --browser firefox
bunx vitest --browser webkit

Enabling the Studio Render Button​

Set the following to true in packages/studio/src/helpers/show-browser-rendering.ts:

ts
export const SHOW_BROWSER_RENDERING = true;

Now, in packages/example, and in any template, you will see a "Render on web" button.

Don't commit this, the CI will fail.

Eventually, this flag will be removed and the button will be enabled by default.
If this happened and this instruction remains here, please send a PR to remove it :)

See also​