Hequalizer is a lightweight, zero-dependency JavaScript library that automatically equalizes the heights of DOM elements by computing the tallest element in a group and writing that measurement as a CSS custom property directly onto each element. Rather than forcing heights with inline styles, Hequalizer exposes aDocumentation Index
Fetch the complete documentation index at: https://mintlify.com/soyleninjs/hequalizer/llms.txt
Use this file to discover all available pages before exploring further.
--height variable (or any custom variable you choose) so your CSS stays fully in control of how the value is applied — as min-height, height, max-height, or anything else.
How it works
The library is built around a handle-based API: every logical group of elements that should share a height gets a unique string identifier called a handle. You mark elements in HTML with adata-hequalizer attribute whose value equals that handle, then pass the same string to the Hequalizer constructor. From that point on, Hequalizer queries those elements, waits for document.fonts.ready so web fonts are loaded and accurate measurements are available, then runs init() to calculate and apply heights.
Each instance is self-contained — you can run as many groups as you need on a single page with completely independent configuration, breakpoints, and CSS variables.
Key features
CSS Variable Height Equalization
Computes the maximum
offsetHeight across a group and sets it as a CSS custom property inline on every element. Your CSS consumes the variable however it needs to.Handle API for Independent Groups
Each
Hequalizer instance owns one handle. Multiple instances on the same page never interfere with each other, making it easy to equalize titles, descriptions, and images independently.Responsive Breakpoint Configuration
Pass a
responsive object keyed by pixel breakpoints to override any option — columns, cssVariable, debounce, observeResize — at specific viewport widths. Breakpoints are matched with window.innerWidth <=.Column-Based Grouping Modes
Set
columns: "all" to equalize the entire group at once, or set a number to equalize elements row-by-row (e.g. columns: 3 groups elements three at a time). Use columns: 1 to disable equalization entirely on narrow viewports.Automatic Resize & Content Recalculation
A
window resize listener recalculates heights on viewport change, with optional debounce. A MutationObserver on every element watches childList, subtree, and characterData changes and recalculates within 20 ms.Global CustomEvent Lifecycle System
Every stage —
init, resize, change, update, refresh, destroy — dispatches a CustomEvent on window in the format hequalizer:{handle}:{name}, with the live instance available at event.detail.instance.Static Instance Registry
All active instances are stored in a static
Map. Call Hequalizer.getInstance('your-handle') anywhere in your code to retrieve an instance without holding a reference yourself.Zero Dependencies
Hequalizer ships as a single vanilla JavaScript file with no runtime dependencies. Include one script tag and the
window.Hequalizer class is immediately available.Browser requirements
Hequalizer relies on modern browser APIs that are broadly available in all evergreen browsers. The following features must be supported:- CSS Custom Properties — used to write the computed height variable onto elements
MutationObserver— used to watch for content changes inside observed elementsCustomEvent— used to emit lifecycle events onwindowdocument.fonts.ready— used to deferinit()until web fonts have loaded- ES6 classes, static fields, and class field syntax — the library is written as a native ES6 class with static properties
Ready to install?
Choose the delivery method that fits your project — npm, CDN script tag, or a direct file download. No build step or bundler configuration is needed.Install Hequalizer
Add Hequalizer to your project via npm, CDN, or direct download — no build step required.