DEV Community

Cover image for I built a CLI tool so I never have to write FFmpeg commands again
Muhammad Usman
Muhammad Usman

Posted on

I built a CLI tool so I never have to write FFmpeg commands again

#webdev #ffmpeg #opensource #node

If you build websites, you've been here before:

ffmpeg -i hero.mp4 -c:v libx264 -crf 23 -preset slow -movflags +faststart -c:a aac -b:a 128k out.mp4
Enter fullscreen mode Exit fullscreen mode

Wrong flag order? Re-run. Need a WebM version too? Write the whole thing again with completely different flags. Forgot -movflags +faststart? Your video won't stream properly in the browser — and you won't know until a user complains.

I got tired of copy-pasting this from my notes every single project. So I built VidX.

Try it in 10 seconds 

npx @muhammadusmangm/vidx
Enter fullscreen mode Exit fullscreen mode

What is VidX?

VidX is an interactive CLI tool for web video optimization. Instead of memorizing FFmpeg flags, it walks you through everything with a beautiful terminal UI.

You run one command:

vidx
Enter fullscreen mode Exit fullscreen mode

And it handles the rest — scanning your project for videos, letting you pick which ones to process, choosing format, quality, and resolution, then running the perfect FFmpeg command behind the scenes.

The Problem It Solves

FFmpeg is incredibly powerful — but its interface is designed for people who already know exactly what they're doing. For web developers who just need compressed, web-ready videos, it's way more friction than it should be.

The specific pain points VidX eliminates:

1. Remembering codec flags — libx264 for MP4, libvpx-vp9 for WebM, the exact CRF sweet spots for web, -movflags +faststart so videos stream before fully downloading, -pix_fmt yuv420p so Safari doesn't choke. VidX bakes all of this in.

2. Generating both formats — Modern best practice is to serve both MP4 and WebM and let the browser pick. With raw FFmpeg that means writing and running two completely separate commands. With VidX you just pick "Both" and it handles both in one run.

3. Resizing — Need to scale down a 4K video for web? VidX uses scale=-2:720 which keeps the aspect ratio and ensures the width stays divisible by 2 — something that trips up a lot of manual FFmpeg users and causes libx264 to error out.

4. Starting over every project — VidX supports a .vidxrc config file. Set your preferred preset once per project and next time you just confirm and go.

How It Works

Step 1 — Detect

VidX scans your project and lists every video file it finds, sorted by size (largest first since those are the most impactful to compress):

📁 Found 3 videos in this project:

  • src/assets/hero-banner.mp4        48.2 MB
  • public/product-demo.mov          120.4 MB
  • public/bg-loop.webm                8.1 MB
Enter fullscreen mode Exit fullscreen mode

Step 2 — Select

Pick which videos to process with Space/A keys — all pre-selected by default.

Step 3 — Configure

Choose your output format, quality preset, and resolution through simple menus — no flags, no docs.

Step 4 — Process

VidX runs FFmpeg with a real-time progress bar showing percentage and ETA per file.

Step 5 — Summary

See exactly how much space you saved, and the exact FFmpeg commands that were used — so you learn as you go.

🎉 Done! 2 videos processed in 43s

  hero-banner.mp4
    → hero-banner.mp4     48.2 MB  →   4.1 MB   (91% smaller) ✔
    → hero-banner.webm    48.2 MB  →   2.8 MB   (94% smaller) ✔
Enter fullscreen mode Exit fullscreen mode

Quality Presets

VidX ships with three tuned presets:

Preset Best For
Web Optimized Most websites — great balance
High Quality Hero videos, product showcases
Small File Background loops, mobile-first
Custom Full manual control

Each preset uses carefully chosen CRF values, bitrate caps, and codec settings that I've tuned specifically for web delivery — not just generic FFmpeg defaults.

FFmpeg Auto-Detection

VidX checks if FFmpeg is installed on your system first. If it is, it uses it. If not, it silently falls back to a bundled static binary — so it works on any machine with zero manual setup.

CI/CD Mode

VidX also supports a fully non-interactive mode for build pipelines:

vidx --preset webOptimized --format both --resolution 720p --yes
Enter fullscreen mode Exit fullscreen mode

And a --dry-run flag that prints the FFmpeg commands without executing them — useful for debugging or learning.

Tech Stack

Built with Node.js using:

  • @inquirer/prompts for the TUI
  • cli-progress + ora for progress display
  • chalk for terminal colors
  • fast-glob for video detection
  • ffmpeg-static as the bundled fallback binary

Installation 

npm install -g @muhammadusmangm/vidx
# or
npx @muhammadusmangm/vidx
Enter fullscreen mode Exit fullscreen mode

Requires Node.js 18+. Works on macOS, Windows, and Linux.

What's Next

VidX v1 is live on npm right now. I'm actively maintaining it and would love feedback — if you try it, let me know what you think in the comments or open an issue on GitHub.

If it saves you time, a ⭐ on the repo goes a long way.

🔗 npm: npmjs.com/package/@muhammadusmangm/vidx

🔗 GitHub: github.com/MuhammadUsmanGM/VidX

Built for web devs, by a web dev who got tired of FFmpeg flags.

Top comments (0)