PairView Sync

A VS Code compatible extension that automatically pairs media files (images, videos) with their matching data files (.txt, .json, .csv, .xml, .yaml) in a split pane — and vice-versa.

Perfect for image captioning, annotation workflows, training data review, and any task where media and metadata live side by side.

100% vibe coded, so any modifications/optimizations are welcome!

Features

• Bidirectional sync — open an image or video and the matching data file appears beside it; open a data file and the matching media appears.
• Video support — .mp4, .avi, .mov, .mkv, .wmv, .webm, .flv, .m4v, .3gp
• Image support — .png, .jpg, .jpeg, .webp, .bmp, .gif, .svg, .tiff, .tif, .ico
• Data file support — .txt, .json, .csv, .xml, .yaml, .yml
• Fully configurable — add or remove file types from either group via Settings
• Status bar toggle — click the PairView indicator in the status bar to enable/disable sync
• Command palette — run PairView: Toggle Sync to switch sync on or off

How It Works

1. Open any file in your workspace.
2. If the file is a media type, PairView searches the same directory for a matching data file with the same base name (e.g., photo.jpg → photo.json).
3. If the file is a data type, PairView searches for a matching media file (e.g., photo.json → photo.jpg).
4. The matched file opens in the adjacent editor pane with focus preserved on your original file.
5. File extensions are searched in order — the first match wins.

Configuration

Open Settings (Ctrl+, / Cmd+,) and search for PairView:

Setting	Default	Description
pairView.enableSync	true	Enable or disable sync
pairView.mediaExtensions	[".png", ".jpg", ...]	Extensions treated as media files
pairView.dataExtensions	[".txt", ".json", ...]	Extensions treated as data files

Example: Add PDF support

"pairView.dataExtensions": [".txt", ".json", ".csv", ".xml", ".yaml", ".yml", ".pdf"]

Installation

From Release 📥

In VS Code: Extensions → ⋯ → Install from VSIX… → select the .vsix file

Compile yourself

1. Run npm install then npm run compile
2. Run npm run package to generate the .vsix file
3. In VS Code: Extensions → ⋯ → Install from VSIX… → select the .vsix file

Requirements

• VS Code 1.75.0 or later (or any compatible editor like Cursor, Windsurf, Antigravity, etc.)

License

MIT