React is known for its ability to create frontend web animations and special effects. Programmer Jonny Burger found video editors challenging to use, so he decided to take React’s animation capabilities and build a framework that uses React code to create videos. It’s called Remotion.
“There are many unsolved problems left for video, for people who want to build their own video editor,” Burger told The New Stack. “Our mission is to allow people … to allow an individual to build their own really good video editor in a weekend.”
Why would anyone want to create video with code? First, it’s difficult to programmatically alter video using existing tools, Burger said.
“Video editors that let you click a button to export video and to interface with these programs programmatically — it’s very hard because it’s not what they were made for,” he said.
Second, it’s possible to do more than just create a video with Remotion. In fact, there are three main use cases for using Remotion:
One marathon organizer in Switzerland used Remotion to provide a personalized video for runner showing them crossing the finish line. The organizers used Remotion to batch render the video, incorporating an animation of their time and a cut-in greeting from a famous marathon runner.
Some users are even adding AI to the mix, allowing them to combine AI avatars with special effects animations and subtitles using Remotion, he said. That approach is already used to create videos for YouTube and TikTok, he added.
Submagic is one company that uses Remotion in this way, allowing users to upload long-form videos and use AI to extract short snippets, which are captioned, and special effects added to make them more engaging for social media sites. Burger said they’re creating more than 100,000 videos a month with this technique.
Software developers can also create their own video editor with Remotion, he added.
Screenshot from Remotion’s site.
“There are so many different video, audio formats and codecs out there, and to deal with whatever the user throws at it is actually really difficult,” he said. “Our plan is to solve a lot of boring problems so that you are able to create a video editor like you’re used to, but you don’t need to spend decades building it.”
Remotion is source available, rather than open source, which means the code is available for developers to review and they can submit changes to it. More than 200 developers have contributed to it. That said, Remotion has an unusual approach to licensing. There is a free license for individuals, non-profits, evaluation purposes and businesses of only three people, and then there is a separate business license for larger companies that want to use the framework commercially.
Burger said the license grew out of a fear that the project would prove popular but he wouldn’t have the resources to properly manage it.
“I usually would publish all my projects as open source, and I had a fear that this would blow up so much, but open sourcing, it’s literally giving it away for free,” he said. “I’m also an advocate for other maintainers that they should, before open sourcing a project, think about how it’s looking on the sustainability side, from the money and time that they have to invest to make the project big. I hope that people in general think more about this and adopt similar licenses.”
Thanks to the licensing tiers, Remotion is in a break-even state, he said, and Burger can pay himself and Mehmet Ademi, Remotion’s business manager.
There are open source options for creating video, such as FFmpeg, but they’re not “really programmable” with if statements and the ability to pull in data, Burger said. They also do not show live preview, he added.
“Our videos are fully programmable with code, so you essentially code a website. We use the browser as our canvas, because the browser is really good at displaying all kind of of graphics. Then we provide a way to turn that into a video.”
— Jonny Burger, creator of Remotion
“Our videos are fully programmable with code, so you essentially code a website. We use the browser as our canvas, because the browser is really good at displaying all kind of of graphics. Then we provide a way to turn that into a video,” he said.
There are two similar, but not really the same, projects, he added: Framer Motion, a React animation library, and Motion Canvas.
If the plan is to make only one video, then a traditional video editor will probably meet your needs, Ademi added.
“If you have the skills for the traditional video editors and you want to create only one video, you’d rather use those,” Ademi said. “What we provide is basically a solution for scalable video production. So a full use of Remotion would be creating your own web video editor so that people can use it to create their videos, which is a simplified version of an Adobe After Effects video editor, for example.”
Moving forward, Remotion plans to add small packages so developers can just install a package to solve a specific video problems — like Legos pieces for video, he said. For instance, there is already a package that automates transcription, and Burger plans to add a package for including a GIF in the video.
“Over time, we plan on making this more and more like Legos, where you just put together the right packages,” he said.
Editor’s Note: Story has been updated Sept. 11, 2024, to correct to FFmpeg as an option for creating videos and Framer Motion as a similar offering. It also updates to clarify that Remotion is not open source, but rather source-available.
