<arc-diff> Overview
Guidelines
When to use
- Use short, focused text snippets — diffs work best with fewer than 100 lines
- Set mode="side-by-side" when horizontal space allows for easier comparison
- Pair with a heading or label to describe what is being compared
- Use for code snippets, configuration files, or any line-oriented text
- Wrap in a container with a max-height and overflow-y: auto for very long diffs
When not to use
- Pass binary or non-text content as before/after values
- Use Diff for single-character or word-level highlighting — it operates on whole lines
- Embed interactive elements inside the before or after strings
- Use side-by-side mode in narrow containers where columns would be too cramped
Features
- LCS-based line diff algorithm with no external dependencies
- Inline mode interleaves additions and removals in a single column
- Side-by-side mode renders two panes in a CSS grid with a subtle divider
- Color-coded lines: green for added, red with strikethrough for removed, muted for unchanged
- Line number gutter with non-selectable numbers for clean copy-paste
- Prefix markers (+, -, space) in a fixed-width column for scanning
- Monospace font stack with code-size typography tokens
- Horizontal scroll with thin styled scrollbars for long lines
- Exposed CSS parts (container, line, line-number, prefix) for external style overrides
- Respects prefers-reduced-motion for transitions
Preview
Usage
<arc-diff
before="const name = 'World';
console.log('Hello');
return name;"
after="const name = 'ARC UI';
console.log('Hello');
console.log('Welcome');
return name;">
</arc-diff>
<!-- Side-by-side mode -->
<arc-diff mode="side-by-side"
before="line one
line two
line three"
after="line one
line 2
line three
line four">
</arc-diff>import { Diff } from '@arclux/arc-ui-react';
<Diff
before={`const name = 'World';
console.log('Hello');
return name;`}
after={`const name = 'ARC UI';
console.log('Hello');
console.log('Welcome');
return name;`}
/>
{/* Side-by-side mode */}
<Diff mode="side-by-side"
before="line one\nline two\nline three"
after="line one\nline 2\nline three\nline four"
/><script setup>
import { Diff } from '@arclux/arc-ui-vue';
const original = `const name = 'World';
console.log('Hello');
return name;`;
const modified = `const name = 'ARC UI';
console.log('Hello');
console.log('Welcome');
return name;`;
</script>
<template>
<Diff :before="original" :after="modified" />
<Diff mode="side-by-side" :before="original" :after="modified" />
</template><script>
import { Diff } from '@arclux/arc-ui-svelte';
const original = `const name = 'World';
console.log('Hello');
return name;`;
const modified = `const name = 'ARC UI';
console.log('Hello');
console.log('Welcome');
return name;`;
</script>
<Diff before={original} after={modified} />
<Diff mode="side-by-side" before={original} after={modified} />import { Component } from '@angular/core';
import { Diff } from '@arclux/arc-ui-angular';
@Component({
imports: [Diff],
template: `
<Diff
[before]="original"
[after]="modified">
</Diff>
<Diff mode="side-by-side"
[before]="original"
[after]="modified">
</Diff>
`,
})
export class MyComponent {
original = `const name = 'World';
console.log('Hello');
return name;`;
modified = `const name = 'ARC UI';
console.log('Hello');
console.log('Welcome');
return name;`;
}import { Diff } from '@arclux/arc-ui-solid';
const original = `const name = 'World';
console.log('Hello');
return name;`;
const modified = `const name = 'ARC UI';
console.log('Hello');
console.log('Welcome');
return name;`;
<Diff before={original} after={modified} />
<Diff mode="side-by-side" before={original} after={modified} />import { Diff } from '@arclux/arc-ui-preact';
const original = `const name = 'World';
console.log('Hello');
return name;`;
const modified = `const name = 'ARC UI';
console.log('Hello');
console.log('Welcome');
return name;`;
<Diff before={original} after={modified} />
<Diff mode="side-by-side" before={original} after={modified} />API
| Prop | Type | Default | Description |
|---|---|---|---|
before | string | '' | The original text to compare (split by newlines). |
after | string | '' | The modified text to compare (split by newlines). |
mode | string | 'inline' | Display mode: 'inline' renders changes in a single column, 'side-by-side' renders two panes in a grid. |