---
title: "Diff"
description: "Render structured diffs with line-level semantic markup — added, removed, context, hunk."
section: vault
prev-url: "status/"
prev-title: "Status"
next-url: "session/"
next-title: "Session Log"
type: vault
date: 2026-04-09
tags: ["vault", "diff", "reference"]
ai-disclosure: "generated"
ai-model: "claude-sonnet-4-5"
ai-provider: "Anthropic"

---

## Overview

Use `data-diff` on a `<pre>` block to render a structured diff. Child elements carry line-level semantics.

```html
<pre data-diff>
  <span data-line="hunk">@@ -12,7 +12,9 @@</span>
  <span data-line="context"> function greet(name) {</span>
  <span data-line="removed">-  return "Hello " + name;</span>
  <span data-line="added">+  const greeting = `Hello, ${name}!`;</span>
  <span data-line="added">+  return greeting;</span>
  <span data-line="context"> }</span>
</pre>
```

## Line Types

| Value | Meaning |
|-------|---------|
| `hunk` | Hunk header (`@@ ... @@`) — muted, italic |
| `context` | Unchanged surrounding line — default text |
| `removed` | Deleted line — red background, `-` prefix |
| `added` | New line — green background, `+` prefix |

## Inline Diffs

For single-value changes in prose, use `data-diff` directly on `<del>` and `<ins>`:

```html
<p>
  Latency changed from
  <del data-diff="removed">240ms</del>
  to
  <ins data-diff="added">18ms</ins>
  after the index rebuild.
</p>
```

## Notes

The `data-diff` block expects monospace rendering. ASW applies `font-family: var(--asw-font-mono)` automatically — no additional class needed.