🧰 frontit

Browser primitives for the states and values the platform keeps to itself.

You won't need these often. But when you do, you end up writing them yourself — and they are fiddlier than they look. Frontit is that code, written once.

npm install frontit

import { createScrollState, toPx } from 'frontit';

const scroll = createScrollState();

scroll.subscribe((state) => {
  if (state.isTouchScrolling) {
    // Still mid-gesture, momentum and all. Hold off on expensive work.
  }
});

toPx(100, 'dvh');                      // 834.31
toPx({ unit: 'cqw', context: panel }); // resolved inside that container
toPx({ value: 50, unit: '%', property: 'width', context: panel });
toPx();                                // every unit this browser resolves, in pixels

Zero dependencies. ESM only. Node 20+. Nothing throws where there is no DOM.

📦 What this package is

The umbrella. It re-exports everything from @frontit/core, so you never have to think about which package a tool lives in.

| Export | What it does | | :--- | :--- | | createScrollState | Tracks touching, scrolling, touch-scrolling and momentum as four separate states — because they genuinely differ. | | toPx | Resolves a CSS unit to pixels — lvh, ch, cqw, % — anywhere in the page, or everything at once. | | disposeToPx | Clears the measurement elements. Test teardown. |

📚 Documentation

The full API reference lives in @frontit/core — the state table, every option, and the iOS behaviour worth knowing about.

The Inspector is the fastest way to see what any of it does. Open it on a phone.

🤝 License

MIT © restarea92