@git-diff-view/svelte

> A high-performance Svelte diff view component with GitHub-style UI


Features

- ✅ Split & Unified views
- ✅ Syntax highlighting with full context
- ✅ Light & Dark themes
- ✅ Svelte 4+ support with Snippets
- ✅ Widget & extend data system with snippets
- ✅ High performance with Web Worker support

Installation

``bash
npm install @git-diff-view/svelte


or

pnpm add @git-diff-view/svelte

or

yarn add @git-diff-view/svelte
`

Quick Start

$3

`svelte


data={diffData}
diffViewMode={DiffModeEnum.Split}
diffViewTheme="dark"
diffViewHighlight={true}
/>
`

$3

File Comparison Mode

`svelte



`

Git Diff Mode

`svelte



`

Styling

`svelte

`

API Reference

$3

| 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 |
| extendData | ExtendData | Additional data per line |
| renderWidgetLine | Snippet | Custom widget snippet |
| renderExtendLine | Snippet | Custom extend data snippet |

$3

| Event | Payload | Description |
|-------|---------|-------------|
| onAddWidgetClick | { side, lineNumber } | Fired when widget button is clicked |

$3

`typescript
type DiffData = {
oldFile?: {
fileName?: string | null;
fileLang?: string | null;
content?: string | null;
};
newFile?: {
fileName?: string | null;
fileLang?: string | null;
content?: string | null;
};
hunks: string[];
};
``

Examples

- Svelte Example

Live Demo

Try it online: https://mrwangjusttodo.github.io/git-diff-view

License

MIT © MrWangJustToDo