Configuring the Pagefind search in the browser

The behaviour of the Pagefind search API can be configured in the browser.

#Configuring via Pagefind UI

If using the Pagefind UI, the options object will be passed through to Pagefind:

new PagefindUI({
    element: "#search",
    baseUrl: "/",
    // ... more search options
});

#Configuring via the Pagefind API

If interfacing with Pagefind directly, options can be passed via awaiting pagefind.options():

const pagefind = await import("/pagefind/pagefind.js");
await pagefind.options({
    baseUrl: "/",
    // ... more search options
});

#Available options

#Base URL

{
    "baseUrl": "/docs/"
}

Defaults to “/”. If hosting a site on a subpath, baseUrl can be provided, and will be appended to the front of all search result URLs.

#Bundle path

{
    "bundlePath": "/subpath/pagefind/"
}

Overrides the bundle directory. In most cases this should be automatically detected by the import URL. Set this if search isn’t working and you are seeing a console warning that this path could not be detected.

#Excerpt length

{
    "excerptLength": 15
}

Set the maximum length for generated excerpts. Defaults to 30.

#Highlight query parameter

{
    "highlightParam": "highlight"
}

If set, Pagefind will add the search term as a query parameter under the same name.

If using the Pagefind highlight script, make sure this is configured to match.

#Ranking

See customize ranking

#Index weight

See multisite search > weighting

#Merge filter

See multisite search > filtering

#Disable web worker

{
    "noWorker": true
}

Defaults to false. If set to true, forces Pagefind to run all search operations on the main thread instead of using a web worker.

By default, Pagefind will attempt to use a web worker for search operations when available, which helps keep the main thread responsive during searches. If web workers are not supported or fail to initialize, Pagefind will automatically fall back to running on the main thread.