StaticSearch

StaticSearch is a fast, modern client-side search engine you can add to any static site -- try it at StaticSearch.com.

You can add search to your site in five minutes:

1. Index your HTML pages to create the StaticSearch JavaScript and JSON data files. (Repeat this step every time your content changes.)

2. Add search functionality to your pages.

3. Test and deploy to production.

StaticSearch benefits

• zero backend and serverless: no database, no maintenance, no security problems, no hassle.

• fast zero configuration indexing: StaticSearch understands your HTML pages. It indexes sites in seconds without you having to mark or programmatically add content.

• fast fuzzy search: users get instant results even on sites with thousands of pages.

• minimal payload: requires no more than 12Kb of CSS/JavaScript, incrementally loads and caches index data on demand, and offers superior performance even on phones and slower devices.

• multi-lingual: handles stemming, stop-word filtering, and character normalization in 27 languages -- or you can add your own.

• framework agnostic: StaticSearch works with all HTML Static Site Generators and client-side JavaScript libraries.

• minimal developer overhead: integrates into any build process with a single command.

• custom search configuration: optionally change search criteria, HTML templates, CSS styles, and JavaScript functionality.

• standards compliant: adheres with strict Content Security Policies, robots.txt, robots meta tags, JSON data, JavaScript modules, and Web Components. Progressive enhancement permits search functionality even when JavaScript fails.

• open source: use, inspect, extend, alter, and sponsor the project.

Documentation

• Full documentation at StaticSearch.com

• View the CHANGELOG for updates

• StaticSearch Github repository

• StaticSearch on npm

Please sponsor StaticSearch development if you find it useful.

Index your site

The StaticSearch indexer requires Node.js 22 or above and works on Windows, Linux, or macOS. You do not need to install StaticSearch but can add it globally or to any Node.js project.

From the command line, cd to the root of your website directory and enter:

npx staticsearch ./

StaticSearch creates a new sub-directory named search with the client-side index data and code that you can add to pages.

Indexer help

You can configure the indexer to change file and word processing options.

View the CLI options:

npx staticsearch --help

View environment variable options:

npx staticsearch --helpenv

View Node.js API options:

npx staticsearch --helpapi

Add search functionality to your site

Add the following tag to your pages or templates where you want a search icon to appear (typically, in your page <header>):

<script type="module" src="/search/staticsearch-here.js"></script>

You can style the SVG icon with CSS, e.g.

static-search::part(activate) {
  inline-size: 2em;
  block-size: auto;
}

Rebuild the site if you're using a Static Site Generator such as Publican. Deploy or test the site locally using a tool such as LiveLocalhost.

Advanced search configuration

StaticSearch provides four ways to add search to your site:

1. StaticSearch script

   The simplest option adds search functionality with a single <script> as shown above.

2. StaticSearch Web Component

   A fully-configurable Web Component that offers search options, custom templates, and styling.

3. StaticSearch bind module

   Attach custom search functionality to any HTML <input> and result elements.

4. StaticSearch JavaScript search API

   Create your own custom search functionality using the client-side API.