Edit History Diff
Document version history with a selectable edit list on the left and an inline before and after diff panel on the right using theme token opacity.
Document version history with a selectable edit list on the left and an inline before and after diff panel on the right using theme token opacity.
Search blocks by description or jump to a page.
The source for every Application block is included with Basic and Pro. Pick a plan to copy the code.
Already purchased? Log in
Edit History Diff is the change-review surface: a two-panel layout where the left column lists five versions of the Pricing page (Maya Chen rewording the CTA, Priya Nair clarifying the pricing section, Avery Stone adding the feature comparison table, down to Noah Park initial draft) and the right panel shows the selected edit as an inline diff. Added runs get bg-foreground/10 and font-medium; removed runs get bg-foreground/5 and line-through. A legend below the diff names Added and Removed with color swatches. The footer says the history is read-only and cannot be deleted, which is the audit guarantee.
Edits are one typed array with a selected flag; diffLines is a separate typed array of segment arrays. Theme-token opacity replaces literal green and red so the diff reads on dark and light themes without special-casing.
Reach for this block on a document detail page or a settings audit panel, wired to your document version history API. The selected edit state should be driven by the URL or click state in the real implementation.
A natural flow around it on an Application Pro page:
Before
After
One strong use is the document version diff for a content or copy workflow. Other diff surfaces:
Tip: the read-only footer is the one place in a product where admitting a constraint builds more trust than hiding it; keep it.