Flexsearch

Fumadocs supports searching document based on Flexsearch.

As the built-in search of Fumadocs, It is the default but also recommended option since it's easier to setup and totally free.

Simple Search

Index with the raw content of document.

import { allDocs } from 'content-collections';
import { createSearchAPI } from 'fumadocs-core/search/server';
 
export const { GET } = createSearchAPI('simple', {
  indexes: allDocs.map((docs) => ({
    title: docs.title,
    content: docs.content // Raw Content
    url: docs.url,
  })),
});

import { useDocsSearch } from 'fumadocs-core/search/client';
 
export function Dialog() {
  const { search, setSearch, query } = useDocsSearch();
 
  return <div>...</div>;
}

Advanced Search

Returns a more detailed result with matching headings and contents.

It accepts structured data processed from a markdown/MDX document, and index it with Flexsearch. You can extract the structured data using the Structure remark plugin.

It cannot extract content from rehype plugin generated content (remark plugins are supported).

Usage

Same as simple search, but requires the structuredData property instead of raw content.

import { source } from '@/app/source';
import { createSearchAPI } from 'fumadocs-core/search/server';
 
export const { GET } = createSearchAPI('advanced', {
  indexes: source.getPages().map((page) => ({
    title: page.data.title,
    description: page.data.description,
    structuredData: page.data.structuredData,
    id: page.url,
    url: page.url,
  })),
});

Tag Filter

It's useful for implementing versioned docs, or multi-docs similar to this documentation.

import { source } from '@/app/source';
import { createSearchAPI } from 'fumadocs-core/search/server';
 
export const { GET } = createSearchAPI('advanced', {
  indexes: source.getPages().map((page) => ({
    tag: 'your value here',
    // other props
  })),
  tag: true,
});

On your search client, pass a tag to the hook.

import { useDocsSearch } from 'fumadocs-core/search/client';
 
// Pass `tag` in your custom search dialog
const client = useDocsSearch('locale', 'tag');

Custom Algorithm

You can port your own search algorithm by returning a list of SortedResult from your custom /api/search/route.ts api endpoint, and you can integrate it with Fumadocs UI later.

Internationalization

Use createI18nSearchAPI for i18n functionality.

import { source } from '@/app/source';
import { i18n } from '@/i18n';
import { createI18nSearchAPIExperimental } from 'fumadocs-core/search/server';
 
export const { GET } = createI18nSearchAPIExperimental('advanced', {
  i18n,
  indexes: source.getLanguages().flatMap((entry) => {
    return entry.pages.map((page) => ({
      id: page.url,
      url: page.url,
      title: page.data.title,
      structuredData: page.data.structuredData,
      locale: entry.language,
    }));
  }),
});

function Dialog() {
  const { search, setSearch, query } = useDocsSearch(locale);
 
  //...
}

Search Client

useDocsSearch is a hook that combines debounce value and useSWR.

Return Type

Response Data

Headless

You can also host the search server on Express or Elysia, without Next.js.

import { initAdvancedSearch } from 'fumadocs-core/search/server';
 
const server = initAdvancedSearch({
  // options
});
 
server.search('query', {
  // you can specify `locale` and `tag` here
});