Sveltepress

The default theme supports Algolia DocSearch through docsearch and custom search components through search, including @sveltepress/meilisearch.

Algolia DocSearch

Pass a docsearch config object to defaultTheme to enable Algolia DocSearch in the navbar.

Required fields are appId, apiKey, and indexName. Every other DocSearch option is also accepted.

vite.config.(js|ts)
import { const defaultTheme: ThemeDefaultdefaultTheme } from '@sveltepress/theme-default'
import { const sveltepress: (options?: SveltepressVitePluginOptions) => PluginOptionsveltepress } from '@sveltepress/vite'
import { function defineConfig(config: UserConfig): UserConfig (+5 overloads)
Type helper to make it easier to use vite.config.ts
accepts a direct


UserConfig


object, or a function that returns it.
The function receives a


ConfigEnv


object.
defineConfig } from 'vite'

export default function defineConfig(config: UserConfig): UserConfig (+5 overloads)
Type helper to make it easier to use vite.config.ts
accepts a direct


UserConfig


object, or a function that returns it.
The function receives a


ConfigEnv


object.
defineConfig({
  UserConfig.plugins?: PluginOption[] | undefined
Array of vite plugins to use.
plugins: [
    function sveltepress(options?: SveltepressVitePluginOptions): PluginOptionsveltepress({
      SveltepressVitePluginOptions.theme?: ResolvedTheme | undefinedtheme: function defaultTheme(themeOptions?: DefaultThemeOptions | undefined): ResolvedThemedefaultTheme({
        DefaultThemeOptions.docsearch?: Omit<DocSearchProps, "theme" | "container"> | undefineddocsearch: {
          appId: string
Algolia application id used by the search client.
appId: 'YOUR_APP_ID',
          apiKey: string
Public api key with search permissions for the index.
apiKey: 'YOUR_SEARCH_API_KEY',
          indexName?: string | undefined
Name of the algolia index to query.
@deprecatedindexName will be removed in a future version. Please use indices property going forward.
indexName: 'YOUR_INDEX_NAME',
        },
      }),
    }),
  ],
})
ts
Apply for DocSearch

DocSearch is free for open-source documentation sites. Apply at docsearch.algolia.com.

Meilisearch

@sveltepress/meilisearch is the supported Meilisearch search component. Install it first:

npm install --save @sveltepress/meilisearch
sh
yarn add @sveltepress/meilisearch
sh
pnpm install @sveltepress/meilisearch
sh
bun add @sveltepress/meilisearch
sh

Create a wrapper that provides your Meilisearch connection settings:

src/lib/MeilisearchSearch.svelte
<script lang="ts">
  import 

type Search = SvelteComponent<Record<string, any>, any, any>
const Search: LegacyComponentType
Search from '@sveltepress/meilisearch/Search.svelte'
</script>

<const Search: LegacyComponentTypeSearch
  host: stringhost="https://search.example.com"
  apiKey: stringapiKey="YOUR_SEARCH_ONLY_KEY"
  indexName: stringindexName="docs"
/>
svelte

Then pass the wrapper path to the default theme's custom-search hook:

vite.config.(js|ts)
import { const defaultTheme: ThemeDefaultdefaultTheme } from '@sveltepress/theme-default'

function defaultTheme(themeOptions?: DefaultThemeOptions | undefined): ResolvedThemedefaultTheme({
  DefaultThemeOptions.search?: string | boolean | Component<{}, {}, string> | undefinedsearch: '/src/lib/MeilisearchSearch.svelte',
})
ts

The component queries an existing Meilisearch index; it does not build the index for you. Each record should provide id, title, content, and either url or path. Use a search-only API key in browser code.

Known production build bug

The custom-search API and @sveltepress/meilisearch component are supported, and the source-path setup above works in development. However, the current default-theme runtime leaves the .svelte path as a browser import, so a static production build does not bundle that wrapper. Passing a component object directly is also ineffective because theme-option serialization removes it. This is a default-theme bundling bug, not a lack of M Search support. Verify the production deployment until the runtime integration is fixed.

For another search provider, implement the same search hook with your own Svelte wrapper. If both search and docsearch are configured, search takes precedence.