← →

Diff

`pura-diff` computes an inline diff (LCS, zero deps) between a `before` text and an `after` text, rendering removed segments in struck-through red, added ones in underlined green, and the rest as plain text. Use it to compare versions of a text, review AI edits, or highlight changes with no external dependencies. The agent-native layer exposes each segment with `data-op` and `data-text`, reflects counts in `data-added`/`data-removed`/`data-equal` on the host, emits a structured `diff` event, and registers each instance in `window.__puraDiffs` so that agents can read the result without scraping the DOM.

Preview

<pura-diff
  block
  before="The brown dog jumped over the low wall."
  after="The black cat jumped over the high wall."
  label="Difference between the two sentences"
></pura-diff>

<!-- Character mode, using slots as the text source -->
<pura-diff mode="chars" block>
  <span slot="before">commit 1a2b3c</span>
  <span slot="after">commit 1a2b3d</span>
</pura-diff>

Attributes

Attribute	Type	Default	Description
`before`	string	""	Original text. Can be overridden by slot[name="before"].
`after`	string	""	New text. Can be overridden by slot[name="after"].
`mode`	"words" \| "chars"	"words"	Diff granularity: by words (default) or by characters.
`label`	string	"Text diff"	Accessible label (aria-label) for the diff region.
`block`	boolean	false	When present, displays the component as a block instead of inline.

Installation

pura is copy-paste and dependency-free. Load the whole library, or just this component.

HTML

<link rel="stylesheet" href="/pura/tokens.css">
<script type="module" src="/pura/lib/diff.js"></script>

JavaScript

import "./pura/lib/diff.js";

Slots

beforeafter

Events

diff