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

**URL:** https://discuss.codemirror.net/t/plugin-git-gutter-for-codemirror6-a-vscode-style-inline-diff-gutter-peek-view-for-codemirror-6/9863
**Category:** v6
**Created:** [August 13, 2026, 10:37am UTC](https://discuss.codemirror.net/t/plugin-git-gutter-for-codemirror6-a-vscode-style-inline-diff-gutter-peek-view-for-codemirror-6/9863 "2026-08-13T10:37:00Z")
**Posts on this page:** 1
**Page:** 1

<div class="post-metadata">

### Author: ![fazelllyyy](https://discuss.codemirror.net/user_avatar/discuss.codemirror.net/fazelllyyy/32/5536_2.png) [@fazelllyyy](https://discuss.codemirror.net/u/fazelllyyy)
#### Post date: [August 13, 2026, 10:37am UTC](https://discuss.codemirror.net/t/plugin-git-gutter-for-codemirror6-a-vscode-style-inline-diff-gutter-peek-view-for-codemirror-6/9863/1 "2026-08-13T10:37:01Z")

</div>

Hello everyone! 👋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.

- Repo: [https://github.com/fazelllyyy/codemirror-gitgutter](https://github.com/fazelllyyy/codemirror-gitgutter)
- npm: [https://www.npmjs.com/package/@fazelstudio/codemirror-gitgutter](https://www.npmjs.com/package/@fazelstudio/codemirror-gitgutter)

### 📚 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).🔧 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.🔩 Quick start

```auto
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'),
});

```

📖 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.