FlexSearch

Setup

npm install flexsearch

npm install @types/flexsearch -D

From Source

Create the server from source object.

import { source } from '@/lib/source';
import { flexsearchFromSource } from 'fumadocs-core/search/flexsearch';

export const { GET } = flexsearchFromSource(source);

From Search Indexes

Create the server from search indexes, each index needs a structuredData field.

Usually, it is provided by your content source (e.g. Fumadocs MDX). You can also extract it from Markdown/MDX document using the Remark Structure plugin.

import { source } from '@/lib/source';
import { flexsearch } from 'fumadocs-core/search/flexsearch';

export const { GET } = flexsearch({
  indexes: source.getPages().map((page) => ({
    title: page.data.title!,
    description: page.data.description,
    url: page.url,
    id: page.url,
    structuredData: page.data.structuredData,
  })),
});

Searching Documents

You can search documents using:

• Fumadocs UI: Supported out-of-the-box, see Search UI for details.
• Search Client:

import { useDocsSearch } from 'fumadocs-core/search/client';
import { fetchClient } from 'fumadocs-core/search/client/fetch';

const client = useDocsSearch({
  client: fetchClient(),
});

Configurations

Tag Filter

Support filtering results by tag, it's useful for implementing multi-docs similar to this documentation.

import { source } from '@/lib/source';
import { flexsearchFromSource } from 'fumadocs-core/search/flexsearch';

const server = flexsearchFromSource(source, {
  buildIndex(page) {
    return {
      title: page.data.title!,
      description: page.data.description,
      url: page.url,
      id: page.url,
      structuredData: page.data.structuredData,
      // use your desired value, like page.slugs[0]
      tag: '<value>',
    };
  },
});

and update your search client:

• Fumadocs UI: Configure Tag Filter on Search UI.
• Search Client: pass a tag to fetchClient.

import { useDocsSearch } from 'fumadocs-core/search/client';
import { fetchClient } from 'fumadocs-core/search/client/fetch';

const client = useDocsSearch({
  client: fetchClient({
    tag: '<value>',
  }),
});

Static Mode

To support usage with static site, use staticGET from search server and make the route static or pre-rendered.

import { source } from '@/lib/source';
import { flexsearchFromSource } from 'fumadocs-core/search/flexsearch';

// statically cached
export const revalidate = false;
export const { staticGET: GET } = flexsearchFromSource(source);

and update your search clients:

• Fumadocs UI: use static client on Search UI.

• Search Client: change your client adapter.

  import { useDocsSearch } from 'fumadocs-core/search/client';
  import { flexsearchStaticClient } from 'fumadocs-core/search/client/flexsearch-static';
  
  const client = useDocsSearch({
    client: flexsearchStaticClient({
      // optional: pass tag & locale
      tag,
    }),
  });

  Prop

  Type

  from?string

  locale?string

  tag?union

Internationalization

Flexsearch doesn't require configurations to work for other languages, but you can improve the results by specifying Flexsearch options for each locale.

import { source } from '@/lib/source';
import { flexsearchFromSource } from 'fumadocs-core/search/flexsearch';
import { Charset } from 'flexsearch';

const server = flexsearchFromSource(source, {
  localeMap: {
    // [locale]: Flexsearch options
    jp: { encoder: Charset.CJK },
  },
});