webdevpuneet.com

Related Snippets

148 in Cards category
1–6 of 60

Quiz Card

3D Pin Card

WOW.js Staggered Testimonial Wall

WOW.js Scroll Reveal Cards

Popmotion Swipe-Dismiss Stack

Popmotion Drag Inertia Card

Changelog / Release Notes Feed — HTML CSS JS Snippet

Changelog / Release Notes · Cards · Plain HTML, CSS & JS · Live preview

CategoryCards
TagsDeveloper Tools

Copy & paste

Source Code

<div class="wrap">
  <div class="header">
    <h1 class="title">What's New</h1>
    <p class="sub">Latest updates, features, and fixes.</p>
    <div class="filter-tabs" id="filterTabs">
      <button class="ftab active" data-filter="all" onclick="setFilter('all',this)">All</button>
      <button class="ftab" data-filter="feature" onclick="setFilter('feature',this)">Features</button>
      <button class="ftab" data-filter="improvement" onclick="setFilter('improvement',this)">Improvements</button>
      <button class="ftab" data-filter="fix" onclick="setFilter('fix',this)">Fixes</button>
    </div>
  </div>
  <div class="feed" id="feed"></div>
</div>

Extend with AI

Take This Snippet Further With AI

The AI prompt for this one is for Patreon supporters ($3 a month), along with a site with no ads. Supporters enter the passcode once and it is remembered in this browser.

· Become a supporter

What's included

Features

Vertical timeline with pseudo-element connector line
Glow dot for recent entries, neutral dot for older ones
Version number badge in monospace for developer readability
Four colour-coded type badges: feature, improvement, fix, security
Per-entry bullet-point items list
Filter tabs (All / Features / Improvements / Fixes)
Data-driven rendering from a plain JS array
Compact date label positioned at the right of the header row

About this UI Snippet

Changelog Feed — Version Timeline, Type Badges & Filter Tabs

Screenshot of the Changelog / Release Notes snippet rendered live

A changelog or release notes page is a high-search-intent component for SaaS products, developer tools, and open-source libraries because it is both a trust signal and a product communication channel — the forward-looking counterpart is the product roadmap, and the in-app version is the activity feed. This snippet provides a complete changelog feed with a vertical timeline, version number badges, type-coloured labels (feature, improvement, fix, security), per-entry bullet points, filter tabs to isolate a change type, and a "new" indicator on recent entries.

The data model

The entries array is the single source of truth: each entry has a version string, a type, a date, a title, an optional body paragraph, and an optional items array of bullet points. The renderer maps over this array to produce the HTML, so adding a release is as simple as prepending a new object. In production this array would be fetched from an API or loaded from a JSON file maintained alongside the product codebase.

Timeline connector

The feed container uses a left-border pseudo-element for the vertical timeline line, and each entry has a small circle pseudo-element positioned over that line. Recent entries (isNew: true) get a filled indigo circle with a glow ring; older entries get a neutral grey. This visual encoding gives readers an immediate at-a-glance sense of recency without reading the dates.

Type badges and filter tabs

Each entry is labelled with a colour-coded type badge: purple for features, blue for improvements, green for fixes, and red for security. The filter tabs at the top toggle the activeFilter variable and re-render the list, adding a hidden class to non-matching entries. This client-side filter is fast and requires no server round-trip for a typical changelog of 20–100 entries.

Version number styling

The version string is displayed in a monospace badge with a subtle dark background, matching the convention users expect from developer-facing changelogs and making the version easy to scan or search visually.

Accessibility and extensibility

The semantic structure (h1 header, version strings, dated entries, bullet lists) is easily crawlable for SEO and screenreader-readable. Extending the snippet with anchor-linked entries (id per version), a search input, or pagination for long changelogs are all natural next steps that fit the existing structure.

Step by step

How to Use

  1. 1
    Browse the timelineScroll through the release history. The timeline dot glows for recent entries and the version badge, type, and date are immediately visible.
  2. 2
    Filter by typeClick Features, Improvements, or Fixes to show only that change type. Click All to show the full history.
  3. 3
    Add a new releasePrepend a new object to the entries array with version, type, date, title, and optionally body and items. Set isNew: true to glow the timeline dot.
  4. 4
    Add a new typeAdd a new type value (e.g. "security"), define a .type-security CSS class with the appropriate colour, and use it in entries.
  5. 5
    Load from an APIReplace the entries array with a fetch() call to your releases endpoint. Render the feed in the fetch callback, applying the same template.
  6. 6
    Export for your frameworkClick "React" for a component with entries as props and filter state in useState. Click "Vue" for a Vue 3 SFC with a computed filteredEntries.

Real-world uses

Common Use Cases

SaaS product changelog page
Publish every release as an entry in the changelog. Feature badges attract users who want to know what is new; fix badges build trust by showing that reported issues are resolved. The filter tabs let power users who only care about security fixes find them instantly without scrolling through feature announcements.
Open-source library release notes
Display your library's release history with version numbers as the primary navigation anchor. Developers searching for "when was breaking change X introduced?" scan by version and type. Pair with anchor links so #v3-4-0 URLs work in documentation and GitHub issue references.
Embedded in-app What's New panel
Mount the changelog as a slide-in panel or popover accessible from a "What's new?" bell or badge in the app header. Show only entries since the user's last login by filtering on date against the stored lastSeen timestamp, and add a dot notification badge on the bell when new entries exist.
Internal team update feed
Adapt the feed for internal product or eng team updates — sprint releases, design system changes, API deprecations. Colour-code types to engineering, design, and product, and embed the feed in your internal wiki or Notion so stakeholders can track changes without being pinged in Slack.
Email newsletter archive
Render changelog entries as a public archive of your "product updates" email newsletter. Each version maps to one issue. The filter lets subscribers browse only the feature announcements or only the fix summaries, reusing the same data that drives the email itself.
Study data-driven list rendering and filter patterns
The feed's renderFeed() + setFilter() pattern is the canonical client-side filter: filter on a state variable, re-render from the source array, toggle CSS classes for visibility. The result is a fast, dependency-free UI that handles any number of filter dimensions without re-fetching data.
Related: Encrypt Reveal Card
See the Encrypt Reveal Card for a related cards pattern worth pairing with this one.

Got questions?

Frequently Asked Questions

Replace the static entries array with a fetch() call in a DOMContentLoaded listener. Your API returns entries as JSON in the same shape. For Markdown, parse each file's frontmatter (version, type, date, title) into the object schema and the body into the body string. Store entries newest-first in the response so rendering order is correct without client-side sorting.

Add an id attribute to each entry card derived from the version string: id="v3-4-0" (replacing dots with dashes). The browser will scroll to the anchor on load. Optionally add a copy-link icon beside the version badge that writes location.origin + "#" + id to the clipboard, giving users a shareable deep link to any specific release.

Store a lastSeen ISO date in localStorage when the user closes the changelog (or on any page load). When rendering, compare each entry's date to lastSeen and set isNew accordingly. Add a badge count to the "What's new?" trigger showing how many unseen entries there are, and mark them as seen when the user opens the panel.

Accept entries as a prop (or fetch them in useEffect). Keep activeFilter in useState. Derive filteredEntries with useMemo(() => filter === "all" ? entries : entries.filter(e => e.type === filter), [entries, filter]). Map filteredEntries to JSX entry cards. The filter tabs call setFilter; the timeline dot styling applies based on entry.isNew. This pattern cleanly separates data from presentation. For the Tailwind version, click "Tailwind" to get the same markup with utility classes instead of a scoped stylesheet.