Use Algolia Docsearch with Starlight
Starlight 0.11.0 introduces the ability to override builtin components with your own. With this change, we open up many possibilities for custom navigation, cards, sidebars, or even entirely custom themes! In this first guide, I’ll be replacing the default pagefind searchbar with Algolia Docsearch.
Docsearch is a free algolia search for developer documentation. While Starlight comes with Pagefind pre-configured, Docsearch has the additional features of an Algolia app.
This guide assumes you have both, an existing Starlight site, and a Docsearch project.
Create a custom search component
Create a new
Search.astro component. Import the CSS in the component script and define a div to contain the UI. In a script tag, import
@docsearch/js and initialise it with your project’s details. Finally, add some styles to display the button correctly in the UI.
Override the existing search component
astro.config.mjs, configure the
starlight integration to include your component. Add a
components field, containing a
Search key, mapping to the relative path to your component.
And that’s it! A working Docsearch widget in Starlight. There are more ways to extend and improve this. For example. one thing I haven’t covered here is UI translations. Docsearch does have support for translations, and it’s relatively simple to add, so if you have multi-lingual documentation, be sure to check the Docsearch translation reference.