Skip to main content

@remotion/skia

This package provides utilities useful for integrating React Native Skia with Remotion.

EXPERIMENTAL
This package is currently a proof of technology.

It may change in minor version updates. Monitor this documentation page to see breaking changes when upgrading.

Installation​

Install, @remotion/skia as well as @shopify/react-native-skia and react-native-web.

bash
npm i @remotion/skia @shopify/react-native-skia react-native-web
bash
npm i @remotion/skia @shopify/react-native-skia react-native-web

Also update all the other Remotion packages to have the same version: remotion, @remotion/cli and others.

note

Make sure no package version number has a ^ character in front of it as it can lead to a version conflict.

Override the Webpack config by using enableSkia().

remotion.config.ts
ts
import { Config } from "remotion";
import { enableSkia } from "@remotion/skia/enable";
 
Config.Bundling.overrideWebpackConfig((currentConfiguration) => {
  return enableSkia(currentConfiguration);
});
remotion.config.ts
ts
import { Config } from "remotion";
import { enableSkia } from "@remotion/skia/enable";
 
Config.Bundling.overrideWebpackConfig((currentConfiguration) => {
  return enableSkia(currentConfiguration);
});

Next, you need to refactor entrypoint file (most commonly src/index.tsx) to first load the Skia WebAssembly binary before calling registerRoot():

src/index.tsx
ts
import { LoadSkia } from "@shopify/react-native-skia/src/web";
import { registerRoot } from "remotion";
 
(async () => {
  await LoadSkia();
  const { RemotionVideo } = await import("./Video");
  registerRoot(RemotionVideo);
})();
src/index.tsx
ts
import { LoadSkia } from "@shopify/react-native-skia/src/web";
import { registerRoot } from "remotion";
 
(async () => {
  await LoadSkia();
  const { RemotionVideo } = await import("./Video");
  registerRoot(RemotionVideo);
})();

You can now start using the <SkiaCanvas> in your Remotion project.

Templates​

You can find the starter template here or install it using:

bash
npx create-video --skia
bash
npx create-video --skia

Rendering​

By default Remotion rendering are done on the CPU. Some Skia effects rely on advanced GPU features, which may be slow to run on the CPU depending on the kind of effect you are using. If your Skia export is extremely slow, we found that enabling the GPU via the --gl=angle option improves things substantially. Please check out the documentation on GPU rendering.

sh
remotion render src/index.tsx Main out/video.mp4 --gl=angle
sh
remotion render src/index.tsx Main out/video.mp4 --gl=angle

Resources​

APIs​