VideoFlow vs. FFmpeg — programmatic video without the shell scripts.
FFmpeg is powerful. Its filtergraph syntax is also notoriously write-once, read-never. VideoFlow lets you compose the same kinds of videos in typed code and portable JSON — then use FFmpeg as the workhorse underneath where it counts.
| VideoFlow | FFmpeg CLI | |
|---|---|---|
| Learning curve | Fluent, typed API | Dense flag syntax, filtergraph DSL |
| Composability | JSON is data — version, diff, template | Shell strings, often copy-pasted |
| Preview before render | Live DOM preview, frame-accurate | Re-render or trial-and-error |
| Audio mixing | Declarative, per-layer | Complex filtergraph plumbing |
| Cross-platform | Browser + Node + server | Wherever ffmpeg binary lives |
| Typing | Full TS types for every prop | None |
A fade-in and a caption — two ways.
FFmpeg
ffmpeg -i bg.mp4 -vf \
"drawtext=text='Hello':fontsize=120:\
x=(w-text_w)/2:y=(h-text_h)/2:\
alpha='if(lt(t,1),t,1)'" out.mp4VideoFlow
const $ = new VideoFlow();
$.addVideo({}, { source: 'bg.mp4' });
const t = $.addText({ text: 'Hello', fontSize: 4 });
t.fadeIn('1s');
await $.renderVideo();Frequently asked.
Does VideoFlow use FFmpeg under the hood?
No — by default the server renderer encodes via WebCodecs + MediaBunny inside headless Chromium, so ffmpeg is not required. You can opt in with { ffmpeg: true } when you need custom encoder flags.
Can I still drop into a filtergraph?
Not directly — VideoFlow abstracts the filtergraph. For most production videos you will not need to.
What about performance?
Server rendering is frame-by-frame and deterministic. Browser rendering is on-device and cancellable.