Does the component find the differences?

No. It renders the aligned segments supplied by the caller and uses the changed flag for semantic insertion/deletion presentation.

Can a reviewer navigate with a keyboard?

Yes. Previous and Next are native buttons, keep focus after activation, and do not wrap at either end.

What if the revisions contain no changed segments?

Both full texts remain visible and the component reports that there are no changes to navigate.

Text Revision Reader

Read two caller-aligned text revisions with semantic edits and Previous/Next change navigation.

Policy revision

Previous policy

Review starts Monday. ~~Keep drafts for 30 days.~~ ~~Email the archive.~~ No text for this segment.

Proposed policy

Review starts Monday. Keep drafts for 60 days. No text for this segment.Keep an offline copy.

Change 1 of 3

Selected segment: retention

Customise

Code

<TextRevisionReader
  title="Policy revision"
  beforeLabel="Previous policy"
  afterLabel="Proposed policy"
  segments={[{ id: "retention", beforeText: "Keep drafts for 30 days.", afterText: "Keep drafts for 60 days.", changed: true }]}
/>

Text Revision Reader presents two complete caller-prepared revisions side by side and lets reviewers move between retained changes. Insertions and deletions use semantic ins and del markup, while unchanged text remains ordinary, selectable text.

The caller supplies the aligned segments and change classification. The component does not calculate a diff, parse markup, edit content, merge revisions, or scroll the page on the reader's behalf.

Install

Add the @te registry to your components.json once:

{
  "registries": {
    "@te": "https://templateempire.io/r/{name}.json"
  }
}

Then install the component:

npx shadcn@latest add @te/text-revision-reader

Usage

import { TextRevisionReader } from "@/components/text-revision-reader";

<TextRevisionReader
  title="Policy revision"
  beforeLabel="Previous policy"
  afterLabel="Proposed policy"
  segments={[
    { id: "intro", beforeText: "Review starts Monday.\n", afterText: "Review starts Monday.\n", changed: false },
    { id: "retention", beforeText: "Keep drafts for 30 days.", afterText: "Keep drafts for 60 days.", changed: true },
  ]}
/>

Props

Prop	Type	Default	Description
title	string	required	Visible heading and accessible reader name.
beforeLabel	string	required	Name of the earlier revision.
afterLabel	string	required	Name of the later revision.
segments	TextRevisionReaderSegment[]	required	Ordered, uniquely identified aligned segments. Unchanged text must match exactly; changed segments need at least one non-empty side.
className	string	undefined	Additional classes merged onto the root.

Customisation

Prepare aligned text segments in the consumer. Use changed segments for insertion, deletion, or replacement and unchanged segments for identical text. The component preserves supplied whitespace, displays both complete revisions, and keeps navigation focus in place without automatic scrolling.

<TextRevisionReader
  title="Release-note review"
  beforeLabel="Published"
  afterLabel="Proposed"
  segments={releaseNoteSegments}
/>

Frequently asked questions

Does the component find the differences?: No. It renders the aligned segments supplied by the caller and uses the changed flag for semantic insertion/deletion presentation.
Can a reviewer navigate with a keyboard?: Yes. Previous and Next are native buttons, keep focus after activation, and do not wrap at either end.
What if the revisions contain no changed segments?: Both full texts remain visible and the component reports that there are no changes to navigate.

Related components

Want the full page this belongs to?Template Empire builds complete editorial and policy review experiences with considered reading flows. Browse the paid templates that pair with these free components.Explore Template Empire templates