Code diff

Storybook

Code changes, line by line

A unified diff rendered as added, removed, and context lines. Added lines tint green and removed lines tint red, two gutters track the old and new line numbers, and hunk headers keep their own row. Pass the diff body as a plain string; parsing is built in, and long lines scroll horizontally inside the block.

Default

The @@ hunk header sets the starting line numbers for both gutters. Everything the parser does not recognise as an addition, removal, or header renders as context.

  1. @@ -12,7 +12,8 @@ export function normalizeLabel(input: string) {
  2. export function normalizeLabel(input: string) {
  3. const trimmed = input.trim();
  4. Removed line: if (!trimmed) return '';
  5. Removed line: return trimmed.toUpperCase();
  6. Added line: if (!trimmed) return DEFAULT_LABEL;
  7. Added line: const upper = trimmed.toLocaleUpperCase();
  8. Added line: return truncate(upper, MAX_LABEL_LENGTH);
  9. }
  11. export function truncate(value: string, max: number) {

With filename

With filename, a header bar carries the file path and a summary of additions and deletions. File header lines in the diff itself (+++ and ---) are ignored.

src/lib/normalize.ts+3 added-2 removed
  1. @@ -12,7 +12,8 @@ export function normalizeLabel(input: string) {
  2. export function normalizeLabel(input: string) {
  3. const trimmed = input.trim();
  4. Removed line: if (!trimmed) return '';
  5. Removed line: return trimmed.toUpperCase();
  6. Added line: if (!trimmed) return DEFAULT_LABEL;
  7. Added line: const upper = trimmed.toLocaleUpperCase();
  8. Added line: return truncate(upper, MAX_LABEL_LENGTH);
  9. }
  11. export function truncate(value: string, max: number) {

Without line numbers

Set showLineNumbers to false to drop both gutters and keep only the marker column, for tight spaces like chat threads.

src/lib/normalize.ts+3 added-2 removed
  1. @@ -12,7 +12,8 @@ export function normalizeLabel(input: string) {
  2. export function normalizeLabel(input: string) {
  3. const trimmed = input.trim();
  4. Removed line: if (!trimmed) return '';
  5. Removed line: return trimmed.toUpperCase();
  6. Added line: if (!trimmed) return DEFAULT_LABEL;
  7. Added line: const upper = trimmed.toLocaleUpperCase();
  8. Added line: return truncate(upper, MAX_LABEL_LENGTH);
  9. }
  11. export function truncate(value: string, max: number) {

Additions only

A diff with no hunk headers, like a block of freshly generated code, is treated as one hunk starting at line 1.

src/components/shippedBadge.tsx+5 added-0 removed
  1. Added line: import { Badge } from '@robr0/design-system';
  2. Added line:
  3. Added line: export const shippedBadge = (
  4. Added line: <Badge label="Shipped" status="positive" />
  5. Added line: );