Skip to main content

Limitations of client-side rendering

warning

This feature is not available yet, but we are already writing docs.
Track progress on GitHub and discuss in the #web-renderer channel on Discord.

Client-side rendering has several limitations to be aware of.

Supported element types​

Only certain element types can be captured and rendered:

You can use HTML elements like <div> to influence the layout of the elements, but they will not be captured visually

tsx
import {AbsoluteFill, Img, staticFile} from 'remotion';
export const MyComponent: React.FC = () => {
  return (
    /* Using Flexbox to center the elements is supported */
    <div style={{display: 'flex', flexDirection: 'row', justifyContent: 'center', alignItems: 'center'}}>
      {/** This text will NOT be captured but it influences the layout */}
      <div>Hello world</div>
      {/** This image WILL be captured because it is a supported element type */}
      <Img src={staticFile('image.png')} />
    </div>
  );
};

Uncapturable elements and styles​

Every element that is not explicitly supported is unsupported. Some important ones are:

  • <Html5Video>, <Html5Audio> and <OffthreadVideo> from the remotion package
  • Text elements: <div>, <span>, <h1>, etc.

In addition, CSS styles are not supported, except ones that change the layout of the element, such as margin, left, transform, etc.

❌ Doesn't work: Cannot capture styles that don't change the layout
tsx
<canvas style={{backgroundColor: 'red'}} />
✅ Works: Styles that change the layout
tsx
<canvas style={{position: 'absolute', top: 100, left: 100}} />

One exception is <svg> elements, which can be styled.

✅ Works: SVG elements can be styled with CSS
tsx
<svg style={{backgroundColor: 'red'}}>
  <rect width="100%" height="100%" />
</svg>

To get a better understanding of what works and what doesn't, read how client-side rendering works under the hood.

Z-indexing​

Is not implemented and zIndex CSS properties are ignored.
The rule is: Elements which are further down in the markup last will be on top.

The blue square will be drawn on top of the red square
tsx
const MyComp = () => {
  return (
    <AbsoluteFill>
      <AbsoluteFill>
        <svg viewBox="0 0 100 100">
          <rect x="0" y="0" width="100" height="100" fill="red" />
        </svg>
      </AbsoluteFill>
      <AbsoluteFill>
        <svg viewBox="0 0 100 100">
          <rect x="0" y="0" width="100" height="100" fill="blue" />
        </svg>
      </AbsoluteFill>
    </AbsoluteFill>
  );
};

Video and media constraints​

The limitations from @remotion/media apply.

Single concurrency​

There is no multithreading for client-side rendering.
However, it is fundamentally more efficient because there is less interprocess communication.
In addition, in the headful browser, GPU is usually available, which brings performance benefits.

See also​