VideoFlowcodeGitHubStudioTry itCoreRenderersReact Video EditorPlaygroundExamplesDocscodeGitHubStudioTry 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 EditorPlaygroundStudio

Learn

DocsAPI referenceExamplesvs. Remotionvs. FFmpeg

Project

GitHubLicenseContactTermsPrivacy

From the blog

All posts →Cinematic Code: How to Stack and Animate GLSL Effects in VideoFlowHeadless Video as a Service: Building a Scalable Rendering API with Node.jsProgrammatic Video Localization: Scaling Multilingual Content with VideoFlowFrom JSON to MP4 in the Browser: Zero-Server Video ExportAnimated Infographics as Code: Building a Reusable Data-Viz LibraryCI/CD for Video: Building a Diffable Asset Pipeline with VideoFlowBeyond Static Images: Generating Dynamic Social Share Videos from MetadataHow to Embed a Full-Featured Video Editor in Your React App
© 2026 VideoFlow. Apache-2.0 core.