WebStorm-style side-by-side git diff viewer for VS Code: aligned panes with
filler lines, curved connectors in the center gutter linking changed blocks,
word-level intra-line highlights and chunk navigation.
Features
Side-by-side diff of a file against HEAD (working tree or index),
rendered in a custom webview that follows your VS Code theme.
Aligned panes: changed blocks stay vertically aligned via hatched filler
lines, exactly like WebStorm's diff viewer.
Center-gutter connectors: colored bands link each changed block on the
left to its counterpart on the right (green = added, red = removed,
blue = modified).
Word-level highlights inside modified lines, with a noise guard that
skips intra-line marks when nearly the whole line changed.
Smart scroll sync: the panes scroll together through a piecewise mapping
anchored at chunk boundaries — context scrolls 1:1, and while traversing a
large change the shorter side keeps its counterpart near mid-screen, with
context visible above and below.
Chunk navigation: F7 / Shift+F7 (like WebStorm) or the floating
toolbar, with a "n / m" counter; chunk markers in the overview ruler and
minimap.
Per-chunk actions in the center gutter: revert (⟲) and stage (+) for
working-tree diffs, unstage (−) for index diffs — hunk-level staging via
git apply --cached. Already-staged chunks render dimmed.
File actions in the panel title bar, like the built-in diff editor:
Open File, previous/next change, Stage File, Unstage File, Discard Changes.
Editable diff: both panes are Monaco editors — the working-tree side is
fully editable in place (undo, multi-cursor, find, IME). Edits sync live
into the real document (kept dirty); Ctrl+S inside the diff saves.
Syntax highlighting that matches your actual color theme: the active
theme's JSON is resolved host-side (includes merged) and loaded into shiki.
Live refresh: the diff updates in place as you edit and save, or as the
git state changes.
Respects your editor.* settings (font, line height, minimap, …).
Usage
Command palette → Flow Diff: Open Diff (Working Tree vs HEAD) for the
active file.
Right-click a file in the Source Control view → Open Diff.
Changed files show a diff button in the editor title bar.
Flow Diff: Open Diff (Index vs HEAD) compares the staged copy instead.
By default Flow Diff also takes over the diff tabs opened by the built-in
git extension (setting flowDiff.interceptGitOpenChange).
Roadmap
Local Changes tree view grouped by directory.
Compare with arbitrary branch/revision.
Development
npm install
npm run compile # host (tsc) + webview type-check + esbuild bundle
npm test # unit tests for the diff engine (node --test)
Press F5 to launch the Extension Development Host. A playground repo with
edits covering every diff case can be generated alongside this project
(bridge-diff-playground).
