What is SuperImg?

SuperImg is a TypeScript framework for programmatic media generation. Write a function that returns HTML or SVG — SuperImg renders it to MP4, GIF, PNG, or SVG.

template.ts

Compiling…

Why Media-as-Code?

Generating video and graphics manually does not scale. If you need 1,000 personalized videos, or you want an AI agent to produce media output, clicking around a timeline editor is not a viable path.

SuperImg treats media as software. Here is what that changes:

Without SuperImg: Open a video editor. Drag assets onto a timeline. Export. Repeat for every variation. Ten videos takes a day. One thousand is impossible.

With SuperImg: Write a template once. Pass a JSON file. Run one command. One thousand videos render in the time it takes a fresh install.

Why it works

Built for AI

Templates are pure functions that return an HTML string. Any LLM can write, debug, and iterate on that without any special training or tooling. Compare that to After Effects expressions, Remotion JSX, or Canvas API code — all of which require domain-specific knowledge.

Batch rendering

Every template accepts a data parameter. Pass a JSON array and get one video per row. The same template that renders a single demo video renders a thousand personalized ones.

One template, every format

All templates live in *.media.ts files. Output kind is determined by config — not the filename. Write once, render in 16:9 for YouTube, 9:16 for TikTok, 1:1 for Instagram, or as a still image or GIF.

Output	Config signal
MP4/WebM	`fps` + `duration`
GIF	`fps` + `duration` + `--format gif`
Image	no `fps`/`duration`
SVG	`medium: "svg"`

Version control

Templates live in your repo. Diff them in pull requests. Roll back a bad animation the same way you roll back a bad deploy.

Core Concepts

Templates are pure functions

f(time, data) = HTML

A template receives the current timeline.progress (from 0 to 1) and your custom data. It uses these to calculate positions, colors, and opacities, and returns an HTML string for that specific frame. No timeline editors. No keyframes. No state.

The Standard Library

SuperImg ships a built-in std library so you are not writing animation math from scratch:

ctx.director() — phase-based motion (enter/hold/exit), nested clips via t.clip()
std.layers() — declarative z-ordered layer stacks
std.reveal.* — full-frame transition effects (wipe, curtain, iris)
std.video.sync() — frame-accurate embedded video in headless render
std.interpolate() — low-level eased value mapping
std.cue.* — transcript and marker sync for voiceovers

Use it where it fits

CLI: Scaffold projects (init), preview templates at 60fps in your browser (dev), and render headlessly to MP4, GIF, or stills (render).

React: Embed live, interactive templates in your web app using the <Player> component. Pass data props to update the video dynamically.

AI pipeline: Call the renderer from Node. Pass generated data in, get MP4 out. No browser required.

Ready to write your first template? Get started →