GitHub - MrWangJustToDo/git-diff-view: A Diff View component for React / Vue / Solid / Svelte / Ink, same as Github

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