magpyl 🐦

Lightweight, client-side search for static blogs and sites – no backend required.

magpyl is a tiny TypeScript library that adds full-text search to static sites and blogs. Designed for integration with static site generators like 11ty, it lets end users zero in on content— the way a magpie hones in on sparkle.

✨ Features

• 🧠 Smart client-side search
• 🔍 Works entirely in the browser – no backend needed
• ⚡ Fast, lightweight, and framework-agnostic
• 🧩 Easily integrates with 11ty and other static site generators
• 🔒 Built in TypeScript - modern and type-safe

📒 Documentation

Further documentation, examples, and 11ty plugins coming soon.

⬇️ Installation

pnpm add magpyl

or

yarn add magpyl

or

npm install magpyl

🔧 Usage

import { createSearch } from "magpyl";

📦 HTML Integration

<form id="search-form">
  <input type="search" id="search-input" placeholder="Search..." />
</form>
<ul id="results"></ul>

<script type="module">
  import { createSearch } from "magpyl";
  import index from "./search-index.json";

  const search = createSearch(index);
  const input = document.getElementById("search-input");
  const resultsEl = document.getElementById("results");

  input.addEventListener("input", () => {
    const results = search(input.value);
    resultsEl.innerHTML = results
      .map((r) => `<li><a href="${r.url}">${r.title}</a></li>`)
      .join("");
  });
</script>

🔦 Generating the Search Index

Generate a static JSON index of your content using your static site generator. For now, this library is especially implemented for the 11ty Framework. Future integration with other frameworks possible.

🐦 Why "magpyl"?

Magpies are famous for spotting and collecting shiny things. magpyl helps users on your site do just that — find the shiny stuff in your content that interests them the most!

📄 License

This project is licensed under the MIT License