Code Snippets

Copy-ready HTML, CSS and JS boilerplate: reset, meta tags, debounce, and more.

WebRuns in your browser

Search snippets

17 of 17 snippets

HTML5 page (HTML)

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Document</title>
  <meta name="description" content="">
  <link rel="icon" href="/favicon.svg" type="image/svg+xml">
  <link rel="stylesheet" href="styles.css">
</head>
<body>
  <main></main>
  <script type="module" src="main.js"></script>
</body>
</html>

Open Graph / social meta (HTML)

<meta property="og:type" content="website">
<meta property="og:title" content="">
<meta property="og:description" content="">
<meta property="og:url" content="https://">
<meta property="og:image" content="https://.../og-1200x630.png">
<meta name="twitter:card" content="summary_large_image">

Accessible form field (HTML)

<div class="field">
  <label for="email">Email</label>
  <input id="email" name="email" type="email" autocomplete="email" required aria-describedby="email-hint">
  <p id="email-hint">We'll never share your email.</p>
</div>

Native <dialog> modal (HTML)

<button type="button" onclick="document.getElementById('dlg').showModal()">Open</button>
<dialog id="dlg" aria-labelledby="dlg-title">
  <form method="dialog">
    <h2 id="dlg-title">Title</h2>
    <p>Content</p>
    <button value="cancel">Close</button>
  </form>
</dialog>

Modern CSS reset (CSS)

*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { -webkit-text-size-adjust: none; text-size-adjust: none; }
body { min-height: 100dvh; line-height: 1.5; -webkit-font-smoothing: antialiased; }
img, picture, video, canvas, svg { display: block; max-width: 100%; }
input, button, textarea, select { font: inherit; }
p, h1, h2, h3, h4, h5, h6 { overflow-wrap: break-word; }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; }
}

Center anything (grid) (CSS)

.center {
  display: grid;
  place-items: center;
}

Visually hidden (sr-only) (CSS)

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

Responsive auto-fit grid (CSS)

.grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(16rem, 100%), 1fr));
  gap: 1rem;
}

Fluid type with clamp() (CSS)

h1 { font-size: clamp(1.75rem, 1.2rem + 2.5vw, 3rem); }

Truncate to N lines (CSS)

.clamp-3 {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  overflow: hidden;
}

Light/dark theme tokens (CSS)

:root {
  color-scheme: light dark;
  --bg: light-dark(#ffffff, #0b0d10);
  --fg: light-dark(#111418, #e6e8eb);
}
body { background: var(--bg); color: var(--fg); }

debounce (JS)

function debounce(fn, ms = 200) {
  let t;
  return (...args) => {
    clearTimeout(t);
    t = setTimeout(() => fn(...args), ms);
  };
}

fetch JSON with timeout (JS)

async function getJSON(url, { timeout = 10_000, ...init } = {}) {
  const res = await fetch(url, { ...init, signal: AbortSignal.timeout(timeout) });
  if (!res.ok) throw new Error(`HTTP ${res.status} ${res.statusText}`);
  return res.json();
}

Copy to clipboard (JS)

async function copy(text) {
  try {
    await navigator.clipboard.writeText(text);
    return true;
  } catch {
    return false;
  }
}

Lazy reveal (IntersectionObserver) (JS)

const io = new IntersectionObserver((entries) => {
  for (const e of entries) {
    if (e.isIntersecting) {
      e.target.classList.add("is-visible");
      io.unobserve(e.target);
    }
  }
}, { rootMargin: "0px 0px -10% 0px" });
document.querySelectorAll("[data-reveal]").forEach((el) => io.observe(el));

Event delegation (JS)

document.addEventListener("click", (e) => {
  const btn = e.target.closest("[data-action]");
  if (!btn) return;
  switch (btn.dataset.action) {
    case "delete": /* ... */ break;
  }
});

Safe localStorage JSON (JS)

const store = {
  get(key, fallback = null) {
    try { return JSON.parse(localStorage.getItem(key)) ?? fallback; } catch { return fallback; }
  },
  set(key, value) {
    try { localStorage.setItem(key, JSON.stringify(value)); } catch { /* quota or private mode */ }
  },
};

About this tool

Search a small library of copy-ready HTML, CSS and JavaScript boilerplate, such as a page skeleton, a reset, meta tags and a debounce function, and copy what you need.

Snippets are shown as text only and never run on this page. The library is built into the page, so searching makes no request.