Related Snippets

144 in Dashboards category
1–6 of 60
Interact.js Draggable and Resizable Dashboard Panels with Snapping

Interact.js Draggable and Resizable Dashboard Panels with Snapping

Dragula Copy vs Move Lists with Spill Control

Dragula Copy vs Move Lists with Spill Control

SortableJS Shared Groups: Clone from a Palette into a Page Builder

SortableJS Shared Groups: Clone from a Palette into a Page Builder

SortableJS Drag Handle with Pinned and Locked Rows

SortableJS Drag Handle with Pinned and Locked Rows

SortableJS Nested Sortable Tree with Keyboard Controls

SortableJS Nested Sortable Tree with Keyboard Controls

SortableJS Multi-List Kanban with Persistence and WIP Limit

SortableJS Multi-List Kanban with Persistence and WIP Limit

Learn Coding Visually

Learn to code with interactive, live-preview playgrounds — HTML, CSS, JavaScript, React & more.

See all ->
HTML Playground42 lessons · Click-based · Live previewCSS PlaygroundLearn CSS with a live editorJavaScript Playground60 lessons · DOM · Async · CanvasReact PlaygroundLearn React with a live code editorGSAP PlaygroundLearn GSAP animation interactivelySVG Playground44 lessons · shapes · paths · animationSCSS Playground45 lessons · Sass modules · tokensTailwind PlaygroundLearn Tailwind CSS with a live editorBootstrap 5 Playground50 lessons · live preview

Version History Timeline — Free HTML CSS JS Snippet

Version History Timeline · Dashboards · Plain HTML, CSS & JS · Live preview

CategoryDashboards
TagsCSS AnimationDashboard UISocial UI

What's included

Features

Data-driven timeline
One VERSIONS array renders every row — add a real version by adding an object.
CSS connector line
A ::before pseudo-element draws the timeline spine, no SVG needed.
Hover-reveal restore
Restore actions fade in on hover so the list stays uncluttered at rest.
Confirmed restore state
Clicking restore flips the button to a clear "Restored" confirmation.
Two-version compare
Checking two rows reveals a diff summary with line stats and changes.
Auto-managed selection
A third check drops the oldest so the compare pair never exceeds two.
Newest-first diff order
The compare panel always shows newer vs older regardless of click order.
Colored author avatars
Consistent per-author initials and color make history scannable at a glance.

About this UI Snippet

Version History Timeline — Restore Points, Authors & Version Comparison

Screenshot of the Version History Timeline snippet rendered live

Any collaborative document tool — a docs editor, a design file, a CMS entry — needs a way to show how a file evolved and let people jump back to an earlier state. The version history timeline lists every save as a point in time with who made it and what changed, and lets you restore or compare across points. This snippet builds a complete version history in plain HTML, CSS, and vanilla JavaScript, with no dependencies.

A timeline built from one data array

Every version in VERSIONS carries an id, a label, an author with initials and a color, a relative timestamp, a one-line summary, and diff stats. render() maps that array into the list, so adding a real version — from your document's revision API — is a data change, not a markup change. The connecting line between avatars is drawn with a CSS ::before pseudo-element rather than an SVG, keeping the timeline lightweight and easy to restyle.

Restore actions that stay out of the way

Each past version gets a "Restore this version" button that's invisible until you hover the row, then fades and slides in. This keeps the list scannable at rest — nobody needs to see seven restore buttons at once — while making the action obvious and reachable the moment you're actually looking at that version. Clicking it flips the button to a confirmed "Restored" state, the same pattern you'd wire to a real restore-version API call.

Comparing two versions

Each row also has a compare checkbox. Checking exactly two reveals a diff summary panel showing the added/removed line counts and a bulleted list of what changed between them, ordered newest-first regardless of click order. Checking a third automatically drops the oldest selection, so you're never stuck needing to manually uncheck something to compare a different pair — similar in spirit to how comment thread sorting reorders without losing state.

Author identity at a glance

Each version shows a colored initials avatar for its author, echoing the visual language of avatar stack and team presence list — consistent author coloring across a document's history makes it easy to spot "which versions did I make" versus a collaborator's at a glance, without reading every name.

Wiring it to a real backend

Swap the VERSIONS array for your document API's revision list, keeping the same shape (id, author, time, summary, added/removed counts, and a changes array or generated diff). The restore button's click handler is where you'd call your actual restore-version endpoint; the compare panel is where you'd render a real line-level diff if your backend produces one.

Build with AI

Build, Understand, Optimize, and Extend It With AI

You don't have to work out the selection-management logic by hand. Paste this snippet's HTML, CSS, and JS into an AI coding assistant like Claude and ask it to explain exactly how the selected array caps itself at two entries by dropping the oldest checkbox when a third is checked, and why the compare panel always sorts the pair newest-first regardless of click order. The same assistant can help you optimize it — ask whether re-rendering the full list on every restore click is necessary or whether a targeted class swap on just the clicked button is enough. It's also useful for extending the timeline: ask it to add pagination for documents with dozens of versions, a real line-level diff renderer, or a confirmation dialog before restore actually overwrites the current version. Treat the code less like a finished artifact and more like a starting point for a conversation.

