v1.5 • Data • 7kb gzipped • MIT
HeatGrid
Canvas heatmaps for dense matrices, with colour scales that survive an accessibility review.
// why heatgrid
Colour that carries meaning
Ships perceptually uniform scales and checks them against colour-vision deficiency simulations before you ship a dashboard.
// stack
Dense by design
Renders a quarter of a million cells without dropping a frame, because every cell is a rectangle and nothing is a DOM node.
HeatGrid started as a single file in a client project and stayed small on purpose. It does one job, it does it in 7kb gzipped, and it has no runtime dependencies.
Getting started
Install it, import it, call it:
npm i heatgrid-jsShips perceptually uniform scales and checks them against colour-vision deficiency simulations before you ship a dashboard.
What it does not do
It does not manage your state, style your components or ship a plugin system. Those are your decisions, and keeping them out is what keeps the bundle honest.
- Perceptual colour scales
- Cell-level hit testing
- MIT licensed, commercially friendly
Features
Perceptual colour scales
Uniform in lightness, so a step in value looks like a step in colour.
Cell-level hit testing
Hover and focus resolve to the exact cell without a spatial index you have to maintain.
Six themes
Token-driven, so bringing your own palette is a single object.
ESM and types
Ships module and CommonJS builds with hand-written type definitions and source maps.
Off the main thread
Heavy work moves to a worker automatically when one is available.
Accessible output
Every visual is paired with a text alternative that reflects the same data.
Get HeatGrid v1.5
9 files • .min.js 7kb • .zip 30kb • sha384 verified
Changelog
- Two new perceptual scales
- Hit testing rewritten as direct arithmetic
- Legend renders on the same canvas
- Safari 16 compatibility fixes
- Bundle size reduced by eleven percent
- Improved error messages for invalid options
- Added twenty regression tests
// related
Related products
ChartForge
Canvas charts in twelve lines. Responsive, accessible and dark-mode ready, with no D3 learning curve.
View →MotionEase
Physics-based micro-animations with a single call. Spring curves that feel right without a tuning session.
View →FormFlow
Validation and multi-step logic that works the same in React, Vue and vanilla. Your markup stays yours.
View →Ship the dashboard today.
MIT licensed. Commercial friendly. Five-minute setup.