Standard Data
Text Diff Viewer
Shows exactly what changed between two blocks of text — side-by-side or as a single unified list — with every added or removed line carrying a glyph and a screen-reader label so the change is readable without relying on colour.
$ velocityx add standard-text-diff-viewer Built for astro.
Full docs for Text Diff Viewer →
Needs a licence key —
subscribe here, then
velocityx loginonce.
| v12 | v13 |
|---|---|
| 1 server: | 1 server: |
| 2 port: 8080 | 2 port: 8080 |
| 3 Removed: timeout: 30 | |
| 3 Added: timeout: 60 | |
| 4 retries: 3 | 4 retries: 3 |
| 5 Added: keepAlive: true | |
| 5 | 6 |
Props
| Name | Type | Required | Default | Description |
|---|---|---|---|---|
| before | string | No | "" | |
| after | string | No | "" | |
| beforeLabel | string | No | "Before" | |
| afterLabel | string | No | "After" | |
| mode | "split" | "unified" | No | "split" | |
| label | string | No | "Text comparison" | |
| className | string | No | "" |
File this creates
The CLI writes this path into your project, relative to its root — nothing else moves.
components/velocity/standard-text-diff-viewer/TextDiffViewer.astro Using the Text Diff Viewer component
Install it with velocityx add standard-text-diff-viewer.
The CLI writes the source straight into your project — no runtime dependency, no registry
lock-in, and it themes itself from the same primary-*/accent-* scale as the rest of the library.
Related components
More from Standard Data.
A compliance-grade record of who did what and when, grouped under calendar-day headers with a severity tag per row and a details disclosure that reveals the structured change data only when someone needs it — built for security and admin audit trails, not a social activity stream.
astroShows when a dataset was last updated in plain words, flags it as stale past a threshold you set, and exposes a Refresh action — so a dashboard never leaves a viewer guessing whether the numbers on screen are current.
astroShimmering placeholder rows sized to match the real table's columns, so a data grid has zero layout shift the moment live rows arrive.
astroSemantic record details in stacked or two-column layouts with optional field hints and empty-value text.
astro