VideoFlowcodeGitHubStudioTry itCoreRenderersReact Video EditorPlaygroundExamplesDocscodeGitHubStudioTry it
Example

Basic text

Fade a title in and out.

#text#fade
// One title animated with hand-rolled keyframes — addText + animate + $.wait.
const $ = new VideoFlow({
  name: 'Basic Text',
  width: 1920,
  height: 1080,
  fps: 30,
});

// fontSize is in em (1em = 1% of project width).
const title = $.addText({
  text: 'Hello, VideoFlow!',
  fontSize: 9,
  fontWeight: 800,
  color: '#ffffff',
});

// Entry: fade + scale-up. animate() pushes two keyframes and advances flow.
title.animate(
  { opacity: 0, scale: 0.8 },
  { opacity: 1, scale: 1 },
  { duration: '0.8s' },
);

$.wait('1.5s');
title.animate(
  { opacity: 1, scale: 1 },
  { opacity: 0, scale: 1.2 },
  { duration: '0.8s' },
);

return $;
Compiling00:00
play_arrowOpen in playgroundcodeSource on GitHub← All examples
VideoFlow

Open-source toolkit for composing videos from code.

Product

CoreRenderersReact Video EditorPlaygroundStudio

Learn

DocsAPI referenceExamplesvs. Remotionvs. FFmpeg

Project

GitHubLicenseContactTermsPrivacy

From the blog

All posts →Building a "Canva for Video" with the @videoflow/react-video-editorAutomating Social Media Captions: A Developer's Guide to Frame-Perfect SubtitlesBeyond Node: How to Render Cinematic Videos from Python and GoBuilding a Video Rendering API with Node.js and VideoFlow (No FFmpeg Required)Mastering Programmatic Video Transitions: A Developer's GuideProgrammatic Video Storage: Why Your MP4s Should Live as Version-Controlled JSONThe Video Markdown Pattern: Turning Static Content into Automated MP4sZero-Cost Video Rendering: How to Export MP4s Directly in the Browser
© 2026 VideoFlow. Apache-2.0 core.