May 26, 2025

Full Text Search in The Browser Without Using Much Bandwidth

When running a big static website, you often run into the need for search. You want to allow your users to search the entire public content of your website. The higher the number of articles you've written, the bigger the need and the challenge. That has led most people to pick a service like Algolia or self-host something like Elastic Search or Typesense. These are all valid solutions. But what if we can do away with the infrastructure alltogether ? What if we can run fast and capable full text search in the browser ? Introducing Pagefind.

Pagefind is a fully static search library that aims to perform well on large sites, while using as little of your users bandwidth as possible, and without hosting any infrastructure.

Pagefind runs after Hugo, Eleventy, Jekyll, Next, Astro, SvelteKit, or any other website framework. The installation process is always the same: Pagefind only requires a folder containing the built static files of your website, so in most cases no configuration is needed to get started.

After indexing, Pagefind adds a static search bundle to your built files, which exposes a JavaScript search API that can be used anywhere on your site. Pagefind also provides a prebuilt UI that can be used with no configuration. (You can see the prebuilt UI at the top of this page.)

The goal of Pagefind is that websites with tens of thousands of pages should be searchable by someone in their browser, while consuming as little bandwidth as possible. Pagefind’s search index is split into chunks, so that searching in the browser only ever needs to load a small subset of the search index. Pagefind can run a full-text search on a 10,000 page site with a total network payload under 300kB, including the Pagefind library itself. For most sites, this will be closer to 100kB.

The Pagefind Documentation

Installation in Astro

The Pagefind docs provide a universal way to install it in any static website using any generator or framework. Here I'll provide a nicer way of installing it that integrates well with Astro.

Install:

pnpm add astro-pagefind

Add integration to the Astro config:

import pagefind from 'astro-pagefind';
import { defineConfig } from 'astro/config';
 
export default defineConfig({
	build: {
		format: 'file',
	},
	integrations: [pagefind()],
});

Add search component on a page:

---
import Search from "astro-pagefind/components/Search";
---
 
<Search id="search" className="pagefind-ui" uiOptions={{ showImages: false }} />

I didn't like the Search component that comes built-in. So I created my own using Svelte. You can read the source code here.

Results

I have been using Pagefind in this blog. And it's nothing short of incerdible. I was worried about bandwidth at first. But it only uses less than 300kb. My lighthouse score is still in the green ✅. Click on the search button in the header and try it for yourself.