Skip to main content

@remotion/skia

import Tabs from '@theme/Tabs'; import TabItem from '@theme/TabItem'; import {ExperimentalBadge} from '../../components/Experimental';

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

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.

<Tabs defaultValue="npm" values={[ { label: 'npm', value: 'npm', }, { label: 'yarn', value: 'yarn', }, { label: 'pnpm', value: 'pnpm', }, ] }> 

bash
npm i @remotion/skia @shopify/react-native-skia
bash
npm i @remotion/skia @shopify/react-native-skia
bash
yarn add @remotion/skia @shopify/react-native-skia
bash
yarn add @remotion/skia @shopify/react-native-skia
 
bash
pnpm i @remotion/skia @shopify/react-native-skia
bash
pnpm i @remotion/skia @shopify/react-native-skia
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:

<Tabs defaultValue="npm" values={[ { label: 'npm', value: 'npm', }, { label: 'yarn', value: 'yarn', }, { label: 'pnpm', value: 'pnpm', }, ] }> 

bash
npx create-video --skia
bash
npx create-video --skia
bash
yarn create video --skia
bash
yarn create video --skia
 
bash
pnpm create video --skia
bash
pnpm 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​