video

FFmpeg Filter Builder

Build FFmpeg filter graphs with editable nodes, preview the result, and render H.264/AAC MP4 using the multi-thread build on Browser Kitty.

View on GitHub

Local processing

About your filesFiles and content selected in this tool are processed in your browser and are not uploaded to a Browser Kitty backend.

Operation demo See the basic workflow in a short video.

About this tool

FFmpeg Filter Builder is a node-based editor for composing FFmpeg filter graphs for MP4 video. Start from one of ten Recipes or add Video, Audio, and Text nodes directly; Recipes expand into normal editable nodes and edges. Pan, zoom, multi-select, port connections, and a MiniMap help you build graphs that can include Split / Overlay and Audio Split / Mix branches.

Preview processes only a 3, 5, or 10 second range, then Full Render applies the same graph to the complete input and produces an H.264 + AAC MP4. Browser Kitty serves the multi-thread FFmpeg WASM build, so only this app URL is delivered with COOP / COEP headers to make it cross-origin isolated. The selected video, graph, preview, and full render remain in the browser and are not uploaded to an app server.

Good for

Prototype an FFmpeg filter_complex visually before writing or refining a command by hand
Combine Crop, Scale, Rotate, Fade, color adjustment, and other video filters in a specific order
Build picture-in-picture or blurred-background vertical video graphs with Split and Overlay
Keep video speed changes and audio processing such as Normalize or Fade in the same graph
Check a short preview before rendering the complete video with the same graph in the browser
Save the graph as JSON or export the current graph as a desktop FFmpeg command

What it can do

Key capabilities available in this tool.

Build editable FFmpeg filter graphs from Recipes or directly from nodes
Configure video filters such as Trim, Speed, Scale, Crop, Rotate, Color, Blur, Sharpen, and Fade in the GUI
Create branch/merge graphs with Split and Overlay for picture-in-picture and blurred-background layouts
Process audio with Trim, Volume, Fade, Speed, High-pass, Low-pass, Normalize, Split, and Mix nodes
Preview 3, 5, or 10 seconds, then apply the same graph to the full input and render H.264 + AAC MP4
Save and restore Graph JSON, use local Autosave, and generate a desktop FFmpeg command

How to use

Open the tool and choose an MP4 file from the Input node.
Choose a Recipe and expand it into the graph, or add Video, Audio, and Text filter nodes from the palette.
Connect ports to define processing order and branches, then select nodes and edit their settings in the Inspector.
Run a 3, 5, or 10 second Preview and check the resulting video and audio.
Adjust the graph and preview again as needed.
When ready, run Full Render to apply the same graph to the complete input video.
Review the generated H.264 + AAC MP4 and save it with the desired filename. Save Graph JSON or copy the FFmpeg command when useful.

Supported

Input: the current build supports one main MP4 media input.
Video: Trim, Speed, FPS, Scale, Crop, Pad, Rotate, Flip, Aspect Ratio, Color Adjust, Hue, Blur, Sharpen, and Fade.
Complex graphs: build branch/merge layouts with Split and Overlay. Picture in Picture uses branches split from the same input video.
Audio: Trim, Volume, Fade, Speed, High-pass, Low-pass, Normalize, Split, and Mix, including audio synchronization for Video Speed.
Text: Draw Text uses embedded M PLUS 1p Regular for Japanese/English text with position, color, background, padding, and timing controls.
Persistence: save/load Graph JSON, autosave the graph and output filename, and generate a desktop FFmpeg command. Video files are not autosaved.
Browser Kitty build: imports the GitHub Pages /mt/ distribution and serves only /apps/ffmpeg-filter-builder.html with COOP / COEP headers so SharedArrayBuffer is available.

Limitations and notes

The current build supports one main MP4 media input and does not support an independent second video or image-watermark input.
Picture in Picture uses a branch split from the same input video, and the Watermark Recipe uses Draw Text rather than a separate image.
Output is H.264 video + AAC audio in an MP4 container.
Browser Kitty uses the multi-thread build, which requires HTTP(S) delivery and cross-origin isolation. Use the standard single-thread build for direct file:// execution.
Chrome and Edge are the primary target browsers. Some functionality may work in Firefox or Safari, but they are not primary targets.
Full video re-encoding runs in the browser, so long or high-resolution videos can use substantial CPU and device memory.
An MP4 container can still contain codecs or media characteristics that the embedded runtime or available device memory cannot process.

Frequently asked questions

Is my video uploaded to a server?

No. Browser Kitty downloads the app HTML initially, but the selected MP4, graph, preview, and full render are processed in the browser without uploading the video to an app server.

Why does Browser Kitty use the multi-thread build?

The multi-thread FFmpeg WASM runtime can use multiple threads. SharedArrayBuffer requires cross-origin isolation, so Browser Kitty applies COOP / COEP headers only to this app URL.

Does this replace the FFmpeg CLI?

No. It is a GUI for visually composing and testing the supported Video / Audio / Text filter graph, with the option to generate a desktop FFmpeg command; it is not a replacement for the full FFmpeg CLI.

Can I load two different videos for picture-in-picture?

Not currently. There is one main media input; the Picture in Picture Recipe overlays a branch split from that same input video.

Can I save the graph?

Yes. You can save and load Graph JSON. Autosave keeps the graph and output filename, but it does not store the selected MP4 or rendered video.

Offline version and source code

The multi-thread build served by Browser Kitty requires HTTP(S) plus COOP / COEP cross-origin isolation for SharedArrayBuffer. Video processing itself has no runtime external-network dependency, but this build is not intended for direct file:// use. For a portable single HTML that opens directly from disk, use the repository's standard single-thread dist/index.html build.

View source on GitHub