Search

OverviewCopy Anchor Link

Search works out of the box: the integration exports search indexes at build time, and the dialog searches them in the browser.

Search is made of:

• Engine: where results come from, used through its search hook.
• Dialog: how results are shown.

Replace either from the layout module.

Search EngineCopy Anchor Link

Export useSearch() to use another engine in the built-in dialog:

import { liteClient } from 'algoliasearch/lite';
import { useAlgoliaSearch } from 'fumadocs-core/search/client';

const client = liteClient('app id', 'search api key');

export function useSearch({ locale }: { locale?: string }) {
  return useAlgoliaSearch({ client, indexName: 'docs', locale });
}

To sync pages to the engine, see its guide, like Algolia.

Search DialogCopy Anchor Link

Export SearchDialog to replace the dialog with a custom search dialog:

export { default as SearchDialog } from '@/components/search';

Fumadocs CLI creates it for your engine:

npx @fumadocs/cli feature search --provider algolia

Search IndexCopy Anchor Link

The built-in index is left out when the layout module exports useSearch or SearchDialog. Add its plugin to keep it, or to pass createFromSource() options:

import { oramaSearchPlugin } from '@fumadocs/astro/plugins/orama-search';

export default defineConfig({
  // ...
  plugins: [oramaSearchPlugin({ language: 'english' })], 
});

Your own dialog can search it with useStaticSearch() of fumadocs-core/search/client.

FlexSearchCopy Anchor Link

To index your pages with FlexSearch instead, add its plugin and search engine:

npm i flexsearch

import { flexsearchPlugin } from '@fumadocs/astro/plugins/flexsearch';

export default defineConfig({
  // ...
  plugins: [flexsearchPlugin()], 
});

The plugin takes the options of flexsearchFromSource(), like a tag filter for your own dialog.