AI Native Diff View

A VS Code / Cursor extension that replaces traditional code-level diffs with rendered visual diffs. Instead of comparing Markdown source code, you see the actual rendered output — headings, tables, code blocks, and diagrams side by side.

Features

Rendered Markdown Diff — Compares .md files as rendered HTML, not raw source
Split View — Side-by-side layout with aligned placeholders so deletions and insertions never get out of sync
Inline View — Single-panel view with strikethrough deletions and highlighted insertions, similar to Google Docs revision mode
Two-phase Diff Algorithm — Similar blocks get word-level highlights; completely different blocks are marked as full deletions/insertions
JSON & YAML Diff — Structured form view with field-level change highlighting
Git Integration — Right-click any supported file in the Explorer to compare with Git HEAD
Change Navigation — Previous/Next buttons, keyboard shortcuts, and a change-list panel for jumping between diffs
Syntax Highlighting — Powered by highlight.js with GitHub-style light/dark themes
Mermaid Diagrams — Rendered via CDN inside diff views
Theme Adaptive — Automatically adapts to VS Code light, dark, and high-contrast themes
Extensible Architecture — Plugin-based design; third-party extensions can register custom renderers for any file format
Visual Preview — Open a rendered preview panel alongside any supported file

Usage

Compare Two Files

Open the Command Palette (Cmd+Shift+P / Ctrl+Shift+P)
Run AI Native Diff: Compare Two Files
Select two supported files

Compare with Git HEAD

Right-click any .md, .json, or .yaml file → AI Native Diff: Compare with Git HEAD

Select & Compare

Right-click a file → AI Native Diff: Select for Compare
Right-click another file → AI Native Diff: Compare Selected Files

Open Visual Preview

Right-click a file → AI Native Diff: Open Preview to the Side

Or click the preview icon in the editor title bar.

Keyboard Shortcuts

Action	Shortcut
Next change	`Alt/Cmd + ↓`
Previous change	`Alt/Cmd + ↑`
Open change list	Click ☰ in toolbar
Close change list	`Esc`

Configuration

Setting	Default	Description
`aiNativeDiff.defaultView`	`"inline"`	Default view mode: `"split"` (side-by-side) or `"inline"`
`aiNativeDiff.diffGranularity`	`"word"`	Diff granularity: `"word"`, `"sentence"`, or `"paragraph"`
`aiNativeDiff.markdown.mermaid`	`true`	Enable Mermaid diagram rendering in Markdown diffs
`aiNativeDiff.customCss`	`""`	Path to a custom CSS file for styling the diff view
`aiNativeDiff.rendererMapping`	`{}`	Map file extensions to renderer IDs (e.g. `{ ".mdx": "markdown" }`)
`aiNativeDiff.preview.autoOpen`	`true`	Automatically open visual preview when a supported file is opened

Extensibility

This extension exports an API that other VS Code extensions can use to register custom renderers:

const diffExt = vscode.extensions.getExtension('jaychance.ai-native-diff-view');
const api = diffExt.exports;

const disposable = api.registerRenderer({
  id: 'my-format',
  name: 'My Format Diff',
  supportedExtensions: ['.myext'],
  async render(source, options) {
    return { html: myRenderFunction(source) };
  },
  getStyles() { return '/* custom CSS */'; }
});

Development

# Install dependencies
npm install

# Build
npm run build

# Watch mode (auto-rebuild on file changes)
npm run watch

# Debug in VS Code — press F5 to launch the Extension Development Host

Tech Stack

TypeScript + esbuild (dual entry: extension host + webview)
markdown-it — Markdown to HTML rendering
highlight.js — Syntax highlighting
htmldiff-js — Word-level HTML diff algorithm
diff — Block-level array diffing for two-phase matching
js-yaml — YAML parsing

License

MIT