Setup & Configuration
Changelog Pro displays product updates and release notes in a clean, filterable layout. Add entries via the repeater field in the Content tab, then customize every visual detail from the Style tab.
Adding Entries
Each entry has a date, optional version label, category tag (New, Improved, Fixed, Removed, or custom text), title, and expandable rich text description. The description supports full HTML including lists, code blocks, and links. Entries display in the order you arrange them in the repeater.
Category Tags
Five built-in categories with independent color controls: New (green), Improved (blue), Fixed (orange), Removed (red), and Custom (purple). Select "Custom" to enter any label you want. Each category gets its own background and text color fields in the Style tab.
Date Formats
Four options: short (Mar 15, 2026), long (March 15, 2026), numeric (03/15/2026), and relative (2 days ago). The date field is plain text so you control the input format.
Layout Modes
Timeline
Vertical connector line with circular dots marking each entry. Date and version display in a fixed-width column on the left, with the entry title and expandable description on the right. Dot size, line width, and line color are all configurable. On mobile, the meta stacks above the content.
Cards
Each entry renders as a separate card with its own background, border, border radius, and shadow. Cards have configurable gap between them and optional shadow on hover for an elevated interaction feel. Best for changelogs where each update deserves visual prominence.
Compact
Minimal layout with entries separated by thin divider lines. No card containers, no shadows. Tighter vertical padding. Best for high-density changelogs where you want to show many entries without visual bulk.
Search & Filtering
Search filters entries by title and version number with 200ms debounce. Category filter pills show only the categories present in your entries. Both can be toggled independently. When no entries match, an empty state message appears.
Load More Pagination
Set the initial number of visible entries (3 to 50). A Load More button reveals the next batch. Set to 0 to show all entries without pagination. Pagination respects active filters.
Style System
Every visual property is controlled from the Style tab. 31 color fields, 2 Google Font pickers, 8 font size controls, card/entry styling, toolbar styling, badge styling, spacing, and responsive breakpoints. Nothing is hardcoded.
- Container: max-width and horizontal padding. Section background spans full width, content is centered.
- Colors: section bg, card bg, heading, subheading, title, description, date, version, timeline, search input (bg, text, border, placeholder), filter pills (default + active), category badges (5 pairs of bg + text), Load More button, CTA link.
- Typography: heading and body Google Font pickers with theme inheritance. Separate size controls for heading, subheading, title, description, date, version, badge, and search.
- Entry: border radius, padding, gap between entries, border color, shadow (4 levels), hover shadow, timeline width, timeline dot size.
- Toolbar: search input radius and padding, filter pill radius, padding, and gap.
- Badge: radius and padding for category badges.
- Spacing: section padding top/bottom, heading margin, toolbar margin.
- Responsive: configurable tablet and mobile breakpoints.
Technical Details
- Zero dependencies: vanilla JavaScript, no jQuery or external libraries
- Instance isolation: all CSS scoped with
changelog-pro-docs, multiple modules per page with zero conflicts
- Accessible:
aria-expanded on accordion toggles, role="tablist" and role="tab" on filter pills, aria-label on search input
- GPU-optimized: transitions use transform and opacity only, with will-change hints for smooth animations
- Any template: works on website pages, landing pages, blog listings, and blog posts. No theme required.