explaingit

ybouane/videoflow

Analysis updated 2026-05-18

78TypeScriptAudience · developerComplexity · 3/5LicenseSetup · moderate

TLDR

VideoFlow lets you build videos by writing TypeScript code instead of using a video editor, then render the result to MP4 on a server, in a browser, or preview it live.

Mindmap

mindmap
  root((VideoFlow))
    What it does
      Code based video authoring
      Compiles to JSON format
      Fluent TypeScript API
      Timeline of layers and waits
    Tech stack
      TypeScript
      Node.js
      WebGL effects
      Chromium rendering
    Renderers
      Server MP4
      Browser MP4 export
      Live browser preview
    Use cases
      Automated video generation
      In browser video export
      Video editor building block
    Audience
      Web developers
      Video tool builders

Code map

Detail Auto

An interactive map of this repo's files and how they connect — its source is parsed live in your browser. Click Visualize to build it.

filefunction / class

What do people build with it?

USE CASE 1

Programmatically generate marketing or social media videos from templates and data.

USE CASE 2

Build a web app that exports MP4 videos directly in the user's browser.

USE CASE 3

Create an interactive video editor with scrubbable live preview using the same underlying format.

USE CASE 4

Automate video rendering on a server for bulk or on-demand video generation.

What is it built with?

TypeScriptNode.jsWebGLChromium

How does it compare?

ybouane/videoflowadrienckr/notslopalchemz/solana-pumpfun-token-bundler
Stars787878
LanguageTypeScriptTypeScriptTypeScript
Setup difficultymoderateeasyhard
Complexity3/52/54/5
Audiencedeveloperwriterdeveloper

Figures from each repo's GitHub metadata at analysis time.

How do you get it running?

Difficulty · moderate Time to first run · 30min

Server rendering needs a one time Playwright Chromium download, pick the matching renderer package for your environment.

Apache 2.0 license, free to use, modify, and distribute including for commercial projects, as long as you keep the license notice.

In plain English

VideoFlow is a toolkit for building videos with code instead of a traditional video editor. Using a fluent TypeScript API, you describe a video step by step: add text, images, or clips, then animate their position, scale, and opacity over time. The result compiles into a portable JSON format that describes the whole video, which can then be rendered into an actual MP4 file. What makes this interesting is that the same JSON can be rendered in three different ways. It can be turned into an MP4 on a Node.js server using a headless version of the Chrome browser, rendered into an MP4 directly inside a user's web browser, or played back live with full scrubbing controls so someone can preview and skim through it like a video player. This means the same video definition works whether you are generating videos automatically on a server, letting users export videos from their browser, or building an interactive editor. The library comes with over 25 built in transitions such as slide, blur, glitch, and typewriter effects, along with a set of visual effects like bloom and color correction that can be animated over time. Sizes in a project are defined in resolution independent units, so a layout built for a 1920x1080 video will look the same at other resolutions like 4K. The project is organized as four separate npm packages: a core package for defining and compiling videos, and three renderer packages for the server, browser export, and live browser preview, so you only install what you actually need. There is also a separate React component available for building a visual drag and drop editor on top of the same video format. Getting started involves installing the core package plus one renderer package, then writing a short TypeScript script that defines layers, animations, and timing, and calling a render function to produce the final video file.

Copy-paste prompts

Prompt 1
Write a VideoFlow script that creates a 1920x1080 video with a title that fades in, holds for 2 seconds, and fades out.
Prompt 2
How do I render a VideoFlow JSON project to MP4 on a Node.js server using @videoflow/renderer-server?
Prompt 3
Show me how to add a slideUp transition and a color correction effect to an image layer in VideoFlow.
Prompt 4
Set up @videoflow/renderer-dom to preview a VideoFlow project with scrubbing controls in the browser.
Prompt 5
Create a VideoFlow group that composites a text layer and a shape layer with a shared zoom transition.

Frequently asked questions

What is videoflow?

VideoFlow lets you build videos by writing TypeScript code instead of using a video editor, then render the result to MP4 on a server, in a browser, or preview it live.

What language is videoflow written in?

Mainly TypeScript. The stack also includes TypeScript, Node.js, WebGL.

What license does videoflow use?

Apache 2.0 license, free to use, modify, and distribute including for commercial projects, as long as you keep the license notice.

How hard is videoflow to set up?

Setup difficulty is rated moderate, with roughly 30min to a first successful run.

Who is videoflow for?

Mainly developer.

Open on GitHub → Explain another repo

This repo across BitVibe Labs

Verify against the repo before relying on details.