#Code Diff

Presents code changes as readable, scrollable lines so additions, removals, and context remain distinguishable without relying on color alone.

18−return reconnect()18


return reconnect({ retry: 3 })

npm install @a3s-lab/ui

<figure class="code-diff">
  <figcaption>src/session.ts</figcaption>
  <pre
    tabindex="0"
  ><code><span data-diff-line="-">return reconnect()</span><span data-diff-line="+">return reconnect(&#123; retry: 3 &#125;)</span></code></pre>
</figure>

import "@a3s-lab/ui/a3s.css";

#Usage

<figure class="code-diff">
  <figcaption>src/session.ts</figcaption>
  <pre
    tabindex="0"
  ><code><span data-diff-line="-">return reconnect()</span><span data-diff-line="+">return reconnect(&#123; retry: 3 &#125;)</span></code></pre>
</figure>

Add data-line-numbers when review context needs old and new gutters. Each line then contains data-diff-old-line, data-diff-new-line, data-diff-marker, and data-diff-code; empty line-number cells remain present so every row stays aligned.

#Contract

#Product boundary

Code Diff owns reading presentation. It does not generate patches, inspect repositories, or decide whether a change is trusted. Compose it with review and approval surfaces for full workflows.

The component publishes a reusable interaction boundary only. Data fetching, persistence, permission, trusted content, and business entities remain host-owned.

#Accessibility

Keep a visible plus, minus, or textual meaning on every changed line. Code remains left-to-right, keyboard focusable, and horizontally scrollable.