@codemirror/merge

@codemirror/merge is the official CodeMirror 6 extension for rendering diffs and merge interfaces inside the editor. It ships two view modes: a split MergeView that shows two documents side-by-side with connecting diff decorations, and a unifiedMergeView that inlines changes into a single editor pane in the style of a unified diff. Both build on CodeMirror’s @codemirror/state and @codemirror/view extension system, so diff decorations, gutters, and change-navigation commands compose with the rest of a CodeMirror configuration rather than requiring a separate widget.

The package is maintained by Marijn Haverbeke as part of the core CodeMirror 6 project family. Its canonical source lives on the project’s self-hosted Fossil server (code.haverbeke.berlin), with this GitHub repository serving as a read-only mirror — the standard arrangement for CodeMirror 6 packages, whose actual development, issues, and CI happen off-GitHub even though npm and this mirror stay in sync with each release.

What You Get

• MergeView: a split two-pane diff view showing document A and document B side-by-side with connecting change decorations
• unifiedMergeView: an inline single-pane view that renders changes in unified-diff style within one editor
• A diffing engine (diff.ts) that computes the underlying change set feeding both view modes
• Gutter markers and decorations (deco.ts, theme.ts) for highlighting inserted/deleted/changed regions consistent with CodeMirror’s theming system
• Commands for navigating between changes and accepting/rejecting individual diff chunks, composable with standard CodeMirror keybindings

Common Use Cases

• Building an in-browser code review or PR-diff viewer that needs syntax-highlighted, scrollable diffs rather than a static HTML diff
• Adding a ‘compare versions’ feature to a documentation or note-taking app built on CodeMirror
• Implementing an AI-assisted code editor that shows proposed changes as an inline unified diff before the user accepts them
• Building a collaborative editor’s conflict-resolution UI, letting users see and merge divergent edits side-by-side

Under The Hood

Architecture - The package is organized around two composable view classes built on CodeMirror 6’s extension model: mergeview.ts implements the split MergeView (two linked EditorView instances scroll and highlight in sync), while unified.ts implements unifiedMergeView as a set of extensions layered onto a single EditorView. Both consume a shared diffing core in diff.ts, with chunk.ts modeling the resulting change ranges as CodeMirror-compatible range sets, and deco.ts/theme.ts rendering those chunks as decorations and gutter markers. This mirrors CodeMirror 6’s broader design philosophy: functionality is expressed as composable state fields and view plugins rather than a monolithic widget class. Tech Stack - Pure TypeScript (~1,840 lines across src/), depending on the core CodeMirror 6 packages (@codemirror/state, @codemirror/view, @codemirror/language) and @lezer/highlight for syntax-aware diff rendering, plus style-mod for scoped CSS. Build and test tooling (cm-buildhelper, cm-runtests) is shared tooling used across the whole CodeMirror 6 package family, invoked via the prepare/test npm scripts. Code Quality - A test/ directory exercises the diffing and view logic; because this package is part of the tightly coordinated CodeMirror 6 monorepo family, it follows the same coding conventions, versioning cadence, and API-design review process as the rest of the @codemirror/* scope, even though day-to-day development happens on the project’s own Fossil server rather than GitHub. API Design - Both MergeView and unifiedMergeView accept the same shape of configuration as other CodeMirror 6 view constructors (a document plus an extensions array), so a team already using CodeMirror 6 can add diff/merge rendering with minimal new API surface to learn — the main cost is understanding CodeMirror 6’s extension composition model itself, which this package assumes rather than re-teaches.