Repository files navigation

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

• 🎨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

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

# Reactpnpm add @git-diff-view/react# Vuepnpm add @git-diff-view/vue# Solid / Sveltepnpm add @git-diff-view/solidpnpm add @git-diff-view/svelte

View Examples for React / Vue / Solid / Svelte

import{DiffView,DiffModeEnum}from"@git-diff-view/react";import"@git-diff-view/react/styles/diff-view.css";<DiffViewdata={{oldFile:{fileName:"old.ts",content:"..."},newFile:{fileName:"new.ts",content:"..."},hunks:["..."]}}diffViewMode={DiffModeEnum.Split}diffViewTheme="dark"diffViewHighlight/>

import{DiffFile,generateDiffFile}from"@git-diff-view/file";// File comparison modeconstfile=generateDiffFile("old.ts",oldContent,"new.ts",newContent,"typescript","typescript");file.initTheme('dark');file.init();file.buildSplitDiffLines();<DiffViewdiffFile={file}/>

More examples:React ·Vue ·Solid

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

• ✅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 (experimental)
• ✅Multiple Platforms - React, Vue, Solid, Svelte, and CLI

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

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

Default	FastDiff

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

// Default styles with Tailwind// next release will remove Tailwind dependency, then the diff-view.css will be pure CSSimport"@git-diff-view/react/styles/diff-view.css";// Pure CSS (no Tailwind conflicts)import"@git-diff-view/react/styles/diff-view-pure.css";

1. Direct Data Mode - Pass raw diff data

<DiffViewdata={{ oldFile, newFile, hunks}}/>

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

constfile=newDiffFile(/* ... */);file.init();file.buildSplitDiffLines();<DiffViewdiffFile={file}/>

git clone https://github.com/MrWangJustToDo/git-diff-view.gitcd git-diff-viewpnpm installpnpm run build:packagespnpm run dev:react# or dev:vue, dev:solid, dev:svelte

MIT ©MrWangJustToDo