Creating a Minimalist Pure JavaScript Toast Notification Library (autolog.js)

Introduction: The author needed a lightweight toast notification solution for an internal demo without third‑party UI libraries, and decided to create a tiny, pure‑JavaScript toast plugin.

Pure JS Implementation: Following the tradition of autofit.js, the library (autolog.js) consists of a minimal JavaScript file and a small CSS block, together gzipping to about 1.4 KB. The full source code is shown below.

const cssStr = `#autolog{display:flex;flex-direction:column;align-items:center;justify-content:flex-start;pointer-events:none;width:100vw;height:100vh;position:fixed;left:0;top:0;z-index:9999999;cursor:pointer;transition:0.2s}#autolog span{pointer-events:auto;width:max-content;animation:fadein 0.4s;animation-delay:0s;border-radius:6px;padding:10px 20px;box-shadow:0 0 10px 6px rgba(0,0,0,0.1);margin:4px;transition:0.2s;z-index:9999999;font-size:14px;display:flex;align-items:center;justify-content:center;gap:4px;height:max-content}.autolog-warn{background-color:#fffaec;color:#e29505}.autolog-error{background-color:#fde7e7;color:#d93025}.autolog-info{background-color:#e6f7ff;color:#0e6eb8}.autolog-success{background-color:#e9f7e7;color:#1a9e2c}.autolog-{background-color:#fafafa;color:#333}@keyframes fadein{0%{opacity:0;transform:translateY(-10px)}100%{opacity:1;transform:translateY(0)}}`;
const svgIcons = {
  warn: `
`,
  error: `
`,
  info: `
`,
  success: `
`
};
const autolog = {
  log(text, type = "", time = 2500) {
    if (typeof type === "number") {
      time = type;
      type = "";
    }
    let mainEl = getMainElement();
    let el = document.createElement("span");
    el.className = `autolog-${${type}}`;
    el.innerHTML = svgIcons[type] + text;
    mainEl.appendChild(el);
    setTimeout(() => {
      el.classList.add("hide");
    }, time - 500);
    setTimeout(() => {
      mainEl.removeChild(el);
      el = null;
    }, time);
  }
};
function getMainElement() {
  let mainEl = document.querySelector("#autolog");
  if (!mainEl) {
    mainEl = document.createElement("div");
    mainEl.id = "autolog";
    document.body.appendChild(mainEl);
    let style = document.createElement("style");
    style.innerHTML = cssStr;
    document.head.insertBefore(style, document.head.firstChild);
  }
  return mainEl;
}
export default autolog;

The library exports only a log method; calling it requires at least the message text.

Key implementation points:

It determines which optional argument (type or time) was supplied, allowing callers to pass either.

getMainElement creates a container on demand, eliminating the need for a separate initialization step.

A span element is created to display the toast content.

Two timers manage the fade‑out animation and eventual removal of the element, clearing references to avoid memory leaks.

The CSS carries the visual logic, defining layout, colors for different toast types (warn, error, info, success), and the fade‑in animation.

Installation and Usage: Install via npm i autolog.js . Since version 2.0.0 the CSS is bundled inside the JS, so no separate stylesheet is required.

import autolog from "autolog.js";

autolog.log("Hi, this is a normal tip");
autolog.log("Hello World", "success", 2500); // "success" and 2500 are optional

Repository links: GitHub and npm . An online demo is available at the provided URL.

Online demo: https://larryzhu-dev.github.io/autoLarryPages/autolog.js