GIF Panel for VS Code

Bring your favorite reaction GIFs, memes, and loops right into Visual Studio Code. GIF Panel embeds a live image viewer inside the Explorer sidebar, keeps it synced with the folders you choose, and gives you quick controls for shuffling through your collection.

Preview

GIF Panel preview

Feature Highlights

Live Explorer view that plays GIF, APNG, and WebP files from folders you choose.
Auto-refresh picks up new, renamed, or removed files without rebuilding the list.
Previous, Next, Shuffle, auto-rotation toggle, and interval control built into the panel.
Auto-scale toggle for switching between fit-to-panel and original dimensions.
State persistence remembers the last image and your preferred settings across sessions.

Installation

Marketplace (recommended): Search for GIF Panel or install by ID thomashomecompany.vscode-gif once the listing is live.
From source: Clone this repository, run npm install, and press F5 in VS Code to open an Extension Development Host.

Quickstart

Open the GIF Panel view in the Explorer sidebar.
Run GIF Panel: Add Source Folder from the Command Palette (Ctrl+Shift+P).
Pick one or more folders that contain GIF, APNG, or WebP files.
Use the panel controls for previous, next, shuffle, auto-rotation toggle, auto-scale toggle, and interval input.

New images dropped into your folders appear automatically; manual rescans are rarely needed.

Commands

Command	Description
`GIF Panel: Add Source Folder`	Select folders to include in the rotation.
`GIF Panel: Remove Source Folder`	Remove one or more configured folders via a quick pick.
`GIF Panel: Clear Sources`	Remove every configured folder.
`GIF Panel: Rescan`	Force an immediate rescan (auto-refresh handles most cases).
`GIF Panel: Next` / `Previous`	Navigate manually without affecting rotation state.
`GIF Panel: Shuffle Now`	Jump to a random image.
`GIF Panel: Toggle Rotation`	Start or pause auto-rotation.
`GIF Panel: Set Rotation Interval`	Enter a rotation interval in seconds (1-60).
`GIF Panel: Toggle Scale`	Switch between auto-scale and original sizing.
`GIF Panel: Open Current GIF`	Launch the active image in your default viewer.
`GIF Panel: Copy Current GIF Path`	Copy the absolute path of the active image to the clipboard.

Commands are available from the Command Palette and can be bound to custom keybindings.

Settings

All settings live under the gifPanel namespace.

{
  "gifPanel.sources": [],                      // Absolute folder paths that the panel should index.
  "gifPanel.scaleMode": "auto",                // Either "auto" (fit-to-panel) or "original".
  "gifPanel.shuffleIntervalMs": 5000,          // Rotation interval in milliseconds, clamped between 1000-60000.
  "gifPanel.allowedExtensions": [".gif", ".apng", ".webp"], // File extensions (lowercase, dot-prefixed).
  "gifPanel.recursive": true                   // When true, scan subfolders as well.
}

Notes:

The panel UI respects user overrides made in settings. When scaleMode or shuffleIntervalMs is pinned in settings, the UI will warn you and keep your chosen value.
Large files (> 50 MB) are skipped automatically to avoid performance spikes.

Platform Notes

Linux recursive watchers: Some Linux distributions do not support recursive fs.watch. When that happens the GIF Panel output channel logs a notice, and the extension continues watching only the top-level folder. Use GIF Panel: Rescan after adding or removing GIFs in subfolders, or toggle gifPanel.recursive off in settings to avoid the warning.

Development Setup

Clone the repository.
Run npm install.
Press F5 in VS Code to launch an Extension Development Host.
Locate GIF Panel in the Explorer sidebar and start adding folders.

Run npm run compile (or npm run watch) to build TypeScript, and npm run lint to run ESLint.

Privacy and Data

Local files only - the extension only touches folders you explicitly add.
No bundled media - sample media is optional for development, but nothing ships by default.
No telemetry - the extension does not collect or send usage data.

Roadmap Ideas

Per-folder enable/disable toggles and weighting.
Optional support for static image formats (PNG and JPEG) in addition to animated types.
Custom status bar item for quick access to current GIF info.

Support and Feedback

Questions, ideas, or bug reports are always welcome in the issue tracker: maxthomas95/vscode-gif.

GIF Panel

ThomasHomeCompany