VideoFlowcodeGitHubTry itCoreRenderersReact Video EditorPlaygroundExamplesDocscodeGitHubTry it
Getting started
InstallationQuick startCore conceptsYour first video
Builder
Builder APITime formatsParallel & wait
Layers
TextImageVideoAudioCaptionsShapeGroups
Animation
Animate & keyframesEasing functionsTransitionsEffects
Renderers
Browser rendererServer rendererDOM preview
React Video Editor
QuickstartThemingUploadsCustom panelsHooks & commandsKeyboard shortcuts
API reference
Overview@videoflow/core@videoflow/renderer-browser@videoflow/renderer-server@videoflow/renderer-dom@videoflow/react-video-editor

Time formats

Every duration in VideoFlow passes through a single parser. You can give it a number, a string with a unit, a clock form, or a frame count — the parser returns seconds, and every downstream API works in seconds.

Supported inputs

InputSecondsNotes
55Any plain number is seconds.
0.50.5Fractions fine.
'2s'2Seconds with suffix.
'500ms'0.5Milliseconds.
'3m'180Minutes.
'1h'3600Hours.
'120f'depends on fpsAt 30 fps → 4s. At 60 → 2s.
'00:30'30mm:ss form.
'01:20:05'4805hh:mm:ss form.
'00:05:10:15'depends on fpshh:mm:ss:ff — ff is frames.

Where you can pass them

Anywhere the API accepts a duration. A partial list:

$.wait('2s');
$.wait(0.5);
$.wait('120f');                                    // 120 frames

layer.animate({...}, {...}, { duration: '750ms' });
layer.animate({...}, {...}, { duration: '30f' });  // frame-exact
layer.fadeIn('500ms');
layer.fadeOut('1s');

// Trim a clip's source — start 5s in, play sourceStart-relative.
$.addVideo({}, { source, sourceStart: '00:00:05' });

// Schedule a layer with the flow pattern instead of an explicit sourceDuration.
$.wait('2s');
const t = $.addText({ text: 'hi' });
$.wait('3s');
t.remove();

Frames and fps

Frame-count inputs ('120f', 'hh:mm:ss:ff') are parsed against the project's fps. If your flow is 30 fps, '30f' is one second. If you change the fps after the fact, all frame-based durations shift accordingly.

Tip. Mix units for readability: $.wait('1s'); $.wait('15f') is clearer than $.wait(1.5) when the 15 frames matter.

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 TypeScriptHow to Turn Markdown Changelogs into Automated Product Update VideosAutomating Personalized Onboarding Videos with VideoFlow and TypeScriptAutomating YouTube Shorts: Build a Vertical Video Factory in 30 Lines of TypeScriptCinematic 3D Video with TypeScript: A Guide to Perspective and RotationCinematic GLSL Effect Stacking: Building High-End Visuals with CodeDiffable Video: Versioning Your Media Pipeline with VideoJSON
© 2026 VideoFlow. Apache-2.0 core.