@lorb/visibility-auto

3-line content-visibility: auto automation for instant rendering performance.

Install

npm install @lorb/visibility-auto

Usage

import { init } from '@lorb/visibility-auto';

// Apply to all section, article, and [data-va] elements
const cleanup = init();

// Or target specific elements
const cleanup = init({ selector: '.content-block' });

// Done. Each element gets content-visibility: auto
// with a measured contain-intrinsic-size. Offscreen
// content skips rendering entirely.

Track visibility changes:

init({
  selector: 'section',
  onChange: (el, visible) => {
    if (visible) loadHeavyContent(el);
  },
});

Why

Browsers can skip rendering offscreen content with content-visibility: auto, but it needs a manual contain-intrinsic-size per element. Nobody does this. visibility-auto measures once, applies everywhere. New elements added to the DOM are handled automatically.

How it works

• Measures each element's dimensions
• Applies content-visibility: auto and contain-intrinsic-size: auto <w>px auto <h>px
• Watches for new elements via MutationObserver
• Re-measures on window resize (debounced)
• SSR-safe -- no-op when document is undefined
• Call cleanup() to restore original styles

API

• init(options?) -- returns a cleanup function
• apply(el) -- apply to a single element
• restore(el) -- restore a single element
• restoreAll() -- restore all elements
• measure(el) -- measure an element's dimensions

License

MIT -- Lorb.studio