v1.1 • UI • 3kb gzipped • MIT
LazyPane
Tabs and accordions that load their contents on first reveal and stay keyboard-correct.
// why lazypane
Deferred, not hidden
Panels are not rendered until they are first opened, so a twelve-tab interface costs one tab on load.
// stack
One behaviour, two shapes
Tabs and accordions share a state machine and differ only in ARIA roles and layout.
LazyPane started as a single file in a client project and stayed small on purpose. It does one job, it does it in 3kb gzipped, and it has no runtime dependencies.
Getting started
Install it, import it, call it:
npm i lazypane-jsPanels are not rendered until they are first opened, so a twelve-tab interface costs one tab on load.
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.
- First-reveal loading
- Deep linking
- MIT licensed, commercially friendly
Features
First-reveal loading
Panel content mounts the first time it becomes visible and stays mounted after.
Deep linking
The open panel is reflected in the URL fragment and restored on load.
ESM and types
Ships module and CommonJS builds with hand-written type definitions and source maps.
Styling stays yours
LazyPane sets no colours and no spacing. Every visual decision belongs to your design system.
Dark mode ready
Reads from CSS custom properties, so a theme switch needs no JavaScript at all.
Container aware
Adapts to the box it is given rather than the viewport, so it works in a sidebar.
Get LazyPane v1.1
8 files • .min.js 3kb • .zip 43kb • sha384 verified
Changelog
- Deep linking to open panels
- Accordion multi-open mode
- Roving tabindex for tab lists
- Reworked the public API for consistency
- Deprecated helpers removed
- Fixed a memory leak on repeated teardown
- Source maps now published with every build
// 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 interface today.
MIT licensed. Commercial friendly. Five-minute setup.