Diff Viewer

Code diff viewer with line numbers and add/remove coloring. Supports unified and split layouts.

difflucide-react

greet.ts→greet.ts

+2-2

Installation

$ shadcn add @jalco/diff-viewer

import { DiffViewer } from "@/components/diff-viewer"

<DiffViewer oldCode={before} newCode={after} />

Unified (default)

counter.tsx→counter.tsx

+8-4

1		-	import { useState } from "react"
	1	+	import { useState, useCallback } from "react"
2	2
3		-	function Counter() {
4		-	const [count, setCount] = useState(0)
	3	+	function Counter({ initial = 0 }) {
	4	+	const [count, setCount] = useState(initial)
5	5
	6	+	const increment = useCallback(() => {
	7	+	setCount((prev) => prev + 1)
	8	+	}, [])
	9	+
6	10		return (
7		-	<button onClick={() => setCount(count + 1)}>
	11	+	<button onClick={increment}>
8	12		Count: {count}
9	13		</button>
10	14		)

Split

before.tsx→after.tsx

+8-4

1	import { useState } from "react"
2
3	function Counter() {
4	const [count, setCount] = useState(0)
5




6	return (
7	<button onClick={() => setCount(count + 1)}>
8	Count: {count}
9	</button>
10	)

1	import { useState, useCallback } from "react"
2
3	function Counter({ initial = 0 }) {
4	const [count, setCount] = useState(initial)
5
6	const increment = useCallback(() => {
7	setCount((prev) => prev + 1)
8	}, [])
9
10	return (
11	<button onClick={increment}>
12	Count: {count}
13	</button>
14	)

PropType

Two input modes. Pass oldCode + newCode to compute the diff, or pass a patch string if you already have one.
Icon library. Uses Lucide icons by default. Since this is copy-paste code, you can swap the imports if your project uses a different icon library.