Responsive Video: Render 4K, 1080p, and 9:16 Clips from One JSON Source

How many times have you had to manually resize a video project? You build a beautiful 16:9 cinematic trailer for YouTube, and then the marketing team asks for a 9:16 version for TikTok, a 1:1 version for Instagram, and a 4K "master" for the archives. In traditional video editors, this usually means three or four separate project files, a lot of manual repositioning, and a nightmare whenever you need to change a single line of text.

When you treat video as code, you shouldn't have to deal with that. In VideoFlow, "responsive video" isn't a feature you toggle—it’s the fundamental way the engine is built. By using a resolution-agnostic coordinate system and relative units, you can author a video once and render it at any resolution, aspect ratio, or frame rate without changing a single line of your source JSON.

The Resolution-Agnostic Secret: em and [0..1]

Most video engines think in pixels. If you place a text layer at x: 100, y: 100 on a 1080p canvas, it looks fine. But if you render that same project at 4K, that text is suddenly tucked away in the tiny top-left corner. If you render it in a vertical 9:16 format, it might be completely off-screen.

VideoFlow solves this by moving away from absolute pixel values. Instead, it uses two core concepts: Normalized Coordinates and Relative Sizing.

1. Normalized Coordinates [0..1]

Every position in VideoFlow is expressed as a coordinate between 0 and 1. A position of [0.5, 0.5] is always the exact center of the screen, whether you are rendering a square thumbnail or a panoramic ultra-wide. This ensures that your focal point stays consistent regardless of the output resolution.

2. Relative Sizing (the em unit)

VideoFlow uses a special em unit where 1em is defined as 1% of the project width. If you set a fontSize to 5, it will always take up 5% of the horizontal span. This ensures that your typography scales perfectly with your resolution. If the video gets wider, the text gets larger to maintain its visual weight. Scaling the project up or down leaves shapes and text visually identical.

Building the "One Source" Template

Let's look at how this works in practice using the @videoflow/core builder API. We'll create a simple hero section that works across any aspect ratio.

import VideoFlow from '@videoflow/core';

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

// A background image that covers the canvas
$.addImage(
  { fit: 'cover', opacity: 0.8 },
  { source: 'https://images.unsplash.com/photo-1618005182384-a83a8bd57fbe' }
);

// A central title using normalized position [0.5, 0.5]
const title = $.addText({
  text: 'RESPONSIVE VIDEO',
  fontSize: 8,           // 8% of project width
  fontWeight: 800,
  color: '#FF5A1F',      // Brand orange
  position: [0.5, 0.5],
});

title.fadeIn('800ms');
$.wait('3s');
title.fadeOut('500ms');

const videoJson = await $.compile();

The magic happens when you take that videoJson and pass it to a renderer. You don't need to change the position or fontSize in the JSON. You simply tell the renderer what dimensions you want. Whether you render at 720p or 4K, the text will remain perfectly centered and occupy exactly 8% of the width.

The Multi-Renderer Pipeline

Because VideoFlow separates the definition of the video (the JSON) from the rendering of the video, you can pipe the same source to different targets. This is what we call the "Three-Renderer Rule."

1. The Live Preview: Use @videoflow/renderer-dom in your web app to show a frame-accurate 60fps preview. This is critical for building interactive editors where the user needs to see changes instantly.
2. The Client Export: Use @videoflow/renderer-browser to let users export an MP4 directly in their tab using WebCodecs. This offloads the rendering cost to the user's machine while keeping the data private.
3. The Server Factory: Use @videoflow/renderer-server in a Node.js environment to batch-render thousands of personalized variants in the cloud. It uses headless Chromium to ensure the output is byte-for-byte identical to what the user saw in the browser.

If you're coming from other tools, you might be used to the complexity of managing these pipelines. As we've discussed in our Remotion alternatives guide, one of the biggest advantages of VideoFlow is that the core and all three renderers are Apache-2.0 open source, giving you total control over your rendering infrastructure without proprietary lock-in.

How VideoFlow Handles the Heavy Lifting

Under the hood, @videoflow/core handles the math of resolving these relative units into the final pixel values required by the browser's Canvas API or headless Chromium.

When you call $.compile(), it produces a portable VideoJSON document. This document is resolution-agnostic. When a renderer loads it, it applies the project's width and height to the em and [0..1] values.

This portability is exactly why JSON is the future of video editing. You can store your video templates in a database, diff them in Git, and generate them from an LLM prompt, knowing that they will look identical whether they are rendered as a 480p preview or an 8K master.

Ready to build?

If you're tired of fighting with absolute coordinates and fragile video templates, it's time to switch to a code-first approach.

• Try it now: Head over to the Playground to see the responsive engine in action.
• Read the docs: Dive into the Core Concepts to learn more about our timing and coordinate systems.
• Star us on GitHub: Check out the source and join the community at github.com/ybouane/VideoFlow.

Whether you are building an automated social media factory or a personalized SaaS video dashboard, VideoFlow gives you the tools to build once and render everywhere.