Libby is a lightweight collection of reusable JavaScript utility functions designed to simplify common tasks like DOM manipulation, event handling, class toggling, persistence, and more. Perfect for quick prototyping or enhancing existing projects.
- 🎯 DOM Helpers: Quickly select, remove elements, check visibility, convert HTML strings.
- 🕹 Event Management: Debounce functions, dispatch/handle events, one-time listeners.
- 🎨 Class Manipulation: Add/remove/toggle classes on elements.
- 💾 Persistence: Store data in localStorage, sessionStorage, or cookies.
- 🌐 URL Utilities: Easily retrieve query parameters.
- 📡 Cross-Browser: Works in all modern browsers.
- Download libby.js
- Include in your HTML:
<script src="/path/to/libby.js"></script>const btn = _el("#myButton");
const cards = _els(".card");
_on(
btn,
"click",
_debounce(() => {
_toggleClass(cards, "active");
_dispatch(window, "cards:toggled");
}, 200),
);
// Persist data for 1 day
_persist("user_prefs", { darkMode: true }, 86400000);Select a single element.
const header = _el("header");Select multiple elements.
const items = _els(".card");Low-level selector that always returns an array.
const elements = _find("div");Remove elements from the DOM.
_remove(".temp-elements");Toggle one or more classes.
_toggleClass(modal, "active");
_toggleClass(btn, "loading", true);Add classes to elements.
_addClass(".card", "highlight");Remove classes from elements.
_removeClass(".card", ["disabled", "blurred"]);Check if an element is visible.
if (_inViewport(item, window, 100)) {
console.log("Visible!");
}Convert an HTML string to DOM elements.
const el = _parseHTML('<div class="alert">Hello</div>');Attach event listeners.
const handlers = _on(window, "resize", () => console.log("resized"));
// Later: handlers.forEach(h => h.remove());Attach a one-time listener.
_once("#start", "click", () => console.log("clicked once"));Trigger a custom event.
_dispatch(modal, "show", { id: 1 }, 500);Debounce a function.
_on(window, "scroll", _debounce(logScroll, 200));Check if element matches selector.
if (_is("#btn", ".button")) {
console.log("It's a button");
}Get query param from URL.
const ref = _getUrlParam("ref", "homepage");Store data (supports "session", "local" or timestamp in ms).
_persist("temp", { id: 42 }, "session");
_persist("cache", data, 3600000); // 1 hourRetrieve data.
const prefs = _persistGet("user_prefs");Or shorthand:
const prefs = _persist("user_prefs");const scrollArea = _el(".scroll-container");
const target = _el(".item");
_on(scrollArea, "scroll", () => {
if (_inViewport(target, scrollArea)) {
console.log("Visible!");
}
});Enable libby debug logs (Not available on .min version):
<body class="dev"></body>MIT © Rafael Oliveira. See LICENSE for full text.