Skip to main content

@remotion/skia

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

Installation​

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

npm i --save-exact @remotion/skia@4.0.242 @shopify/react-native-skia
npm i --save-exact @remotion/skia@4.0.242 @shopify/react-native-skia
This assumes you are currently using v4.0.242 of Remotion.
Also update remotion and all `@remotion/*` packages to the same version.
Remove all ^ character in front of the version numbers of it as it can lead to a version conflict.
note

Since Remotion v3.3.93 and React Native Skia 0.1.191, react-native-web is not a dependency anymore. You may remove it from your project.

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/cli/config';
import {enableSkia} from '@remotion/skia/enable';
 
Config.overrideWebpackConfig((currentConfiguration) => {
  return enableSkia(currentConfiguration);
});
remotion.config.ts
ts
import {Config} from '@remotion/cli/config';
import {enableSkia} from '@remotion/skia/enable';
 
Config.overrideWebpackConfig((currentConfiguration) => {
  return enableSkia(currentConfiguration);
});
note

Prior to v3.3.39, the option was called Config.Bundling.overrideWebpackConfig().

Next, you need to refactor the entry point file to first load the Skia WebAssembly binary before calling registerRoot():

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

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 Main out/video.mp4 --gl=angle
sh
remotion render Main out/video.mp4 --gl=angle

Resources​

APIs​