Diff

Render structured diffs with semantic line-level styling — added, removed, context, and hunk markers.

Why diff output needs styling

Agents produce diffs constantly. git diff, file comparisons, configuration audits, session summaries. Without styling, this is monospaced black text — scannable only by symbol (+ / -). With data-diff, it becomes immediately visual: green lines added, red removed, dim context, blue hunk markers.

No other CSS framework ships this. It exists because agents need it.

Quick start

<div data-diff>
  <span data-diff-file>src/config.json</span>
  <span data-diff-line="hunk">@@ -4,7 +4,7 @@</span>
  <span data-diff-line="context">  "name": "my-project",</span>
  <span data-diff-line="removed">  "version": "1.0.0",</span>
  <span data-diff-line="added">  "version": "1.1.0",</span>
  <span data-diff-line="context">  "description": "A project"</span>
  <span data-diff-line="context">}</span>
</div>
src/config.json @@ -4,7 +4,7 @@ "name": "my-project", "version": "1.0.0", "version": "1.1.0", "description": "A project" }

Attributes

Attribute Element Role
data-diff <div> Container. Monospaced, bordered, horizontally scrollable.
data-diff-file <span> File header bar. Shows filename or path.
data-diff-line <span> One line of diff. Value sets prefix and color.

data-diff-line values

Value Prefix Style Use for
added + Green tint Inserted lines
removed − Red tint Deleted lines
context Dim Unchanged surrounding lines
hunk @@ Blue tint, italic Hunk header markers

Multi-file diff

Multiple data-diff-file headers within a single data-diff container separate files in one block.

<div data-diff>
  <span data-diff-file>src/tokens.css</span>
  <span data-diff-line="hunk">@@ -12,6 +12,7 @@</span>
  <span data-diff-line="context">  --accent: oklch(72% 0.18 45);</span>
  <span data-diff-line="added">  --accent-hover: oklch(78% 0.18 45);</span>
  <span data-diff-line="context">  --border: oklch(30% 0.01 270);</span>

  <span data-diff-file>src/components.css</span>
  <span data-diff-line="hunk">@@ -88,4 +88,8 @@</span>
  <span data-diff-line="removed">  border-color: var(--accent);</span>
  <span data-diff-line="added">  border-color: var(--accent-hover);</span>
</div>
src/tokens.css @@ -12,6 +12,7 @@ --accent: oklch(72% 0.18 45); --accent-hover: oklch(78% 0.18 45); --border: oklch(30% 0.01 270); src/components.css @@ -88,4 +88,8 @@ border-color: var(--accent); border-color: var(--accent-hover);

Session output example

A common agentic pattern: report what changed at the end of a session.

<div data-diff>
  <span data-diff-file>build.sh</span>
  <span data-diff-line="hunk">@@ -71,6 +71,10 @@</span>
  <span data-diff-line="context">  --from gfm+yaml_metadata_block \</span>
  <span data-diff-line="added">  --lua-filter packs/pandoc/asw.lua \</span>
  <span data-diff-line="context">  --template "$tmpl_file" \</span>

  <span data-diff-file>README.md</span>
  <span data-diff-line="hunk">@@ -1,3 +1,3 @@</span>
  <span data-diff-line="removed"># Agentic Semantic Web</span>
  <span data-diff-line="added"># ASW — Agentic Semantic Web</span>
  <span data-diff-line="context"></span>
  <span data-diff-line="context">A CSS framework for agent-generated web content.</span>
</div>
build.sh @@ -71,6 +71,10 @@ --from gfm+yaml_metadata_block \ --lua-filter packs/pandoc/asw.lua \ --template "$tmpl_file" \ README.md @@ -1,3 +1,3 @@ # Agentic Semantic Web # ASW — Agentic Semantic Web A CSS framework for agent-generated web content.

Notes for agents