Diff

For isolated previews, theme switching, and sandbox editing, open the Diff playground on holydocs.com .

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.

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.

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

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

More

• Interactive playground: Diff on holydocs.com
• Component library index: /components