Skip to main content
Starlight

Search documentation

Type to search this documentation.

On this pageOverview

Site Search

By default, Starlight sites include full-text search powered by Pagefind, which is a fast and low-bandwidth search tool for static sites.

No configuration is required to enable search. Build and deploy your site, then use the search bar in the site header to find content.

Hide content in search results

Section titled “Hide content in search results”

Exclude a page

Section titled “Exclude a page”

To exclude a page from your search index, add pagefind: false to the page’s frontmatter:

src/content/docs/not-indexed.md
---
title: Content to hide from search
pagefind: false
---

Exclude part of a page

Section titled “Exclude part of a page”

Pagefind will ignore content inside an element with the data-pagefind-ignore attribute.

In the following example, the first paragraph will display in search results, but the contents of the <div> will not:

src/content/docs/partially-indexed.md
---
title: Partially indexed page
---

This text will be discoverable via search.

<div data-pagefind-ignore>

This text will be hidden from search.

</div>

Alternative search providers

Section titled “Alternative search providers”

Algolia DocSearch

Section titled “Algolia DocSearch”

If you have access to Algolia’s DocSearch program and want to use it instead of Pagefind, you can use the official Starlight DocSearch plugin.

  1. Install @astrojs/starlight-docsearch:

    Shell
    npm install @astrojs/starlight-docsearch
    Shell
    pnpm add @astrojs/starlight-docsearch
    Shell
    yarn add @astrojs/starlight-docsearch

  2. Add DocSearch to your Starlight plugins config in astro.config.mjs and pass it your Algolia appId, apiKey, and indexName:

    JavaScript
    // astro.config.mjs
import { defineConfig } from 'astro/config';
import starlight from '@astrojs/starlight';
import starlightDocSearch from '@astrojs/starlight-docsearch';

export default defineConfig({
	integrations: [
		starlight({
			title: 'Site with DocSearch',
			plugins: [
				starlightDocSearch({
					appId: 'YOUR_APP_ID',
					apiKey: 'YOUR_SEARCH_API_KEY',
					indexName: 'YOUR_INDEX_NAME',
				}),
			],
		}),
	],
});

With this updated configuration, the search bar on your site will now open an Algolia modal instead of the default search modal.

DocSearch configuration

Section titled “DocSearch configuration”

The Starlight DocSearch plugin supports customizing the DocSearch component with the following inline options:

  • maxResultsPerGroup: Limit the number of results displayed for each search group. Default is 5.
  • disableUserPersonalization: Prevent DocSearch from saving a user’s recent searches and favorites to local storage. Default is false.
  • insights: Enable the Algolia Insights plugin and send search events to your DocSearch index. Default is false.
  • searchParameters: An object customizing the Algolia Search Parameters.
Additional DocSearch options
Section titled “Additional DocSearch options”

A separate configuration file is required to pass function options like transformItems() or resultsFooterComponent() to the DocSearch component.

  1. Create a TypeScript file exporting your DocSearch configuration.

    TypeScript
    // src/config/docsearch.ts
import type { DocSearchClientOptions } from '@astrojs/starlight-docsearch';

export default {
	appId: 'YOUR_APP_ID',
	apiKey: 'YOUR_SEARCH_API_KEY',
	indexName: 'YOUR_INDEX_NAME',
	getMissingResultsUrl({ query }) {
		return `https://github.com/algolia/docsearch/issues/new?title=${query}`;
	},
	// ...
} satisfies DocSearchClientOptions;

  2. Pass the path to your configuration file to the Starlight DocSearch plugin in astro.config.mjs.

    JavaScript
    // astro.config.mjsimport { defineConfig } from 'astro/config';import starlight from '@astrojs/starlight';import starlightDocSearch from '@astrojs/starlight-docsearch';export default defineConfig({	integrations: [		starlight({			title: 'Site with DocSearch',			plugins: [				starlightDocSearch({					clientOptionsModule: './src/config/docsearch.ts',				}),			],		}),	],});

See the DocSearch JavaScript client API Reference for all supported options.

Translating the DocSearch UI

Section titled “Translating the DocSearch UI”

DocSearch only provides English UI strings by default. Add translations of the modal UI for your language using Starlight’s built-in internationalization system.

  1. Extend Starlight’s i18n content collection definition with the DocSearch schema in src/content.config.ts:

    extend:
    // src/content.config.ts
import { defineCollection } from 'astro:content';
import { docsLoader, i18nLoader } from '@astrojs/starlight/loaders';
import { docsSchema, i18nSchema } from '@astrojs/starlight/schema';
import { docSearchI18nSchema } from '@astrojs/starlight-docsearch/schema';

export const collections = {
	docs: defineCollection({ loader: docsLoader(), schema: docsSchema() }),
	i18n: defineCollection({
		loader: i18nLoader(),
		schema: i18nSchema({ extend: docSearchI18nSchema() }),
	}),
};

  2. Add translations to your JSON files in src/content/i18n/.

    These are the English defaults used by DocSearch:

    src/content/i18n/en.json
    {
	"docsearch.searchBox.resetButtonTitle": "Clear the query",
	"docsearch.searchBox.resetButtonAriaLabel": "Clear the query",
	"docsearch.searchBox.cancelButtonText": "Cancel",
	"docsearch.searchBox.cancelButtonAriaLabel": "Cancel",
	"docsearch.searchBox.searchInputLabel": "Search",

	"docsearch.startScreen.recentSearchesTitle": "Recent",
	"docsearch.startScreen.noRecentSearchesText": "No recent searches",
	"docsearch.startScreen.saveRecentSearchButtonTitle": "Save this search",
	"docsearch.startScreen.removeRecentSearchButtonTitle": "Remove this search from history",
	"docsearch.startScreen.favoriteSearchesTitle": "Favorite",
	"docsearch.startScreen.removeFavoriteSearchButtonTitle": "Remove this search from favorites",

	"docsearch.errorScreen.titleText": "Unable to fetch results",
	"docsearch.errorScreen.helpText": "You might want to check your network connection.",

	"docsearch.footer.selectText": "to select",
	"docsearch.footer.selectKeyAriaLabel": "Enter key",
	"docsearch.footer.navigateText": "to navigate",
	"docsearch.footer.navigateUpKeyAriaLabel": "Arrow up",
	"docsearch.footer.navigateDownKeyAriaLabel": "Arrow down",
	"docsearch.footer.closeText": "to close",
	"docsearch.footer.closeKeyAriaLabel": "Escape key",
	"docsearch.footer.searchByText": "Search by",

	"docsearch.noResultsScreen.noResultsText": "No results for",
	"docsearch.noResultsScreen.suggestedQueryText": "Try searching for",
	"docsearch.noResultsScreen.reportMissingResultsText": "Believe this query should return results?",
	"docsearch.noResultsScreen.reportMissingResultsLinkText": "Let us know."
}

Community search providers

Section titled “Community search providers”

Community plugins can also provide alternatives to Starlight’s built-in Pagefind search provider.

Typesense DocSearch

Section titled “Typesense DocSearch”

The Starlight DocSearch Typesense community plugin provides an open-source and self-hostable alternative that integrates the DocSearch interface with a Typesense backend.

See the “Getting Started” guide in the Starlight DocSearch Typesense documentation to learn how to use it in your project.

Suggest an edit

Propose a replacement for this page. The site team reviews it before applying any changes.

Export
Documentation menu