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

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: 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 => `${doc.title}` ).join(''); }); This keeps the user experience fast and reactive — with zero dependencies. ✅ Pros and ❌ Cons of This Approach ✅ Pros:

May 6, 2025 - 14:59

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

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:

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 =>
    `${doc.title}`
  ).join('');
});

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

✅ Pros and ❌ Cons of This Approach

✅ Pros: