Git Diff View

A high-performance, feature-rich diff view component for React / Vue / Solid / Svelte

✨ Highlights

• 🎨 Full Syntax Highlighting - Complete syntax context based on HAST AST
• ⚡ High Performance - Web Worker & Node Server support, template mode optimization
• 🎯 Framework Agnostic - React, Vue, Solid, Svelte, and CLI support
• 🔧 Highly Customizable - Widgets, extend data, themes, and flexible rendering
• 📦 Multiple Modes - Git diff or file comparison with Split/Unified views
• 🌗 SSR/RSC Ready - Full server-side rendering and React Server Components support

🎮 Live Demo

Try it online: Git Mode · File Mode · GitHub Style

📸 More Screenshots

📦 Installation

# React
pnpm add @git-diff-view/react

# Vue
pnpm add @git-diff-view/vue

# Solid / Svelte
pnpm add @git-diff-view/solid
pnpm add @git-diff-view/svelte

View Examples for React / Vue / Solid / Svelte

🚀 Quick Start

React

import { DiffView, DiffModeEnum } from "@git-diff-view/react";
import "@git-diff-view/react/styles/diff-view.css";

<DiffView
  data={{
    oldFile: { fileName: "old.ts", content: "..." },
    newFile: { fileName: "new.ts", content: "..." },
    hunks: ["..."]
  }}
  diffViewMode={DiffModeEnum.Split}
  diffViewTheme="dark"
  diffViewHighlight
/>

Advanced Usage

import { DiffFile, generateDiffFile } from "@git-diff-view/file";

// File comparison mode
const file = generateDiffFile(
  "old.ts", oldContent,
  "new.ts", newContent,
  "typescript", "typescript"
);
file.initTheme('dark');
file.init();
file.buildSplitDiffLines();

<DiffView diffFile={file} />

More examples: React · Vue · Solid

📚 Packages

UI Frameworks

• @git-diff-view/react - React component
• @git-diff-view/vue - Vue component
• @git-diff-view/solid - Solid component
• @git-diff-view/svelte - Svelte component
• @git-diff-view/cli - CLI tool

Core Libraries

• @git-diff-view/core - Core diff engine (git diff)
• @git-diff-view/file - File comparison engine

Syntax Highlighters

• @git-diff-view/lowlight - Built-in highlighter
• @git-diff-view/shiki - Shiki integration

🎯 Key Features

• ✅ Split & Unified Views - Switch between side-by-side and unified diff modes
• ✅ Full Syntax Highlighting - Complete context-aware syntax highlighting with HAST AST
• ✅ Light & Dark Themes - Built-in theme support with customization
• ✅ Line Wrapping - Toggle line wrapping for long code lines
• ✅ Widget System - Add custom interactive widgets to diff lines
• ✅ Extend Data - Attach and render custom data per line
• ✅ Web Worker Support - Offload processing for better performance
• ✅ SSR & RSC - Full server-side rendering support for React and Vue
• ✅ Diff Match Patch - Enhanced line-level diff with FastDiff template
• ✅ Multiple Platforms - React, Vue, Solid, Svelte, and CLI

⚡ Advanced Features

FastDiff Template

Enhanced line-by-line diff visualization for better readability.

import { setEnableFastDiffTemplate } from '@git-diff-view/core';

setEnableFastDiffTemplate(true);

Default	FastDiff

Range Mode

Display only a portion of the diff by specifying a line number range. This is useful when you want to focus on a specific section of a large diff.

import { DiffFile, SplitSide } from "@git-diff-view/core";

// Create the full diff instance
const diffFile = new DiffFile(/* ... */);
diffFile.init();
diffFile.buildSplitDiffLines();

// Generate a new instance containing only lines 10-50 (based on new file line numbers)
const rangeDiffFile = diffFile.generateInstanceFromLineNumberRange(10, 50);

// Or specify which side's line numbers to use
const rangeDiffFileOld = diffFile.generateInstanceFromLineNumberRange(10, 50, SplitSide.old);
const rangeDiffFileNew = diffFile.generateInstanceFromLineNumberRange(10, 50, SplitSide.new);

<DiffView diffFile={rangeDiffFile} />

API: generateInstanceFromLineNumberRange(start, end, side?)

Parameter	Type	Default	Description
start	number	-	Start line number (must be less than end)
end	number	-	End line number
side	SplitSide	SplitSide.new	Which file's line numbers to use (SplitSide.old or SplitSide.new)

This method creates a new DiffFile instance containing only the diff lines within the specified range, making it ideal for:

• Displaying relevant portions of large diffs
• Creating focused code review experiences
• Building paginated diff views

Template Mode

Optimized rendering mode enabled by default for better performance. Learn more

📖 API Reference

Component Props

Prop	Type	Description
data	DiffData	Diff data with oldFile, newFile, and hunks
diffFile	DiffFile	Pre-processed diff file instance
diffViewMode	Split | Unified	View mode (default: Split)
diffViewTheme	light | dark	Theme (default: light)
diffViewHighlight	boolean	Enable syntax highlighting
diffViewWrap	boolean	Enable line wrapping
diffViewFontSize	number	Font size in pixels
diffViewAddWidget	boolean	Enable widget button
renderWidgetLine	Function	Custom widget renderer
renderExtendLine	Function	Custom extend data renderer
extendData	ExtendData	Additional data per line
onAddWidgetClick	Function	Widget button click handler

Styling

// default style (Pure CSS)
import "@git-diff-view/react/styles/diff-view.css";

// same as diff-view.css
import "@git-diff-view/react/styles/diff-view-pure.css";

Two Usage Modes

1. Direct Data Mode - Pass raw diff data

<DiffView data={{ oldFile, newFile, hunks }} />

2. DiffFile Instance Mode - Pre-process for better control

const file = new DiffFile(/* ... */);
file.init();
file.buildSplitDiffLines();
<DiffView diffFile={file} />

🛠️ Development

git clone https://github.com/MrWangJustToDo/git-diff-view.git
cd git-diff-view
pnpm install
pnpm run build:packages
pnpm run dev:react  # or dev:vue, dev:solid, dev:svelte

📄 License

MIT © MrWangJustToDo