Data Display

DiffViewer

A diff, unified or side by side, with the syntax colouring the rest of the library uses.

Full reference: every prop and when to use it →

Walkthrough

1. Basic

Give it before and after. A second diff runs inside a changed pair of lines, so a renamed variable shows as one word moving rather than two whole lines replaced.

total.ts +3 −3

export function total(items) {

export function total(items, tax = 0) {

let sum = 0;

for (const item of items) {

sum += item.price;

sum += item.price * item.qty;

}

return sum;

return sum * (1 + tax);

}

1<script lang="ts">2	import { DiffViewer } from 'omaris';34	const before = `export function total(items) {5	let sum = 0;6	for (const item of items) {7		sum += item.price;8	}9	return sum;10}`;1112	const after = `export function total(items, tax = 0) {13	let sum = 0;14	for (const item of items) {15		sum += item.price * item.qty;16	}17	return sum * (1 + tax);18}`;19</script>2021<DiffViewer {before} {after} lang="ts" title="total.ts" class="w-full" />

2. Split and context

switchable offers the unified / split toggle, and view is bindable so the choice is yours to keep. context is how many unchanged lines survive either side of a change — the rest collapse into a strip you can click open.

tokens.ts (main) tokens.ts (branch) +3 −2

// boilerplate line 4

const theme = 'light';

const theme = 'system';

const radius = 8;

const radius = 12;

const easing = 'emphasized';

// trailing line 1

// trailing line 2

// trailing line 3

// trailing line 4

view: split

1<script lang="ts">2	import { DiffViewer, Text, type DiffView } from 'omaris';34	const before = `// boilerplate line 15// boilerplate line 26// boilerplate line 37// boilerplate line 48const theme = 'light';9const radius = 8;10// trailing line 111// trailing line 212// trailing line 313// trailing line 4`;1415	const after = `// boilerplate line 116// boilerplate line 217// boilerplate line 318// boilerplate line 419const theme = 'system';20const radius = 12;21const easing = 'emphasized';22// trailing line 123// trailing line 224// trailing line 325// trailing line 4`;2627	let view = $state<DiffView>('split');28</script>2930<div class="flex w-full flex-col gap-2">31	<DiffViewer32		{before}33		{after}34		lang="ts"35		bind:view36		switchable37		context={1}38		titles={['tokens.ts (main)', 'tokens.ts (branch)']}39		height="20rem"40	/>41	<Text variant="label-sm" tone="muted">view: {view}</Text>42</div>

3. From a patch

Hand it the patch that git diff printed and it renders that instead — identically, since both end up in the same shape. wrap keeps long lines on screen, and classes.viewport replaces the height the property sets.

+3 −1

import { clsx, type ClassValue } from 'clsx';

import { twMerge } from 'tailwind-merge';

import { extendTailwindMerge } from 'tailwind-merge';

const twMerge = extendTailwindMerge({ extend: { classGroups: { shadow: ['shadow-1'] } } });

export function cn(...inputs: ClassValue[]) {

return twMerge(clsx(inputs));

1<script lang="ts">2	import { DiffViewer } from 'omaris';34	const patch = `diff --git a/src/lib/utils.ts b/src/lib/utils.ts5--- a/src/lib/utils.ts6+++ b/src/lib/utils.ts7@@ -1,7 +1,8 @@8 import { clsx, type ClassValue } from 'clsx';9-import { twMerge } from 'tailwind-merge';10+import { extendTailwindMerge } from 'tailwind-merge';11+12+const twMerge = extendTailwindMerge({ extend: { classGroups: { shadow: ['shadow-1'] } } });1314 export function cn(...inputs: ClassValue[]) {15 	return twMerge(clsx(inputs));16 }`;17</script>1819<DiffViewer20	{patch}21	lang="ts"22	size="sm"23	wrap24	view="unified"25	height="auto"26	classes={{ viewport: 'max-h-64', header: 'bg-surface-container-low' }}27	class="w-full"28/>