Tools That Turn Code Into Video: HyperFrames, Remotion, Motion Canvas, Manim and More

You can make a video by writing code that describes each frame. A program then draws the frames and saves them as a video file. HyperFrames uses HTML, Remotion uses React, Motion Canvas and Revideo use TypeScript, and Manim uses Python. All five are free to install. Below: what each one is, what its licence or price page says, and the first commands to try. We read every page on 12 November 2026.

011. At a glance

Five tools turn code into video on your own computer; two more do it as a hosted service.

Tool	What you write	Licence or price, from its own pages	First command
HyperFrames	HTML, CSS and JavaScript	Apache 2.0, “with no per-render fees or commercial-use thresholds”	npx hyperframes init my-video
Remotion	React	Free for individuals, non-profits and for-profit organisations with up to 3 employees; a company licence above that	npx create-video@latest --hello-world
Motion Canvas	TypeScript	MIT licence	npm init @motion-canvas@latest
Revideo	TypeScript	MIT licence	npm init @revideo@latest
Manim (Community edition)	Python	MIT licence	manim init project my-project --default
Creatomate	A template, or nothing at all	Hosted; 50 free credits, previews up to 480 pixels	Sign up on its site
Shotstack	A request from your own code	Hosted; you pay for the minutes of video you make	Sign up on its site

The big difference is the language you write in. For Remotion, the size of your company matters too.

For example, a web designer who already writes HTML could open HyperFrames and feel at home. A maths teacher who knows a little Python might reach for Manim.

022. How code becomes a video

The code describes every frame, a renderer draws each one, and FFmpeg joins them into a file.

A headless browser is a web browser that runs without a window on screen. Chrome’s documentation says headless mode lets you run the browser “without any visible UI”. FFmpeg is a free program that can encode, convert and play video and audio. FFmpeg’s own site says it can decode, encode, transcode and play “pretty much anything that humans and machines have created”.

HyperFrames’ renderer seeks each frame in headless Chrome and encodes the result with FFmpeg, so the same input produces the same video. Remotion installs a version of Chrome called Chrome Headless Shell to render videos. Remotion’s docs describe the idea as giving you “a frame number and a blank canvas” to draw on with React.

Because the video is code, one template can make many versions. HyperFrames lists uses such as product launch videos, PR walkthroughs, data visualisations and social videos with kinetic captions.

For example, think of a flip book. The code draws each page, and FFmpeg binds the pages into a book that plays.

033. The tools

Each one is free to install; they differ in the language you write and the licence.

HyperFrames

HyperFrames is HeyGen’s free, open-source tool for turning web pages into MP4 videos.

You write the video as a web page, with timing added to the HTML. You can also describe the video and let an AI coding agent write the code. Its licence says there are no per-render fees.

HyperFrames is a free, open-source framework for turning HTML, CSS, media, and seekable animations into deterministic MP4 videos. Its licence file carries the line “Copyright 2026 HeyGen, Inc.” It works with animation libraries such as GSAP, Lottie, Three.js and Anime.js. Its docs say you can describe the video and an agent writes the HTML, CSS and JavaScript. It ships 9 skills for AI coding agents such as Claude Code, Codex and Cursor.

Its README describes the licence as “Apache 2.0 license, with no per-render fees or commercial-use thresholds”.

There is also a desktop app for people who would rather not code. The HyperFrames Studio app runs on Mac, Windows and Linux. Its docs say “You do not need to write code.” It is free, and you sign in with a free HeyGen account. The free plan includes 3 AI video clips and 5 cloud exports a month. The Pro plan is $25 a month with 25,000 credits a month, and is separate from HeyGen plans.

To start, install Node.js and FFmpeg, then run three commands. HyperFrames needs Node.js 22 or later and FFmpeg.

npx hyperframes init my-video
npx hyperframes preview
npx hyperframes render

Watch for: HyperFrames has rules to follow. Its makers’ own comparison guide says it asks you to follow rules, “paused timeline, no wall clocks, no unseeded randomness”, and “breaks quietly if you don’t”.

For example, a shop could keep one HTML template and render a short video for each new product.

Remotion

Remotion makes videos from React code, and its free licence covers individuals and small companies.

If you already build websites in React, you write video scenes the same way. The licence is not open source, so check who counts as eligible before you use it at work.

Remotion describes itself as a way to make videos programmatically. Its licence lets individuals, non-profits and for-profit organisations with up to 3 employees use it for free, “even commercial”. It says “a company license is required for for-profit organizations of a certain size”. Its FAQ says Remotion is source-available software, not open source under the Open Source Initiative’s definition. The licence file also says it “will slightly change” in Remotion 5.0.

