Skip to main content
\n\n
\n```\n\nThis wrapper component will serve as the bridge between Svelte and Remotion’s React components.\n\n## Create a wrapper for the Remotion Player\n\n1. In your `remotion` folder, create a file named `PlayerView.tsx`.\n2. Ensure each `.tsx` file imports React explicitly at the top of the file:\n\nThis will get the reference to the player with `createRef`.\n\n```tsx title=\"PlayerView.tsx\"\nimport React, {forwardRef, useEffect, useImperativeHandle} from \"react\";\nimport {Player, type PlayerRef} from \"@remotion/player\";\nimport {HelloWorld} from \"./HelloWorld\";\n\nexport interface PlayerSchema {\n titleText: string\n titleColor: string\n logoColor1: string\n logoColor2: string\n}\n\nexport const PlayerView = forwardRef((props: { data: PlayerSchema, onPaused?: () => void }, ref) => {\n\n const playerRef: React.RefObject = React.createRef()\n\n useEffect(() => {\n if (playerRef.current) {\n\n // add callback when player pauses\n playerRef.current.addEventListener('pause', () => {\n props.onPaused?.()\n })\n }\n }, [])\n\n useImperativeHandle(ref, () => ({\n get playerRef() {\n return playerRef.current;\n },\n }));\n\n return \n})\n```\n\n## Use the component in Svelte\n\nTo display the Remotion player within an Svelte template, add your new wrapper component wherever you'd like the Player to appear:\n\n```html\n\n```\n\nThis Svelte component tag will render the Remotion Player, allowing you to pass data or configuration as needed through Svelte's data binding.\n\nYou're now able to use the [`API`](/docs/player/player) of the player via the `player` binding.\n\n## See also\n\n- [Source code for this documentation](https://github.com/remotion-dev/svelte-starter)\n- [Integration into Angular](/docs/angular)\n- [Integration into Vue](/docs/vue)\n\n\n"

Using Remotion in Svelte

This guide explains how to integrate Remotion into a Svelte project.

Install required packages​

Install Remotion and necessary dependencies:

npm i remotion @remotion/player @remotion/cli react react-dom
npm i --save-dev @types/react @types/react-dom

Create a Remotion folder​

For better separation, create a folder to hold your Remotion files:

src/remotion

Copy the contents of your Remotion project or a starter template (e.g., HelloWorld) into this new folder. This will help separate Remotion related files from the rest of your Svelte codebase.

Copy remotion.config.ts​

Copy the remotion.config.ts file to the root directory of your Svelte project, placing it at the same level as package.json.

This configuration file is necessary for Remotion to recognize and compile your project settings.

Configure TypeScript for JSX​

To enable JSX support in Svelte, update the tsconfig.app.json file by setting "jsx": "react" under compilerOptions. This configuration allows Svelte to interpret JSX syntax used in Remotion's React components.

{
  "compilerOptions": {
    "jsx": "react",
    // other options
  }
}

Create a React wrapper component for Svelte​

To embed Remotion components in Svelte, create a wrapper component:

  1. In your remotion folder, create a file named PlayerViewWrapper.svelte.
<script lang="ts">
    import {onDestroy, onMount} from "svelte";
    import React from "react";
    import {createRoot, type Root} from "react-dom/client";
    import {type PlayerSchema, PlayerView} from "./PlayerView";
    import {type PlayerRef} from "@remotion/player";

    let {data, player = $bindable<PlayerRef>(), onPaused} = $props<{ data: PlayerSchema, player: PlayerRef, onPaused: void }>()
    let containerRef;
    let root: Root;

    // used to rerender the player when changes made
    $effect(() => {
        // we need to access the property in the $effect, because Svelte doesn't automatically detect deep changes. Use flat structure or Svelte Store instead.
        console.log(data.titleText)
        render()
    });

    function render() {
        if (!containerRef || !root) return;
        root.render(
            React.createElement(PlayerView, {
                ref: (ref) => {
                    player = ref?.playerRef
                }, data, onPaused,
            }),
        );
    }

    onMount(() => {
        root = createRoot(containerRef);
        render();
    });

    onDestroy(() => {
        root?.unmount();
    });
</script>

<div bind:this={containerRef}></div>

This wrapper component will serve as the bridge between Svelte and Remotion’s React components.

Create a wrapper for the Remotion Player​

  1. In your remotion folder, create a file named PlayerView.tsx.
  2. Ensure each .tsx file imports React explicitly at the top of the file:

This will get the reference to the player with createRef.

import React, {forwardRef, useEffect, useImperativeHandle} from "react";
import {Player, type PlayerRef} from "@remotion/player";
import {HelloWorld} from "./HelloWorld";

export interface PlayerSchema {
    titleText: string
    titleColor: string
    logoColor1: string
    logoColor2: string
}

export const PlayerView = forwardRef((props: { data: PlayerSchema, onPaused?: () => void }, ref) => {

    const playerRef: React.RefObject<PlayerRef> = React.createRef()

    useEffect(() => {
        if (playerRef.current) {

            // add callback when player pauses
            playerRef.current.addEventListener('pause', () => {
                props.onPaused?.()
            })
        }
    }, [])

    useImperativeHandle(ref, () => ({
        get playerRef() {
            return playerRef.current;
        },
    }));

    return <Player
        ref={playerRef}
        component={HelloWorld}
        durationInFrames={150}
        fps={30}
        compositionHeight={1080}
        compositionWidth={1920}
        inputProps={props.data}
        style={{width: '100%'}}
        controls
    />
})

Use the component in Svelte​

To display the Remotion player within an Svelte template, add your new wrapper component wherever you'd like the Player to appear:

<PlayerViewWrapper bind:player={player} {onPaused} {data}/>

This Svelte component tag will render the Remotion Player, allowing you to pass data or configuration as needed through Svelte's data binding.

You're now able to use the API of the player via the player binding.

See also​

CONTRIBUTORS