Implementing Local Search in a Markdown Knowledge Base (Without JavaScript Frameworks)

#markdown #javascript #webdev #programming

Want to add a fast, client-side search feature to your Markdown-based knowledge base without pulling in a heavy JavaScript framework? This guide shows you how to do just that using a lightweight JSON index and vanilla JS.

Step 1: Create a Search Index

Start by generating a search.json file that contains metadata about each Markdown file.

Example:

[
  {
    "title": "Getting Started",
    "path": "docs/getting-started.md",
    "content": "This guide helps you get started using the Markdown knowledge base..."
  },
  {
    "title": "Usage Tips",
    "path": "docs/usage.md",
    "content": "Learn how to use and structure your Markdown content effectively..."
  }
]

You can generate this JSON manually or write a script to crawl your .md files and extract the first few hundred characters of content.

Step 2: Add a Search Input in HTML

Include a search input and container for results in your layout:

<input type="text" id="search" placeholder="Search docs..." class="border p-2 w-full mt-4">
<ul id="results" class="mt-4 space-y-2"></ul>

Step 3: Load and Search the Index with Vanilla JS

Use JavaScript to fetch the index and filter results as the user types:

let docs = [];

fetch('search.json')
  .then(res => res.json())
  .then(data => docs = data);

document.getElementById('search').addEventListener('input', function (e) {
  const query = e.target.value.toLowerCase();
  const results = docs.filter(doc =>
    doc.title.toLowerCase().includes(query) ||
    doc.content.toLowerCase().includes(query)
  );

  const resultsEl = document.getElementById('results');
  resultsEl.innerHTML = results.map(doc =>
    `<li><a href="${doc.path}" class="text-blue-600 hover:underline">${doc.title}</a></li>`
  ).join('');
});

This keeps the user experience fast and reactive — with zero dependencies.

✅ Pros and ❌ Cons of This Approach

✅ Pros:

🪶 Lightweight and framework-free
🔍 Instant client-side search
📦 No external libraries required
🧱 Simple to extend with tags or fuzzy matching

❌ Cons:

⚠️ Large knowledge bases may require pagination
📁 You'll need to regenerate search.json when content changes
🔐 No advanced ranking or typo-tolerance unless manually added

Summary

Adding search to your Markdown knowledge base doesn't require React, Vue, or any other framework. A simple JSON index and a few lines of vanilla JavaScript can give users fast, useful results. This approach keeps your project clean, fast, and easy to maintain.

📘 Want to go further?

My 20-page PDF guide Creating a Flexible Markdown Knowledge System teaches you how to: