Magic Vid2Gif 🎩✨

VS Code extension and other vscode like editors that convert videos to optimized GIFs with bundled FFmpeg. It aims for high visual quality with minimal file size and zero external setup.

Features

• Fast default conversion and an advanced options flow (start time, duration, resolution, FPS, palette).
• High-quality pipeline: Lanczos scaling, global palette generation, ordered dithering.
• Optional Gifsicle post-optimization (lossy/lossless).
• Strict TypeScript types, modular architecture, progress notifications, and cancelable runs.

Requirements

• Node.js 20+
• FFmpeg (auto-downloaded by the extension if missing)
  • Troubleshooting: If the extension cannot extract FFmpeg, ensure your system has unzip (macOS/Linux) or PowerShell available on Windows; for .tar.xz archives ensure tar is present. If detection fails, the extension attempts to resolve the absolute ffmpeg executable (command -v ffmpeg on POSIX, where ffmpeg on Windows).
• Optional: Gifsicle for extra optimization

Usage

1. Right-click a video (.mp4, .mov, .avi, .mkv, .webm, etc.) in the Explorer.
2. Choose “Convert to GIF (Quick)” for defaults or “Convert to GIF (Advanced Options)” to tweak settings.
3. Watch progress in the notification area; the resulting GIF is saved next to the source file.

Configuration (settings.json)

{
  "magicvid2gif.defaultResolution": "1920:1080",
  "magicvid2gif.defaultFps": 30,
  "magicvid2gif.colorCount": 128,
  "magicvid2gif.optimizationLevel": "ultra",
  "magicvid2gif.dithering": true,
  "magicvid2gif.lossyCompression": 80,
  "magicvid2gif.gifsiclePath": "",
  "magicvid2gif.autoInstallFfmpeg": true
}

Scripts

• npm run build:esbuild – bundle to dist/extension.js {- npm run compile – TypeScript to out/ (tests)}
• npm run test:unit – unit tests
• npm run test:e2e – VS Code integration tests

Project structure

src/
├─ extension.ts          // Entry point, commands, UI flow
├─ videoConverter.ts     // FFmpeg pipeline
├─ optimizationService.ts// Gifsicle optimizations
└─ types.ts              // Shared interfaces

Packaging

npm run package   # uses vsce package

VSIX-based E2E tests

You can run E2E tests against a built VSIX using the test:vscode:vsix helper which packages the extension and runs the test suite inside a temporary VS Code instance:

npm run test:vscode:vsix

Notes & tips:

• The script uses vsce package (via npx) to build a .vsix. If packaging fails due to environment types, you can skip packaging and pass an existing VSIX with --vsix <path>:
  • node ./out/tests/vscode-e2e/runTests.js --vsix ./magicvid2gif-1.0.0.vsix
• The script downloads a test copy of VS Code, installs the VSIX into that instance, and then runs the compiled tests.
• Make sure to run npm run compile (or npm run compile:tests) before invoking this script so the test runner is compiled into out/test/suite.

License

MIT