How to Make a Product Demo Video with Remotion (and When Not to Build It Yourself)

Remotion lets you write videos as React components. Here's how a product demo maps onto it, what the hard parts are, and what to check in the license before you start.

If you build a React app, there's an appealing idea: why not make the product demo in React too? Your components already exist. Remotion is a framework that renders React components frame by frame into video, so in principle you can reuse your UI, animate it and export an MP4.

That idea works. It's also more work than it first looks. This post walks through how a demo maps onto Remotion, the parts that take the most time, and when it makes sense to use a tool instead of writing it all yourself.

Disclosure: I build DemoVexa, which is product demo video software that writes the Remotion code for you. Everything in the first part of this post applies whether you use it or not.

Key takeaways

• Remotion renders React components into video, so a product demo becomes a set of components animated over time.
• The hard parts are not rendering. They're the story, recreating screens with sample data, and timing animation to narration.
• Check Remotion's license: it's free for individuals and for profit companies with up to 3 employees, and larger companies need a Company License.
• Build it yourself for full control. Use a tool if you want the script, voice and timing handled for you.

Contents

• Key takeaways
• How does a demo map onto Remotion?
• Can you reuse your real components?
• What are the hard parts?
• What should you check in the license?
• When does it make sense to build it yourself?
• What does a tool add on top of Remotion?
• FAQ

How does a demo map onto Remotion?

In Remotion, a video is a React component that receives the current frame. You decide what's on screen at each frame. A demo usually breaks down like this:

• A composition for the whole video, with a width, height, frame rate and duration.
• A sequence per scene, placed at a start frame with a length.
• Screen components that look like your app: a sidebar, a table, a form.
• Animation helpers that move a cursor, type text or highlight a button based on the frame.
• Audio for narration and music.

A minimal scene might look like this:

import { AbsoluteFill, Sequence, useCurrentFrame, interpolate } from "remotion";

export const Demo = () => (
  <AbsoluteFill>
    <Sequence from={0} durationInFrames={90}>
      <InvoicesScene />
    </Sequence>
  </AbsoluteFill>
);

const InvoicesScene = () => {
  const frame = useCurrentFrame();
  const opacity = interpolate(frame, [0, 15], [0, 1]);
  return <div style={{ opacity }}>{/* your invoices table */}</div>;
};

You preview it in Remotion's studio in the browser and render with the Remotion CLI.

Can you reuse your real components?

Sometimes, but often not directly. Real components tend to depend on things a video doesn't have:

Dependency	Why it's a problem in a video	Common fix
API calls and data fetching	No backend while rendering	Pass sample data as props
Auth and user context	No logged in user	Wrap in a fake provider
Global CSS and theme setup	Styles may not load the same way	Import the theme into the video project
Animation libraries tied to real time	Remotion renders by frame, not by clock	Drive animation from the current frame
Browser only APIs	Rendering happens in a headless browser, but some APIs still behave differently	Stub them in the video project

Many people end up writing simplified "video versions" of their screens that look the same but take plain props. That's fine, and it's often faster than making real components render cleanly outside the app.

What are the hard parts?

Rendering is the easy part. The time goes into:

1. The story. Deciding which screens to show, in what order, and why. No framework helps here.
2. Sample data. Believable names and numbers for every table and chart.
3. Timing to narration. If there's a voiceover, each click and caption should land on the right word. That means knowing where each word starts in the audio and converting it to frames.
4. Formats. A 16:9 layout doesn't work as 9:16. Each format needs its own arrangement.
5. Maintenance. When the real UI changes, the video version of each screen has to change too.

What should you check in the license?

Remotion is not MIT licensed. According to its license page (checked October 2026), the Free License covers individuals, for profit organisations with up to 3 employees, non profits, and evaluation before commercial use, and it allows commercial videos. Other companies need a Company License, sold through remotion.pro. The page also notes that the license will change slightly in Remotion 5.0, and it has an FAQ for edge cases. Read the current terms before you build anything for a company.

When does it make sense to build it yourself?

Building a demo in Remotion yourself makes sense when:

• You want full control over every frame and animation.
• You'll make a small number of videos and maintain them like code.
• You have someone who enjoys this kind of work and has time for it.

It makes less sense when you need many videos, several languages, or frequent updates, and nobody has time to keep the video project in sync with the app.

What does a tool add on top of Remotion?

Some tools use Remotion underneath and automate the parts above. DemoVexa is one: it's product demo video software that writes the Remotion code for you. Claude reads your app's code, writes the script, and a build agent recreates your screens in React and animates them with Remotion, timing each move to the voiceover. You review the brief, script and scene plan instead of writing components.

FAQ

What is Remotion?

Remotion is a framework for making videos with React. You write components that render based on the current frame, preview them in a browser studio and render them to video files.

Is Remotion free to use?

According to Remotion's license page, it's free for individuals, for profit organisations with up to 3 employees, non profits and evaluation, including commercial videos. Other companies need a Company License. Check the current terms, since the page says they change slightly in Remotion 5.0.

Can I use my app's real React components in a Remotion video?

Sometimes. Components that fetch data, need a logged in user or animate on real time usually need sample data props, fake providers or frame based animation before they render cleanly in a video.

Do I need to know Remotion to make code-generated demo videos?

Not with every tool. In DemoVexa, Claude builds the video in React with Remotion, and you change it by editing the brief and script or by asking for the change in plain words. The DemoVexa FAQ on making demo videos from code covers what else you need.