---
title: "Migrating from Remotion to CE.SDK: How to Move Template Videos"
description: "Which Remotion concepts map to CE.SDK, what you have to rebuild, and a working script that fills a template and exports MP4 on your server."
url: "https://img.ly/blog/remotion-to-cesdk-migration/"
type: "blog"
date: "2026-10-22"
author: "Klaudia"
tags: ["Insights","Video Editing","Video Editor"]
---

> This is the markdown version of [Migrating from Remotion to CE.SDK: How to Move Template Videos](https://img.ly/blog/remotion-to-cesdk-migration/). For all pages in one file, see [llms-full.txt](https://img.ly/llms-full.txt). For an index of all available pages, see [llms.txt](https://img.ly/llms.txt).

---

If you make template videos with Remotion, you probably have one composition that gets different props for every video. That setup works well as long as a developer makes every change. It gets harder once marketers want to edit the headline themselves, your product needs a video editor on iOS and Android, or brand elements have to stay locked while the rest of the template changes.

This guide maps Remotion's concepts to CE.SDK and lists what doesn't carry over. It also includes a working script that fills a CE.SDK template with the same data your composition receives and exports an MP4 on your server. For a feature-by-feature look at Remotion and CE.SDK first, see our [Remotion comparison](https://img.ly/remotion-alternative.md).

## When Moving From Remotion Makes Sense

It's worth moving when one of these applies to your users:

- Designers, marketers or your customers need to build templates, change text or swap clips without a developer
- Logos and brand colors must stay locked while users edit the rest of a template
- Your product needs native video editing on iOS or Android, which Remotion doesn't offer
- Your users want to search stock photos and music without leaving the editor, with asset libraries like Getty Images, Pexels, Unsplash and Soundstripe
- Your users want to generate clips, voiceovers and images with AI in the web editor, using the models you choose

It's also worth it when one of these applies to your team:

- You don't want your developers maintaining the editor, from browser and device compatibility to security patches
- You want new editor features to come with SDK updates, so your team doesn't have to build them
- You want enterprise support for the editor itself, with SLAs and dedicated onboarding
- Your app isn't built with React, which Remotion is made for
- Your product also needs photo or design editing, and you want one SDK for all of it

Remotion is still the better fit if your videos rely on animation written frame by frame in code, if you need WebM, ProRes or transparent output, or if you render in parallel on AWS Lambda. CE.SDK exports video as MP4 only, and you animate elements with presets. If you'd rather stay on Remotion, our [Editor Starter comparison](https://img.ly/blog/remotion-editor-starter-vs-cesdk.md) looks at Remotion's own editor template, a starting point your team builds on. The [Remotion alternatives](https://img.ly/blog/remotion-alternatives.md) overview adds two more options built on Remotion, the Remotion Timeline component and React Video Editor.

If you do move, nothing converts a Remotion composition into a CE.SDK template. Compositions are dynamic code, and <a href="https://www.remotion.dev/docs/export-opentimeline" rel="nofollow">Remotion's own docs</a> say that even an export to the OpenTimelineIO timeline format can't be done deterministically. So you rebuild each template once. The data you fill it with carries over, and so do most of the files around it.

## How Remotion Concepts Map to CE.SDK

Most parts of a template video have a direct counterpart in CE.SDK. The biggest shift is how you measure time. Remotion counts frames inside a component, and CE.SDK uses seconds on a timeline.

| Remotion                                                  | CE.SDK                                                                         | What changes                                                                                 |
| --------------------------------------------------------- | ------------------------------------------------------------------------------ | -------------------------------------------------------------------------------------------- |
| `<Composition>` with width, height and `durationInFrames` | A page with a width, a height and a duration                                   | You set the duration in seconds                                                              |
| `fps` on the composition                                  | The `framerate` option of the video export                                     | You pick the frame rate when you export                                                      |
| `defaultProps` and `inputProps`                           | Text variables and named placeholders                                          | Text props fill variables like `{{headline}}`, and media props replace a placeholder's media |
| Zod schema on the props                                   | Scopes on each element, enforced by the editor role                            | Users can change only what the template allows                                               |
| `<Sequence>` and timing props                             | A block's time offset and duration                                             | Each element gets a start time and a duration in seconds                                     |
| `<Series>`                                                | A track                                                                        | A track places its clips one after another                                                   |
| `<TransitionSeries>`                                      | Transitions between clips                                                      | You add them in the editor on web, iOS and Android                                           |
| `<Video>`, `<Audio>`, `<Img>`                             | Video fills, audio blocks, image fills                                         | Media is a fill on a block or its own audio block                                            |
| `@remotion/captions`                                      | Caption blocks created from SRT or VTT files                                   | Captions come in as files, not caption data                                                  |
| `interpolate()` and `spring()`                            | In, out and loop animation presets                                             | No frame-by-frame animation code                                                             |
| `calculateMetadata()`                                     | Set the duration in your script                                                | No hook that recalculates the video from its props                                           |
| Remotion Studio                                           | The CE.SDK editor in the template creator role                                 | Templates are designed in the editor and saved as a scene file                               |
| `@remotion/player`                                        | The CE.SDK editor for your users, or the Video Player starter kit for playback | Users edit the template, not your code                                                       |
| `renderMedia()`                                           | `exportVideo()` in `@cesdk/node-native`, or the CE.SDK Renderer                | The server loads the template file instead of a bundle                                       |
| `renderStill()`                                           | `export()` on the page as PNG or JPEG                                          | Set the playback time to pick the frame                                                      |
| Browser rendering                                         | Video export in the browser                                                    | Desktop Chrome and Edge 114 or newer, Safari 26 or newer                                     |

## What You Can Bring Over

You rebuild the composition, but most of the files around it import into CE.SDK as they are:

- **Rendered clips.** Remotion renders MP4 in H.264 or H.265, and CE.SDK imports MP4 and MOV files in both codecs. An intro animated with `spring()` can stay a Remotion render and play as a clip inside a CE.SDK template. Convert ProRes clips to H.264 or H.265 first. WebM imports in the web editor, but not in the Node.js package or the Renderer.
- **Stills.** Remotion's PNG, JPEG and WebP still renders import as images.
- **Captions.** Remotion's `serializeSrt()` turns caption data into SRT text. CE.SDK imports SRT and VTT captions on web, iOS, Android and the server.
- **Lottie animations.** The JSON files you play with `@remotion/lottie` import into CE.SDK. Lottie works on web, iOS, Android and the server.
- **Fonts, images and audio.** TTF, OTF, WOFF and WOFF2 fonts, GIF and SVG graphics, and MP3, WAV or M4A audio import without conversion.

CE.SDK's template importers read InDesign, Photoshop, PDF and PowerPoint files and its own scene format.

## What Doesn't Carry Over

Each of these needs a decision before you start:

- **Animation written in code.** `interpolate()` and `spring()` logic has no equivalent. Pick the closest preset, or keep that video in Remotion.
- **React components and state.** Custom components become blocks in the editor. Anything computed at render time moves into the script that fills the template.
- **Metadata calculated from props.** If <a href="https://www.remotion.dev/docs/calculate-metadata" rel="nofollow">calculateMetadata()</a> sets the duration from a clip's length today, set it in your script before export.
- **Distributed rendering on Lambda.** <a href="https://www.remotion.dev/docs/lambda" rel="nofollow">Remotion Lambda</a> splits one render across many functions. CE.SDK renders each video on one machine, in a Node.js service or a Renderer container.
- **Output formats.** CE.SDK exports MP4 in H.264, or H.265 in the web editor where the browser supports it, with limited transparency support. For WebM, ProRes or transparent overlays, stay with Remotion.
- **Separate music tracks on Linux and Windows servers.** On those platforms, a Node.js package export doesn't finish when the scene has a standalone audio block. Audio inside a video clip exports fine, and macOS isn't affected.

## Plan the Migration in Six Steps

1. **Sort your compositions.** List each composition with its props, and note which props are text, which are media, and which change the video's length or layout. Then decide which videos stay in Remotion, based on what doesn't carry over.
2. **Build a proof of concept.** Rebuild the composition you render most and render it with the server script below. Our customers reach a working prototype in a median of [two days](https://img.ly/blog/imgly-impact-report.md). Build it yourself with CE.SDK's <a href="https://img.ly/docs/cesdk/js/get-started/agent-skills-f7g8h9/" data-analytics='cta_clicked, {"props":{"location":"blog-article-cta","page":"remotion-to-cesdk-migration","destination":"docs"}}'>agent skills</a> in your coding assistant, or <a href="https://img.ly/forms/contact-sales/" data-analytics='cta_clicked, {"props":{"location":"blog-article-cta","page":"remotion-to-cesdk-migration","destination":"contact-sales"}}'>talk to our team</a> and we'll help you get set up.
3. **Gather the files that carry over.** Collect the fonts, clips, stills, captions and Lottie files your templates use. Turn caption data into SRT files and convert ProRes or WebM clips to H.264 or H.265 before you import them.
4. **Rebuild the remaining templates in the editor.** Use the concept table to find each element's counterpart.
5. **Name variables and placeholders after your props.** Use the same names as the text and media props that fill them, so your script can map each prop directly.
6. **Swap the render call and compare the output.** Render the same props with Remotion and CE.SDK side by side, and check timing, fonts and audio. Keep your Remotion pipeline as a fallback until the new renders hold up.

## How Long the Migration Takes

How long the template rebuild takes depends on how many compositions you have and how much of their animation is written in code. Our customers reach a production-ready editor in a median of [14 days](https://img.ly/blog/imgly-impact-report.md).

[Glowtify](https://img.ly/case-studies/glowtify.md) rebuilt its in-house carousel tool on CE.SDK in a single week, and [ImageBank X](https://img.ly/case-studies/imagebank.md) added photo and video editing to its React app in a few days of engineering work. [Digitas Germany](https://img.ly/case-studies/digitas.md) estimates it avoided at least six months of build time on a template portal where more than 600 dealers create social, print and video assets.

Martin Röhr, Senior Project Manager at Digitas Germany, described the result:

> "We shipped a much better product than initially planned. Building something like this ourselves would have taken years or ten times the budget."

## How Templates Work in CE.SDK

A Remotion template is React code in your codebase, and Remotion Studio writes visual edits back to that code. A CE.SDK template is designed in the editor and saved as a file. Take a typical promo composition: 1920×1080, a `durationInFrames` of 240 at 30 fps, a `headline` prop, a `backgroundVideo` prop with a clip URL, and a logo built into the component. In the editor, working in the Creator role, you rebuild it like this:

1. The composition becomes a 1920×1080 video page that runs for eight seconds. The frame rate isn't stored in the template, because you pick it when you export.
2. The `backgroundVideo` prop becomes a video [placeholder](https://img.ly/demos/placeholders-video.md) named `backgroundVideo`, so your server can find it.
3. The `headline` prop becomes a text block with a `{{headline}}` variable.
4. The logo becomes a locked element that users can't move, resize, replace or delete.
5. The opacity `interpolate()` on the headline becomes a fade-in preset, the closest match.
6. The template is saved as a scene file, which the script in the next section loads as `promo.scene`.

Media props like `backgroundVideo` need absolute URLs, such as `https://` or `file://` addresses, so replace any `staticFile()` paths with full URLs. The [automated video generation](https://img.ly/docs/cesdk/js/starterkits/automated-video-generation-8om1qg.md) starter kit shows both sides of this setup: one editor for building templates and one for filling them.

> "It's been very easy to interact with the SDK and add value on top. Very early, we were able to play with templates using AI, branding them, resizing based on channels."
>
> Olivier Fradette-Roy, CTO at Glowtify

## Fill the Template and Export MP4 on Your Server

On your server, this script takes over from `renderMedia()`. It loads `promo.scene`, fills it with the same props your composition received and exports the page as MP4 at 30 fps:

```js
import fs from 'fs/promises';
import CreativeEngine from '@cesdk/node-native';

// The same data your Remotion composition received as inputProps
const props = {
  headline: 'Summer sale, 30% off',
  backgroundVideo: 'https://img.ly/static/ubq_video_samples/bbb.mp4',
};

// An empty license runs in evaluation mode and watermarks the output
const engine = await CreativeEngine.init({
  license: process.env.CESDK_LICENSE ?? '',
});

try {
  // Load the template that was built in the editor
  await engine.scene.load(await fs.readFile('./promo.scene', 'utf8'));

  // Text props become text variables
  engine.variable.setString('headline', props.headline);

  // Media props replace the fill of a named placeholder
  const [background] = engine.block.findByName('backgroundVideo');
  const fill = engine.block.getFill(background);
  engine.block.setString(fill, 'fill/video/fileURI', props.backgroundVideo);
  await engine.block.forceLoadAVResource(fill);

  // Export the page as MP4
  const [page] = engine.block.findByType('page');
  const video = await engine.block.exportVideo(page, {
    mimeType: 'video/mp4',
    framerate: 30,
    onProgress: (rendered, encoded, total) =>
      console.log(`${encoded}/${total} frames`),
  });
  await fs.writeFile('./promo.mp4', Buffer.from(await video.arrayBuffer()));
} finally {
  engine.dispose();
}
```

Install the package with `npm install @cesdk/node-native`, then check these requirements before you plan servers:

- The package needs Node.js 22 or newer on macOS, Linux x64 with glibc 2.39 or newer, or Windows x64, as listed on the [compatibility page](https://img.ly/docs/cesdk/node-native/compatibility-139ef9.md).
- AWS Lambda's managed Node.js runtimes ship glibc 2.34, which is too old. Run the script in a container or on a server you control.
- On Linux, install GStreamer and its plugin sets before you run the script, since the package doesn't start without them. Exports there use open-source codecs meant for testing and development unless your license includes the licensed codec pack. macOS uses its hardware encoder.
- Without a license key, the engine runs in evaluation mode and adds a watermark. A free trial key removes it for 30 days.

On Ubuntu 24.04, this installs GStreamer and the plugin sets the package uses:

```bash
apt-get install -y libgstreamer1.0-0 gstreamer1.0-plugins-base \
  gstreamer1.0-plugins-good gstreamer1.0-plugins-bad \
  gstreamer1.0-plugins-ugly gstreamer1.0-libav gstreamer1.0-gl
```

To render several videos, keep one engine running and load the template again for each row of data. For larger batches, use the [CE.SDK Renderer](https://img.ly/demos/export-using-renderer.md). It runs the same templates in a Docker container on Linux and needs an NVIDIA GPU for video. Our [Renderer introduction](https://img.ly/blog/ce-sdk-renderer-creative-automation.md) explains where it fits in an automation pipeline, and the [server-side video rendering](https://img.ly/use-cases/server-side-video-rendering.md) page covers the setup.

## Let Users Edit the Same Template

The same `promo.scene` also opens in the CE.SDK [video editor](https://img.ly/demos/video-ui.md), so your users edit the template your server fills. In Remotion, an editing interface is something you build or buy. Here, users work in the Adopter role, which is made for people customizing a template:

- Users change what the template allows, like the headline and the background clip, and the locked logo stays in place.
- Editable elements need permission, so turn on text editing for the headline and replacement for the placeholder when you build the template.
- Locks apply to people in the editor, but your server code can still change any element.
- The video editor also runs natively in iOS and Android apps through the [mobile video SDK](https://img.ly/products/video-sdk-mobile.md).
- For playback without editing, the [Video Player starter kit](https://img.ly/docs/cesdk/js/starterkits/player-6sjm1w.md) plays a scene in your web app.

A marketing manager at the automotive group that uses Digitas Germany's portal said:

> "I built a better-looking asset in the portal than the agency ever did."

Our guide to [video automation](https://img.ly/blog/automating-video-creation-at-scale-templates-timelines-rendering.md) goes deeper into template design for video, from safe zones for clips to text that adapts to its duration.

To see placeholders in a video template, open the <a href="https://img.ly/demos/placeholders-video/web/" data-analytics='cta_clicked, {"props":{"location":"blog-article-cta","page":"remotion-to-cesdk-migration","destination":"demos"}}'>video placeholders demo</a>, or <a href="https://img.ly/get-started/" data-analytics='cta_clicked, {"props":{"location":"blog-article-cta","page":"remotion-to-cesdk-migration","destination":"internal"}}'>start building</a> with CE.SDK and rebuild your first template.

## FAQ

**Can I convert my Remotion compositions to CE.SDK automatically?**  
No. A Remotion composition is React code, so you rebuild each template once in the CE.SDK editor. The data you fill it with carries over.

**Do I need to change my data pipeline?**  
Usually not. Give each text and media prop a matching text variable or named placeholder, and the same JSON you passed as input props fills the CE.SDK template. Media props need absolute URLs, not staticFile() paths.

**Which files from a Remotion project can I reuse in CE.SDK?**  
Most of them. Rendered MP4 clips in H.264 or H.265, PNG, JPEG and WebP stills, captions exported as SRT, Lottie JSON files, fonts and audio all import into CE.SDK. You rebuild only the composition, because it's React code.

**Can CE.SDK render videos on AWS Lambda?**  
Not on Lambda's managed Node.js runtimes. They ship glibc 2.34, and the Node.js package needs 2.39 or newer. Run it in a container or on a server you control instead. For batch rendering, the CE.SDK Renderer runs in Docker on an NVIDIA GPU.

**What happens to animations built with spring() and interpolate()?**  
They don't carry over. CE.SDK has in, out and loop animation presets with adjustable duration and easing, but no frame-by-frame animation code. Pick the closest preset, or leave videos that depend on custom motion in Remotion.

**Can I keep Remotion for some videos and move others?**  
Yes. Remotion and CE.SDK don't share a file format, but you can run both. For example, keep code-driven explainers in Remotion and move the templates people need to edit to CE.SDK.

**Can I test CE.SDK without a license key?**  
Yes. With an empty license key, the engine runs in evaluation mode. Every API and export works, and the output carries a watermark. A free trial key removes the watermark for 30 days.

---

## More Resources

- **[IMG.LY Website](https://img.ly/index.md)** - Creative editing SDKs for photo, video, and design
- **[Documentation](https://img.ly/docs/cesdk/)** - CE.SDK developer documentation
- **[Contact Sales](https://img.ly/forms/contact-sales.md)** - Get a custom quote. A public JSON API accepts the request directly, no account or key needed. Ask your user for consent and their details first.