> ## Documentation Index
> Fetch the complete documentation index at: https://docs.holydocs.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Diff

Code diff viewer with GitHub-style highlighting. Supports unified diff and before/after formats.

**Interactive playground** For isolated previews, theme switching, and sandbox editing, open [the Diff playground on holydocs.com](https://holydocs.com/components/diff).

## When to use

Use this component when source needs more context than a plain fenced block can provide, or when multiple code representations should stay synced.

## Live Examples

Every example below renders the real component directly inside HolyDocs, followed by the exact MDX you can paste into a page.

### Unified Diff

Standard unified diff format.

**api.ts**

@@ -1,3 +1,3 @@
-const endpoint = "/v1/users";
+const endpoint = "/v2/users";
 const res = await fetch(endpoint);

~~~mdx
<Diff language="typescript" title="api.ts">
@@ -1,3 +1,3 @@
-const endpoint = "/v1/users";
+const endpoint = "/v2/users";
 const res = await fetch(endpoint);
</Diff>
~~~

### Before/After

Automatic diff from two code blocks.

const api = "/v1/users";
const res = fetch(api);
  const api = "/v2/users";
const res = fetch(api);

~~~mdx
<Diff language="javascript">
  <Before>
const api = "/v1/users";
const res = fetch(api);
  </Before>
  <After>
const api = "/v2/users";
const res = fetch(api);
  </After>
</Diff>
~~~

## Props

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `language` | `string` | `'text'` | Syntax highlighting language. |
| `title` | `string` | `--` | Optional filename header. |

## Usage

Start from this baseline shape and then tailor the copy, data, or nesting to the page you are writing.

~~~mdx
<Diff language="typescript" title="api.ts">
@@ -1,3 +1,3 @@
-const endpoint = "/v1/users";
+const endpoint = "/v2/users";
 const res = await fetch(endpoint);
</Diff>
~~~

## Tips

- Optimize for copy-paste reliability. Labels, tabs, and annotations should help readers choose the right snippet without modifying it first.
- Keep examples small enough to scan but realistic enough to survive first use in a real project.
- If the code block is critical to task completion, mirror the same example in prose so search and AI tools can recover the intent.

## Related Components

**[Code Block](/components/code-block)**

Fenced code blocks with syntax highlighting, language labels, and copy buttons.
**[CodeGroup](/components/code-group)**

Tabbed multi-language code block for showing the same snippet in several programming languages.
**[Mermaid](/components/mermaid)**

Create flowcharts, sequence diagrams, Gantt charts, and other visualizations from text using Mermaid syntax.

## More

- Interactive playground: [Diff on holydocs.com](https://holydocs.com/components/diff)
- Component library index: [/components](/components)