Skip to main content

Limitations of client-side rendering

warning

Very experimental feature - expect bugs and breaking changes at any time.
Track progress on GitHub and discuss in the #web-renderer channel on Discord.

Unlike server-side rendering, where a full screenshot it taken, in client-side rendering the layout and styles of your video are being emulated and drawn to a canvas.

It is not feasible to support all CSS properties and factors affecting the visual style of a page, so only the most important styling primitives are supported.

Supported CSS styles​

Positioning and layouting properties​

Properties such as margin, left, display, width, height, flex, flex-direction affect the position and size of the element. Those are all supported because Remotion uses .getBoundingClientRect() to obtain the position and size of the element.

The overflow property is supported.

Transformations​

The CSS transform property is supported.
The transform-origin property is supported.
The opacity property is supported.
The scale, rotate and translate transformations are supported.
The perspective property is not supported.
The perspective-origin property is not supported.
The transform-style property is not supported (defaults to preserve-3d, default in CSS is "flat").

Backgrounds​

The background-color property is supported.
background-image with a linear gradient is supported.
Other background-image values and other background-* properties are not supported.

Borders and border radius​

The border, border-style, border-color, border-width properties are supported.
The border-radius property is supported, including different values for vertical and horizontal radii.
The corner-shape property is not supported.
The outline property is supported.

Text properties​

The color property is supported.
The font-family property is supported.
The font-size property is supported.
The font-weight property is supported.
The line-height property is supported.
The letter-spacing property is supported.
The text-transform property is supported.
The direction HTML attribute is supported.
The writing-mode property is not supported.
The text-decoration property is not supported.
The text-shadow property is not supported.
The -webkit-text-stroke property is not supported.

Shadows​

Basic box-shadow are supported.
inset shadows are not supported.
"Spread radius" is not supported.

Masks​

mask-image with a linear gradient is supported.
Other mask-image values are not supported.

Supported elements​

The following Remotion components are supported:

The <Video> from @remotion/media is supported.
The <Audio> from @remotion/media is supported.
<Img> is supported.
<Gif> from @remotion/gif is supported.
<Rive> from @remotion/rive is supported.
<Lottie> from @remotion/lottie is supported.
<ThreeCanvas> from @remotion/three is supported.
<SkiaCanvas> from @remotion/skia is supported.
<AnimatedImage> is supported when rendering in Chrome.
<OffthreadVideo> is not supported.
→ Use <Video> instead.
<Html5Video> is not supported.
→ Use <Video> instead.
<Html5Audio> is not supported.
→ Use <Audio> instead.
<AnimatedEmoji> from @remotion/animated-emoji is not supported.
→ Use <Lottie> instead.

Unsupported styles​

All styles not explicitly mentioned are not supported. Here is a selection of unsupported styles:

  • clip-path
  • filter (blur, brightness, contrast, etc.)
  • backdrop-filter
  • mix-blend-mode
  • background-blend-mode
  • object-fit
  • backface-visibility
  • z-index
  • Any other property not listed in this document.

Over time, we will support more elements and styles. We'll prioritize the most demanded ones.
See how you can contribute to add more supported styles.

Z-indexing​

The CSS property z-index is not supported.
To control the order of the elements, order your elements from back to front.

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​