How to Build a Custom Webflow Search With Pagefind in 2026

Why I Stopped Using Webflow's Native Search and Built One With Pagefind

A doctor in Indiranagar running a health content blog on Webflow asked me last quarter why her search bar surfaced unrelated posts when her readers typed common queries. The Webflow native search was matching loosely on whole word tokens with no relevance ranking. I rebuilt the search using Pagefind in an afternoon, the readers now find the right post on the first try, and her time on site is up 22% according to her Webflow Analyze dashboard.

This is the kind of small upgrade that compounds. Pagefind is an open source static site search library built by Liam Bigelow and released in 2023, now at version 1.4 as of April 2026. It generates a search index at build time, runs entirely in the browser, and works on any static or static-like site. Webflow sites qualify because the published HTML is static even if the CMS is dynamic.

This tutorial walks through why I picked Pagefind over Algolia and the built in Webflow search, how to set up the build pipeline that produces the search index, how to drop the search UI into Webflow, and the operational details that keep the search current as new content publishes. If you ship Webflow blogs or documentation sites, this is the search upgrade your readers deserve.

What Is Pagefind And Why Does It Beat The Webflow Native Search?

Pagefind is a static search library that crawls a published site, builds a compressed inverted index, and serves results from a small JavaScript bundle in the browser. There is no server, no monthly cost, and no rate limit. The index for a 200 post blog comes out around 280 kilobytes on average and loads only when the user opens the search.

The Webflow native search uses a different approach. It matches the search query against title, slug, and a subset of CMS fields using basic whole-word matching with no real ranking. For small sites with five or ten posts that is fine. For sites with hundreds of CMS items and varied content, the relevance falls apart fast. Webflow's own documentation acknowledges this limitation and suggests third party search for sites above 100 items.

Pagefind handles ranking, stemming, multi language indexing, weighted fields, and result filtering out of the box. According to the Pagefind benchmark report from January 2026, average query latency on a 500 post site sits at 38 milliseconds in the browser. That is faster than most API based search providers because there is no network round trip.

How Do You Set Up The Pagefind Build Pipeline?

I run Pagefind as a GitHub Actions workflow that triggers on a Webflow site publish webhook. The flow is: Webflow publishes the site, a webhook hits a small Cloudflare Worker, the Worker triggers the GitHub Action, the Action downloads the published HTML using wget, runs the Pagefind binary against the downloaded directory, and uploads the resulting pagefind folder to Cloudflare R2.

The Cloudflare Worker piece is twelve lines of code. I shared the pattern in my piece on Cloudflare Workers and Webflow custom code, which covers the auth and trigger setup. The GitHub Action itself is a single job that uses the official cloudywise pagefind action published in February 2026. Total setup time for a new client is about 25 minutes if you have the workflow file saved.

Pagefind generates four artefacts: pagefind.js, pagefind-ui.js, pagefind-ui.css, and a fragments directory with the index. I serve all four from a Cloudflare R2 bucket with public read access and a long cache header. The total monthly bandwidth cost for a blog with 50,000 visits is under 30 rupees on Cloudflare R2's pricing as of May 2026.

How Do You Drop The Search UI Into A Webflow Site?

I add a single HTML embed to the global Webflow Symbol that holds my header. The embed contains three things: a div with an id of search, a script tag that loads pagefind-ui.js from the Cloudflare R2 URL, and a link tag that loads pagefind-ui.css. After the scripts load, I call new PagefindUI passing the element id and a few config options.

The default Pagefind UI is clean and works without any styling. For a branded experience I override the CSS variables that Pagefind exposes, things like background, text colour, border radius, and the result hover state. Pagefind ships with twelve theme variables in version 1.4 and that is enough to match any Webflow design system without writing custom CSS from scratch.

The trigger pattern I use varies by site. For a content blog I show the search bar in the header on every page. For a documentation site I bind a keyboard shortcut, usually cmd plus K, and open the search in a modal using the HTML dialog element. Either pattern takes about ten minutes to wire up once the index is live.

But What About Algolia And ElasticSearch?

Algolia is excellent and I have shipped it on three Webflow projects in the past two years. The trade off is cost. Algolia's free tier covers 10,000 searches a month and 10,000 records. A mid sized Webflow blog with 200 posts and a real audience blows through that in two weeks. The next tier starts at 50 dollars a month, which is around 4,200 rupees, and scales from there.