Prompt to recreate it

Copy this into your AI assistant of choice to build the effect from scratch, or as a jumping-off point for your own variant:

text
Build a document "version history timeline" in plain HTML, CSS, and JavaScript — no frameworks, no libraries.

Requirements:
- Render a vertical list of version entries from a single data array, each with an id, author name and initials, a relative timestamp, a one-line change summary, and added/removed line counts, with the current version visually distinguished at the top and a connecting timeline line drawn between entries using a CSS pseudo-element (not an SVG or image).
- Each past (non-current) version must show a "Restore this version" button that is invisible at rest and fades/slides into view only when that specific row is hovered, so the list stays visually calm when not being interacted with; clicking it should flip the button into a distinct confirmed "Restored" state.
- Give every version a compare checkbox. When exactly two are checked, show a diff summary panel with the added/removed line counts and a bulleted list of what changed, always ordered so the newer of the two selected versions is treated as the "after" state regardless of the order the boxes were checked in.
- If a third checkbox is checked while two are already selected, automatically uncheck and drop the oldest of the two current selections so the comparison always reflects your two most recent picks, without requiring the user to manually deselect anything.
- Show a small hint text that updates based on selection state: prompting to select two versions, prompting to select one more, or confirming two are being compared.
- Give each author a consistent colored initials avatar so a reader can visually tell at a glance which versions came from which person.

Want to tighten it up first? Run this prompt through the AI Prompt Studio to score it across 8 quality dimensions, catch anti-patterns, and tune the wording for Claude, ChatGPT, or Gemini before you paste it in.

Source Code

<div class="vht-card">
  <div class="vht-head">
    <div>
      <h2>Version history</h2>
      <p>Q3-roadmap.docx · 7 versions</p>
    </div>
    <span class="vht-hint" id="vhtHint">Select two versions to compare</span>
  </div>

  <div class="vht-list" id="vhtList"></div>

  <div class="vht-compare" id="vhtCompare" hidden>
    <div class="vht-compare-head">
      <strong id="vhtCompareTitle">Comparing v5 and v7</strong>
      <button type="button" id="vhtCompareClose">Clear</button>
    </div>
    <div class="vht-compare-stats" id="vhtCompareStats"></div>
    <ul class="vht-compare-changes" id="vhtCompareChanges"></ul>
  </div>
</div>

Step by step

How to Use

  1. 1
    Paste HTML, CSS, and JSA version timeline renders with the current version at the top and six prior versions below it.
  2. 2
    Hover a past versionA "Restore this version" button fades in over that row's summary.
  3. 3
    Click restoreThe button switches to a confirmed green "Restored" state.
  4. 4
    Check two compare boxesA diff panel appears showing added/removed line counts and what changed.
  5. 5
    Check a third boxThe oldest selection is dropped automatically so the pair stays at two.
  6. 6
    Connect real dataReplace VERSIONS with your document API's revision list in the same shape.

Real-world uses

Common Use Cases

Document editors
Show save history in a docs or wiki tool, alongside comment thread discussions.
Design file history
Let designers restore or compare canvas versions in a Figma-like tool.
CMS content revisions
Track edits to a page or post with author attribution and restore points.
Code review context
Summarize commit-like history for a non-technical audience reviewing changes.
Collaborative presence
Pair with a shared document presence bar to show who's active now versus who edited before.
Approval workflows
Combine with a task approval flow card to review a version before approving it.

Got questions?

Frequently Asked Questions

Each checkbox click adds or removes that version's id from a selected array. When selected has two entries, updateCompare() sorts them newest-first and pulls their diff stats and changes from the VERSIONS array to render the panel. Anything other than exactly two selections hides the panel and updates the hint text to tell you how many more to pick.

The oldest of the two currently selected ids is removed — its checkbox is unchecked programmatically and dropped from the selected array — before the new one is added. This keeps the comparison always showing your two most recent picks without requiring you to manually deselect anything first.

Give each version a real revision id from your backend, and in the click handler for .vht-restore, call your document API's restore-version endpoint with that id instead of just toggling the button's text and class. On success, keep the "Restored" confirmation state and optionally refresh the version list so the restored version's copy becomes the new "Current" entry.

This snippet shows a diff summary (line counts and a change list) rather than a full inline diff, since most document APIs return structured change summaries rather than raw text diffs. If your backend does return line-level diffs, render them inside .vht-compare-changes using a diff-rendering approach appropriate to your content type (text diff, rich-text operational transform log, or a JSON patch).

Model VERSIONS as state or a prop, track selected version ids in component state, and derive the compare panel's visibility and content from that selection with a computed value or useMemo. The restore and compare logic are plain functions of the array and selection, so they port directly — only the DOM string-building in render() needs to become JSX or template syntax.