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.