[Plugin] Git Gutter for CodeMirror6 - a VSCode-style inline diff gutter + peek view for CodeMirror 6

v6
1

Hello everyone! :wave: I’ve been building a CodeMirror 6 extension that adds a git gutter with a VSCode-like peek view, and I’d love to share it and get your feedback.

:books: What it does

  • Renders dirty-diff gutter markers (added / modified / deleted), styled after VSCode’s Source Control decorations.
  • Clicking a marker opens an inline peek view that “splits” the editor at the change (native CM6 block widget — no overlay/modal) and shows a unified diff with surrounding context, old/new line numbers, and tinted +/- rows.
  • The peek has Stage / Revert / Next / Previous controls. Revert is a purely local document transaction; Stage delegates the exact hunk to your host backend.
  • Fully theme-agnostic: the peek is transparent and inherits the editor background/text (currentColor), and it auto-stops before a right-side minimap (viewport-pinned, like VSCode). :wrench: Key design choices
  • It never runs git itself — it’s a pure function of (baseline, currentDoc). The host passes the baseline (e.g. git show HEAD:path) and drives everything else.
  • Plug-and-play: one gitGutter(config) call returns an Extension; all styling is injected via CodeMirror style modules (no CSS file to import, no manual DOM wiring).
  • Debounced diff recomputation so typing stays smooth.
  • Zero runtime deps besides diff; ESM + CJS dual build, tree-shakeable, typed. :nut_and_bolt: Quick start
import { EditorView, basicSetup } from 'codemirror';
import { gitGutter } from '@fazelstudio/codemirror-gitgutter';

const view = new EditorView({
  doc: currentFileContent,
  extensions: [
    basicSetup,
    gitGutter({
      baseline: headFileContent, // e.g. `git show HEAD:path/to/file`
      onStageHunk: (hunk) => myBackend.stageHunk(filePath, hunk),
    }),
  ],
  parent: document.querySelector('#editor'),
});

:open_book: Docs & status: the repo is new (v0.1.x), so it’s an early sharing; I’d really appreciate feedback on the API, edge cases with block widgets, and the minimap width-sync approach. It’s integrated & working inside my own desktop editor (Tauri + Svelte + CM6), and I’m keen to hear how (or if) your apps would use something like this. Thanks for reading! Happy to answer questions here or in the repo issues.