Sivir UI
Studio 64

File Diff

A unified diff viewer with a file top bar, change counts, and highlighted rows.

src/auth.ts +3 −1
export function getToken() {
return localStorage.token;
const t = cookies.get("session");
if (!t) throw new Error("no session");
return t;
}

Installation

Copy the command below and run it in your terminal.

bunx @sivir-ui/svelte add file-diff

The component depends on highlight.js. Install it if your project doesn't have it yet:

Copy the command below and run it in your terminal.

bun add highlight.js

Usage

Pass a diff array for the high-level form, or compose TopBar, Content, and Row by hand. A bare TopBar renders filename and counts; pass children to take over the row with Filename, PlusMinus, and your own actions. Addition and deletion counts are derived from the diff unless you pass them explicitly.

import * as FileDiff from '$lib/sivir/components/file-diff';

<FileDiff.Root file="src/auth.ts" lang="ts" diff={[
  { type: 'context', oldLineNumber: 12, newLineNumber: 12, content: 'export function getToken() {' },
  { type: 'remove', oldLineNumber: 13, content: '  return localStorage.token;' },
  { type: 'add', newLineNumber: 13, content: '  const t = cookies.get("session");' },
]} />

Examples

From a single high-level diff to fully composed rows and stacked files.

Compound API

Drop down to rows when you need a custom top-bar action or explicit counts. Recompose the header from Filename and PlusMinus parts.

src/auth.ts +3 −1
export function getToken() {
return localStorage.token;
const t = cookies.get("session");
if (!t) throw new Error("no session");
return t;
}

Without line numbers

Hide both gutters for compact embeds. The sign column stays so additions and deletions remain distinguishable without color.

src/styles.css +1 −1
color: var(--color-foreground);
background: #f4f4f0;
background: var(--color-card);
border: 1px solid var(--color-border);

Stacked files

Render one Root per file for pull-request style views. Each diff keeps its own language and counts.

src/auth.ts +3 −1
export function getToken() {
return localStorage.token;
const t = cookies.get("session");
if (!t) throw new Error("no session");
return t;
}
src/styles.css +1 −1
color: var(--color-foreground);
background: #f4f4f0;
background: var(--color-card);
border: 1px solid var(--color-border);

Anatomy

FileDiff.Root - Provides diff state and layout.

FileDiff.TopBar - Renders the file path and change counts.

FileDiff.Content - Contains the scrollable diff rows.

FileDiff.Row - Renders one highlighted diff row.

FileDiff.LineNumber - Renders one gutter line number.