Web renderer test

Skill ulpi-io/plugin-marketplace/plugins/remotion-dev/skills/web-renderer-test

Add a test case to the web rendererFrom its SKILL.md

Install

npx -y skills add ulpi-io/plugin-marketplace --skill web-renderer-test

Assembled from the repository path, not quoted from the project. Check it against their README if it does not work.

2 things to look at

no licenseNo license file was found in the repository. Code published without one is not open source by default, so using it at work is a question for whoever answers licensing questions where you are.
1 stars1 stars. Stars are a popularity signal and not a quality one, but at this level it is likely that nobody has read this closely except its author, and you would be relying on your own review.

SKILL.md

1.9 KB, 467 tokens by cl100k_base, as published. Nobody here has run it

The web renderer is in packages/web-renderer and the test suite is in packages/web-renderer/src/test.

It uses visual snapshot testing using vitest. A test file can for example be executed using:

bunx vitest src/test/video.test.tsx

Example

Each test is powered by a fixture in packages/web-renderer/src/test/fixtures. A fixture looks like this for example:

import {AbsoluteFill} from 'remotion';

const Component: React.FC = () => {
  return (
    <AbsoluteFill
      style={{
        justifyContent: 'center',
        alignItems: 'center',
      }}
    >
      <div
        style={{
          backgroundColor: 'red',
          width: 100,
          height: 100,
          borderRadius: 20,
        }}
      />
    </AbsoluteFill>
  );
};

export const backgroundColor = {
  component: Component,
  id: 'background-color',
  width: 200,
  height: 200,
  fps: 25,
  durationInFrames: 1,
} as const;

The corresponding test looks like this:

import {test} from 'vitest';
import {renderStillOnWeb} from '../render-still-on-web';
import {backgroundColor} from './fixtures/background-color';
import {testImage} from './utils';

test('should render background-color', async () => {
  const blob = await renderStillOnWeb({
    licenseKey: 'free-license',
    composition: backgroundColor,
    frame: 0,
    inputProps: {},
    imageFormat: 'png',
  });

  await testImage({blob, testId: 'background-color'});
});

Adding a new test

Add a new fixture in packages/web-renderer/src/test/fixtures.
Important: Add the fixture to packages/web-renderer/src/test/Root.tsx to add a way to preview it.
Add a new test in packages/web-renderer/src/test.
Run bunx vitest src/test/video.test.tsx to execute the test.
Important: Update packages/docs/docs/client-side-rendering/limitations.mdx to reflect the newly supported property.

What ships with it

Read from the repository

Just SKILL.md. No reference files, no scripts.

Gives 0 of the 12 instructions most test skills give in 467 tokens

Counted across 964 of the 1,571 authors here whose files we hold, read 2026-08-07

Close the browser when donein 55 of 964, across 12 files
Wait for network idle statein 51 of 964, across 6 files
Launch Chromium in headless modein 49 of 964, across 6 files
Use descriptive selectors for elementsin 49 of 964, across 6 files
Run provided scripts with help flag firstin 49 of 964, across 6 files
Add appropriate explicit waitsin 48 of 964, across 5 files
Use bundled scripts as black boxesin 46 of 964, across 3 files
Do not read script source codein 46 of 964, across 3 files
Use sync playwright for scriptsin 46 of 964, across 3 files
Inspect dom before executing actionsin 46 of 964, across 3 files
Run the full test suitein 37 of 964
Write the failing test firstin 29 of 964, across 23 files