DOM

The collection of imperative browser helpers almost every front-end app ends up writing by hand. Flat function exports, zero runtime dependencies, framework-agnostic. Drop it into React, Vue, Svelte, Astro, or vanilla JS — they all consume the same API.

Highlighted features

Page metadata, one call

setPageMeta({…}) fans out into title, description, image, OG/Twitter, canonical, theme color — every <head> tag at once.

Font + stylesheet injection

googleFont(url, id), styleSheet(href, id), loadFont(family, …) — id-based so you can swap themes later.

CSS variables

cssVariable(“—color-primary”, “#0a84ff”), getCssVariable(“—gap”) — read/write CSS custom properties on :root or a given element.

Viewport + keyboard

One-liners around window.outerWidth, window.screen.width, etc. pressed(event, ESC_KEY) normalises legacy keyCode handling.

Install

npm install @mongez/dom

yarn add @mongez/dom

pnpm add @mongez/dom

Zero runtime dependencies. Browser-only — server use throws (see Environment below).

Quick peek

import { setPageMeta, googleFont, cssVariable, scrollTo } from "@mongez/dom";

setPageMeta({
  title: "Product Page",
  description: "Buy widget X today.",
  image: "https://cdn.example.com/product.png",
  url: "https://example.com/product",
  type: "website",
});

googleFont("https://fonts.googleapis.com/css2?family=Inter", "primary-font");
cssVariable("--color-primary", "#0a84ff");
scrollTo("#section-features");

Page metadata, fonts, CSS variables, smooth-scroll — all in one import.

Environment

Every helper touches document, window, or FontFace. Calling on the server throws. If your module loads in both environments, guard:

function syncTitle(t: string) {
  if (typeof window !== "undefined") setTitle(t);
}

In React, prefer client-only effects:

useEffect(() => setTitle(props.title), [props.title]);

Scope boundaries

Concern	Lives in	Why
React hooks / declarative metadata	`@mongez/react-helmet`	This package is framework-agnostic
Persistent storage (localStorage / cookies)	`@mongez/cache`	Different concern
Routing	`@mongez/react-router`	Different concern

Idioms

Call setPageMeta once per page-view. It fans out into the seven setter helpers internally. Cheap to repeat — each setter short-circuits when the value matches the last seen value.
Use ids with styleSheet and googleFont for any link you might want to replace later (theme switcher, A/B framework swap). Without an id you can’t find the link again.
No event subscriptions. Helpers here are fire-and-forget. If you need to react to attribute changes, use a MutationObserver directly.

Where to go next

Metadata — setPageMeta, title/description/image setters, OG/Twitter
Head elements — createHeadElement, meta, metaLink, custom tags
Assets — styleSheet, googleFont, loadFont, loadScript
Interactions — viewport, keyboard, scroll, dark-mode detection
Recipes — common patterns