Activity Feed
Timelines
Source and install need .
pnpm dlx shadcn@latest add @assembli/version-historyVersion History
Document version history in the Google Docs mould: versions grouped by day with author colors, named versions, and runs of autosaves folded under a caret. The selected version renders on a page with word-level changes from the one before in its author's color, behind a Show changes switch. Name a version in place, make a copy, or restore after a confirm. Narrow widths swap the list for a select.
Props
Other props pass through to the root element.
versions
DocVersion[]
Newest first. The first one is the current version.
defaultVersions
DocVersion[]
Default
[]onVersionsChange
(versions: DocVersion[]) => void
documentTitle
string
Default
"Untitled document"you
VersionAuthor
Default
{ name: "You", color: "#2563eb" }Who restores, for the version a restore adds.
onRestore
(version: DocVersion) => Promise<unknown> | void
Called before a restore lands. Reject to cancel it.
onCopy
(version: DocVersion) => Promise<unknown> | void
onRename
(version: DocVersion, name: string) => void
now
string | number | Date
For "Today" and "Yesterday". Pass it so server and browser agree.
timeZone
string
IANA zone for times. Pass it so server and browser agree.
locale
string
Default
"en-US"container
HTMLElement | null
Renders the restore dialog inside this element instead of the body.
title
React.ReactNode
Default
"Version history"
| Description | |||
|---|---|---|---|
| versions | DocVersion[] | – | Newest first. The first one is the current version. |
| defaultVersions | DocVersion[] | [] | |
| onVersionsChange | (versions: DocVersion[]) => void | – | |
| documentTitle | string | "Untitled document" | |
| you | VersionAuthor | { name: "You", color: "#2563eb" } | Who restores, for the version a restore adds. |
| onRestore | (version: DocVersion) => Promise<unknown> | void | – | Called before a restore lands. Reject to cancel it. |
| onCopy | (version: DocVersion) => Promise<unknown> | void | – | |
| onRename | (version: DocVersion, name: string) => void | – | |
| now | string | number | Date | – | For "Today" and "Yesterday". Pass it so server and browser agree. |
| timeZone | string | – | IANA zone for times. Pass it so server and browser agree. |
| locale | string | "en-US" | |
| container | HTMLElement | null | – | Renders the restore dialog inside this element instead of the body. |
| title | React.ReactNode | "Version history" |