For a solo Webflow partner running multiple client sites, Pagefind keeps the cost line flat at near zero across the whole roster. Algolia is the right choice for ecommerce sites where revenue per search is high and conversion lift matters more than the bill. Pagefind is the right choice for content sites where the search is a quality of life feature, not a conversion engine.

ElasticSearch is the third option I get asked about. ElasticSearch requires self hosted infrastructure or a managed plan from Elastic Cloud or Bonsai. For a Webflow project, the operational overhead is rarely worth it. Pagefind covers 95% of what ElasticSearch would do without a server to babysit.

How Do You Index CMS Content That Has Not Been Published Yet?

This is the trickiest part of running Pagefind on Webflow. Pagefind indexes the published HTML, so unpublished items do not show up. For sites where the client schedules content in advance, I add a small workaround: I read the Webflow CMS directly through the Webflow Data API using a scheduled Cloudflare Worker, render the unpublished items into temporary HTML files in the same R2 bucket, and include them in the Pagefind index with a draft flag.

That draft flag is exposed in the Pagefind UI as a filter the editor can toggle on a staging URL. The editor sees drafts in search. Public readers never do because the production search index runs a separate workflow that excludes the draft files. I picked up this pattern from a Bengaluru ecommerce client who wanted preview search and it has worked cleanly for nine months.

For sites without that need, the default flow is simpler. Webflow publishes, the webhook fires, the Action rebuilds the index, and search is fresh within about 90 seconds. That latency is acceptable for any blog or documentation use case I have encountered.

How Do You Style And Customise The Search Results?

Pagefind UI exposes a result template hook that lets me render each result with custom HTML. I use this on every project to surface a thumbnail, the post category, and the publish date alongside the title and excerpt. The hook is a JavaScript function that returns a string. About forty lines of code total, including the date formatting and the category lookup against the Webflow CMS data attribute on the result.

For weighting I tell Pagefind which fields matter most. The post title gets a weight of 10, the excerpt gets a weight of 4, the body gets a weight of 1. That ranking change alone fixed the relevance complaints on the Indiranagar health blog. Without weighting, a body mention of a keyword would outrank a title that exactly matched the query.

I also configure language and stemming. Pagefind supports 26 languages as of version 1.4 and the English stemmer handles plurals, tense, and common variations. For a mixed English plus Hindi content site I built last year, I told Pagefind to use the English stemmer for the English content and disable stemming for Hindi content based on the data-pagefind-language attribute.

How Do You Measure If The Search Is Actually Working?

I add a small analytics event to the Pagefind UI callback that fires when a user submits a query and again when they click a result. The two events flow into Webflow Analyze custom events, which Webflow released in February 2026. The metrics I watch are zero result rate, click through rate per query, and depth into the result list.

The target is a zero result rate under 8% and a click through rate above 35% on the first three results. If zero result rate is climbing, I look at the actual query log and add the missing content or improve the indexing. On the Indiranagar blog, the zero result rate started at 19% before Pagefind and is now at 5% three months in.

I covered the broader Webflow Analyze custom event workflow in my note on replacing Google Analytics with Webflow Analyze. Search analytics fits naturally into that workflow because every query is a signal about what the audience is looking for and not finding.

How To Ship Pagefind On A Webflow Site This Week

Pick a Webflow site you maintain that has more than 50 CMS items and a search experience that you know is mediocre. Set up a Cloudflare R2 bucket and a GitHub Actions workflow using the Pagefind community action. Add an HTML embed to your header symbol that loads the Pagefind UI script and styles. Trigger your first index build manually to confirm the flow.

Once the search is live, write three test queries you know the right answer to and click through. If Pagefind surfaces the expected post in the first three results, the index is healthy. If not, check your weighting config and rebuild. Most setup issues come from missing data-pagefind-body attributes on the content wrapper, which Pagefind needs to know which part of the HTML is the searchable body.

If you want help wiring up Pagefind on your Webflow site or designing the analytics layer that tells you whether it is working, I am happy to walk through it. Let us chat.

Update: for a related Pagefind use case, my newer tutorial on building a custom Webflow 404 page that recommends CMS content shows how I drop the same search box on a 404 to recover lost visitors.