VideoFlowcodeGitHubTry itCoreRenderersReact Video EditorPlaygroundExamplesDocscodeGitHubTry it
← Back to Blog

Treating Video like Markdown: How to Automate Explainer Videos with VideoFlow

May 22, 2026 · By VideoFlowLearn how to automate explainer videos by treating video as portable, structured data. Explore the 'write, don't edit' workflow with VideoFlow and TypeScript.Treating Video like Markdown: How to Automate Explainer Videos with VideoFlow

Treating Video like Markdown: How to Automate Explainer Videos with VideoFlow

For a long time, video production has been the last bastion of manual labor in the modern content stack. We’ve automated our deployments, our documentation, and even our design systems. Yet, when it comes to creating a simple explainer video, we often find ourselves stuck in a GUI, dragging keyframes on a timeline like it’s 2005.

At VideoFlow, we believe that the same mental model that made Markdown a standard for documentation can be applied to video. By treating video as a portable, structured data format, we can automate explainer videos at a scale that manual editing simply cannot touch.

The "Write, Don't Edit" Workflow

Markdown succeeded because it removed the friction of formatting. You focus on the content, and the renderer handles the presentation. VideoFlow brings this same philosophy to motion graphics. Instead of thinking in frames and layers, you think in flows and primitives.

Consider a typical explainer section: a title appears, some supporting text follows, and a background image fades in. In a traditional editor, that's a dozen clicks. In VideoFlow, it's a few lines of TypeScript:

import VideoFlow from '@videoflow/core';

const $ = new VideoFlow({ width: 1920, height: 1080 });

// Add a background that blurs in
const bg = $.addImage(
  { fit: 'cover', opacity: 0.6, filterBlur: '1em' },
  { source: 'https://images.unsplash.com/photo-1618005182384-a83a8bd57fbe' },
);

// Add a hero title with a cinematic reveal
const title = $.addText(
  { text: 'Automate Everything', fontSize: 8, color: '#FF5A1F' },
  { transitionIn: { transition: 'lightSweepReveal', duration: '800ms' } }
);

$.wait('2s');
title.fadeOut();

This isn't just a script; it's a document. Because it's code, you can wrap it in a loop, feed it data from a CMS, or even let an LLM generate the JSON structure for you.

The VideoFlow rendering pipeline showing code transforming into video frames

Portable VideoJSON: The Markdown of Motion

One of the biggest hurdles in programmatic video is the "where does it render?" problem. Many tools are tied to a specific environment—either a proprietary cloud API or a specific framework like React.

VideoFlow solves this with VideoJSON. When you call $.compile(), the builder produces a portable JSON document that describes the entire timeline. This document is resolution-agnostic and renderer-agnostic. You can preview it at 60 FPS in your browser using the Playground, then send that exact same JSON to a Node.js server to render the final MP4.

This portability is what makes it feel like Markdown. You can store your videos in a database, version-control them in Git, and diff them just like any other part of your codebase. If you're currently evaluating Remotion alternatives, this JSON-first architecture is one of the primary reasons developers make the switch to VideoFlow.

Cinematic Primitives Out of the Box

Automating a video shouldn't mean sacrificing quality. A common mistake in programmatic video generation is settling for simple opacity fades because anything else is too hard to code.

VideoFlow ships with 27 transition presets and 42 GLSL effects built directly into the core. Whether you need a glitchResolve for a tech-heavy intro or a blurResolve for a clean SaaS demo, you just name the preset in your settings. No manual shader math required.

JSON tree structure representing video layers

Rendering at Scale Without FFmpeg

Most video pipelines eventually hit the "FFmpeg wall." Managing FFmpeg binaries on serverless functions or in containerized environments is notoriously painful.

Our official server-side renderer, @videoflow/renderer-server, changes the game. By default, it uses a headless Chromium instance to encode video via WebCodecs. This means you can render high-quality MP4s in Node.js without ever installing FFmpeg. It’s faster, lighter, and much easier to deploy to environments like AWS Lambda or Google Cloud Run.

Build Your Own Video Factory

By treating video as a structured format, you open the door to use cases that were previously impossible:

  • Personalized Onboarding: Generate a welcome video for every new user that signs up for your SaaS.
  • Dynamic Social Content: Turn your latest blog post or product update into a vertical video automatically.
  • Automated Tutorials: Update your documentation and have your explainer videos re-render themselves to match the new UI.

If you're ready to stop dragging keyframes and start writing them, head over to our builder API guide or check out the VideoFlow GitHub repository to see how it works under the hood. The future of video isn't edited—it's compiled.

Interested in more? Check out our comparison on VideoFlow vs FFmpeg to see why a typed builder beats shell scripts every time.

VideoFlow

Open-source toolkit for composing videos from code.

Product

CoreRenderersReact Video EditorPlayground

Learn

DocsAPI referenceExamplesvs. Remotionvs. FFmpeg

Project

GitHubLicenseContactTermsPrivacy

From the blog

All posts →How to Automate Loom-style Product Demos with TypeScriptAutomated Podcast Audiogram Generator: Turning Audio into Viral Video with TypeScriptAutomating Personalized Onboarding Videos with VideoFlow and TypeScriptAutomating YouTube Shorts: Build a Vertical Video Factory in 30 Lines of TypeScriptCinematic GLSL Effect Stacking: Building High-End Visuals with CodeHeadless Video Rendering in Node.js: No FFmpeg RequiredVideo as Data: Building an LLM-Powered Video Generation PipelineMastering Motion: A Deep Dive into VideoFlow Transitions and Easing
© 2026 VideoFlow. Apache-2.0 core.