SearchJetEngine
Vanilla JS Site Search

Add Search to Any Static Site — No Framework Required

One CDN script tag. Zero build step. Zero backend. If you can write an <input>, you can ship search.

The CDN Experience, Live

This is the exact behaviour your static site gets from the script tag below.

Static Sites Deserve Good Search Too

One <script> tag

Drop the CDN script into any page. No npm, no bundler, no framework. Works on GitHub Pages, Netlify, WordPress, or a plain HTML file.

No key exposed, no CORS pain

Call through a tiny proxy route (or serverless function) and your API key never leaves the server. Same endpoint as the SDK.

Typo-tolerant & edge-cached

Sub-second, typo-tolerant results served from the CDN edge. Static sites get the same search UX as app stores.

Copy-Paste: One HTML File

Save as search.html and open it. That's it.

search.html
<!DOCTYPE html>
<html lang="en">
<head>
  <!-- 1. One CDN tag — that's the whole install -->
  <script src="https://cdn.searchjet.io/connect/v1/searchjet.min.js"></script>
</head>
<body>
  <input id="q" placeholder="Search this site…" />
  <ul id="results"></ul>

  <script>
    // 2. Initialize the client
    const searchjet = new SearchJet({
      apiKey: 'your_search_api_key',
      indexName: 'my_site'
    });

    // 3. Debounce (no library needed)
    let timer;
    const box = document.getElementById('q');
    box.addEventListener('input', (e) => {
      clearTimeout(timer);
      timer = setTimeout(async () => {
        const { results } = await searchjet.search(e.target.value);

        // 4. Render results — plain DOM, zero dependencies
        document.getElementById('results').innerHTML =
          results.map(h => `<li><a href="${h.url}">${h.title}</a></li>`).join('');
      }, 200);
    });
  </script>
</body>
</html>

Keep the key server-side (production)

api/search.js
// // PROTECT YOUR KEY — tiny proxy (Vercel / Netlify function)
// // Browser only ever calls YOUR domain. Add CORS headers here.
export default async function handler(req, res) {
  const q = req.query.q;
  if (!q) return res.status(400).json({ error: 'q required' });

  const data = await fetch(
    `https://app.searchjetengine.com/api/v1/search?q=${encodeURIComponent(q)}&limit=8`,
    {
      headers: {
        // Server-side key — never shipped to the browser
        Authorization: `Bearer ${process.env.SEARCHJET_API_KEY}`,
      },
    }
  ).then((r) => r.json());

  res.setHeader('Access-Control-Allow-Origin', '*');
  res.json(data.results);
}

The SearchJet API answers browser calls directly (public search keys), but proxying keeps your key out of the bundle and gives you audit logs.

Frequently Asked Questions

Can I add search to a plain HTML file?
Yes. Include the CDN script, create the SearchJet client, and wire an input listener. No framework or build tooling required — the code example below works in a single .html file.
Will I hit CORS errors calling the SearchJet API from the browser?
The SearchJet API allows browser requests with the public search key. For production sites we recommend proxying through a tiny route so the key stays server-side — the example below includes both approaches.
How do I debounce input without a library?
Use a setTimeout/clearTimeout wrapper (included below). It is about five lines of plain JavaScript.
Do I need a backend for vanilla JS search?
No. SearchJet hosts the search engine and index. Your static site only needs to make a fetch call. Most static hosts (GitHub Pages, Netlify, Cloudflare Pages) support serverless functions for key protection.
Does it support search-as-you-type?
Yes — combine the API with an input debounce and render suggestions on every keystroke, exactly like the demo on this page.

Search Your Static Site. Ship It Today.

Free forever plan — 10,000 searches/month, no credit card.

More Search Recipes