Its pricing page lists Remotion for Creators at $25 a month per seat, and Remotion for Automators at $0.01 per render with a $100 monthly minimum. Enterprise plans start at $500 a month. HyperFrames’ own comparison guide, written by its makers, says Remotion “is older and much more established”.

To start, install Node.js, then create the sample project. Remotion needs at least Node 16 or Bun 1.0.3. Its docs say macOS 15 (Sequoia) or later is required on a Mac. For a first project without a coding agent, its docs recommend the Hello World template. You can render on your own computer, or on AWS Lambda.

npx create-video@latest --hello-world

Watch for: the licence depends on who you are. The free list includes “a for-profit organization with up to 3 employees”, so the number of people at your company is the first thing to check.

For example, a developer could feed a list of new customers into one React scene and render a personal thank-you clip for each.

Motion Canvas

Motion Canvas is a free TypeScript library with an editor for timing animations to audio.

You write the animation as code, then line it up with a voiceover in a browser editor. It suits explainers where timing to speech matters.

Motion Canvas describes itself as “a TypeScript library for creating animated videos using the Canvas API”. You write animations in TypeScript in your own code editor and use a web-based editor to sync them with audio. It uses the MIT licence.

To start, install Node.js, create a project, then open the editor. Motion Canvas needs Node.js version 16 or later. After creating a project, you run npm install and npm start to open the editor.

npm init @motion-canvas@latest

Watch for: its built-in exporter saves an image sequence, a series of still pictures. It comes with a built-in Image sequence exporter, and you can install a Video (FFmpeg) exporter to produce a finished video.

For example, an explainer on how a sorting method works could show each step in time with the narrator’s voice.

Revideo

Revideo grew out of Motion Canvas and is aimed at rendering videos from code automatically.

It keeps the TypeScript style of Motion Canvas, but its focus is rendering videos automatically, for example on a server.

Revideo’s docs say it “is forked from Motion Canvas”. Its README calls it “a rendering engine for creating videos in code”. It ships a headless render API for generating videos programmatically and a React player for previewing scenes in the browser. It says a scene is plain TypeScript, so an AI coding agent can produce one from a prompt. It runs anywhere Node and a headless browser run, including serverless platforms like Google Cloud Run. Its docs say developers use it to automate video editing tasks or to build web-based video editors. It uses the MIT licence.

To start, create a project with one command.

npm init @revideo@latest

Watch for: it counts renders by default. Revideo anonymously counts how many videos are rendered, and you can turn this off with DISABLE_TELEMETRY=true.

For example, a sports club could render a results clip each week from the scores in a spreadsheet.

Manim

Manim is a free Python engine for maths animations, in a community edition and the original.

There are two versions with similar names. The community edition is the one with beginner docs, by its own account.

Manim was originally created by Grant Sanderson as a personal project and for use in his YouTube channel, 3Blue1Brown. In mid-2020, a group of developers forked it into what is now the community edition. The original, ManimGL, has more experimental features, and breaking changes between its versions are not documented. The community edition’s own docs recommend it “especially for beginners”. ManimGL describes itself as “an engine for precise programmatic animations, designed for creating explanatory math videos”. The community edition uses the MIT licence, and so does ManimGL.

To start, install the community edition, create a project, then render the sample scene from inside the new folder. Its docs strongly recommend installing it with uv. You can skip LaTeX if you do not need typeset formulas. The quickstart’s first command creates a my-project folder with the files Manim needs, including a main.py file. The main.py file it creates holds a sample scene called DefaultTemplate. The quickstart command renders a scene and creates an MP4 file.

manim init project my-project --default
manim -pql main.py DefaultTemplate

If you installed it with uv, its quickstart says to either activate its virtual environment or put uv run before each manim command.

Watch for: the two versions have different package names. The community edition is “manim” on PyPI, and the original is “manimgl”, so check which one a tutorial uses.

For example, a teacher could show a circle turning into a square, or a graph drawing itself as a formula changes.

044. If you would rather not run it yourself

Hosted services render in the cloud: you send a template or data, and a video comes back.

Some of the tools above can also render in the cloud. HyperFrames can render on HeyGen’s managed cloud, and you sign in or save an API key first. Its docs say 4K is billed at 1.5×. Its cloud guide says media files of 5 MB or more that a project names by path are uploaded as HeyGen assets and linked by a public, unsigned URL. Remotion can render on AWS Lambda in your own cloud account, as noted above.

Creatomate

Creatomate is a hosted service for making videos from templates, with or without code.

You design a template once, then fill it from a form or a spreadsheet. Free renders are small previews, its pricing page says.

Creatomate describes itself as “the media automation platform for developers and no-code users”. Its pricing page answers “Do I need to code?” with “No”, and lists the editor, a spreadsheet, a form or Zapier, Make or n8n. Its free plan gives 50 credits with no credit card and no time limit. Free renders are previews of up to 480 pixels; a paid plan renders them at full size.

Try this: make one template and fill it from a three-row spreadsheet before you build anything bigger.

For example, a small bakery could turn a spreadsheet of daily specials into short clips for social media.

Shotstack

Shotstack is a video editing service your own code talks to: send a request, get a video back.

There is no editor to learn first. You describe the edit in data and the service returns the file.

Shotstack calls itself “The Cloud Video Editing API” and says it “turns your data into finished video”. Its pricing page says you pay for the minutes of video you make. Sign-up gives 10 credits, valid for 30 days.

Try this: render one short test edit with your free credits before you plan a whole pipeline.

For example, an estate agent’s listings could become short tour videos overnight.

We left out the paid prices for both. Each sells credits or minutes, and the plans change often.

055. Before you use one for client work

Licences, codec patents, data sent home and account terms are worth reading before paid work.

This section quotes what the tools’ own pages say. It is not legal advice, and your own situation may differ.

Agencies and Remotion. Remotion’s FAQ says that if you deliver only a finished video file, “Only your agency’s headcount counts”. In that case, its FAQ says, an agency with 3 or fewer personnel is covered by the Free License, and one with 4 or more needs a Company License. If the client will own or run the Remotion project, “both companies’ headcount is aggregated for the 4-person threshold”.

Codec patents. Remotion’s FAQ adds that its licence “does not include a license to third-party patents”, such as patents on codecs like H.264, HEVC or AAC. It goes on: “Depending on your use case and jurisdiction, you may need additional licenses or need to pay royalties.” A codec is the method a video file uses to squeeze its pictures and sound.

Data the tools send home. Some tools count how you use them, called telemetry. Here is what each tool’s docs say.

Tool	What its docs say	How to turn it off
HyperFrames command line	“Nothing personally identifying is collected until you sign in. Signed-in usage is not anonymous.”	HYPERFRAMES_NO_TELEMETRY=1, DO_NOT_TRACK=1 or npx hyperframes telemetry disable
Remotion	Rendering in the browser: telemetry “which cannot be disabled”; rendering on a server: “no automatic telemetry”. Its FAQ says telemetry will become mandatory for “Remotion for Automators” customers in Remotion 5.0. Telemetry in server-side rendering remains voluntary for Free License users and for companies under the “Remotion for Creators” option.	None listed for browser rendering
Revideo	“anonymously counts how many videos are rendered”	DISABLE_TELEMETRY=true

Account terms. HyperFrames Studio and its cloud rendering use a HeyGen account. HeyGen’s terms of service were last updated on October 16, 2026. They give HeyGen a licence to use content you put into its services, “including to train or otherwise improve or modify our artificial intelligence and machine learning models”. The same terms say HeyGen “does not claim to own any of Your Content”, while the licence you grant it is “royalty-free, transferable, sublicensable, worldwide and irrevocable”. Its privacy policy says you may have the right to object to your information being used to train its models, by contacting it. We could not find a page saying which terms cover HyperFrames Studio, so read HeyGen’s terms before uploading client material.

For example, before rendering a client’s unreleased product in a hosted service, check whose servers it goes to and what the terms say about uploads.

Our page on open-weight AI models explains what “open source” means and what it does not.

066. Which fits what you already know

Our reading: start from the language you already use, not from a list of features.

• You build web pages. HyperFrames lets you write the video in HTML, CSS and JavaScript.
• You build in React. Remotion uses the components you already know.
• You write TypeScript. Motion Canvas gives you an editor for timing to audio; Revideo is aimed at rendering automatically.
• You know some Python, or teach maths. Manim’s community edition is the version its docs recommend for beginners.
• You would rather not code. HyperFrames Studio and Creatomate both say you can work without writing code. Our guide to making 3D-style motion graphics videos with AI covers a route with no code at all.
• You want animation inside a web page, not a video file. Our web design resources guide covers players such as Rive and Lottie.

For example, if your next video needs a soundtrack, our free music production toolkit covers sample licences. For visuals that move to music, see our music visualizers page.

07Quick answers

08Use this

09Quick quiz

How we checked this · Last checked November 2026

• We read each tool's README, licence file, docs and pricing page on 12 November 2026, and the HeyGen terms of service and privacy policy.
• We left out paid prices for Creatomate and Shotstack, version numbers and release dates, because they change often.
• We could not find a page saying which HeyGen terms cover HyperFrames Studio, and the page says so.

How we check every article →