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.

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

Enable the experimental client-side rendering flag in your remotion.config.ts:

ts
import {Config} from '@remotion/cli/config';
Config.setExperimentalClientSideRenderingEnabled(true);

Or pass the --enable-experimental-client-side-rendering flag when starting the Studio:

sh
npx remotion studio --enable-experimental-client-side-rendering

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