docsearch/packages/docsearch-js

@docsearch/js

JavaScript package for DocSearch, the best search experience for docs.

Installation

npm install @docsearch/js@5

Get started

If you don’t want to use a package manager, you can use a standalone endpoint:

<script src="https://cdn.jsdelivr.net/npm/@docsearch/js@5"></script>

To get started, you need a container for your DocSearch component to go in. If you don’t have one already, you can insert one into your markup:

<div id="docsearch"></div>

Then, insert DocSearch into it by calling the docsearch function and providing the container. It can be a CSS selector or an Element.

Make sure to provide a container (for example, a div), not an input. DocSearch generates a fully accessible search box for you.

import docsearch from '@docsearch/js';

import '@docsearch/css';

docsearch({
  container: '#docsearch',
  appId: 'YOUR_APP_ID',
  indices: ['YOUR_INDEX_NAME'],
  apiKey: 'YOUR_SEARCH_API_KEY',
});

The default entry includes keyword search and Ask AI. Configure askAi or call openAskAi() on the returned instance when using Ask AI.

Keyword-only entry

Use the docsearch subpath when your integration only needs keyword search. This entry excludes Ask AI code.

import docsearch from '@docsearch/js/docsearch';

import '@docsearch/css';

docsearch({
  container: '#docsearch',
  appId: 'YOUR_APP_ID',
  indices: ['YOUR_INDEX_NAME'],
  apiKey: 'YOUR_SEARCH_API_KEY',
});

For a standalone keyword-only script, load the explicit UMD file:

<script src="https://cdn.jsdelivr.net/npm/@docsearch/js@5/dist/umd/docsearch.js"></script>
<script>
  window.docsearch({
    container: '#docsearch',
    appId: 'YOUR_APP_ID',
    indices: ['YOUR_INDEX_NAME'],
    apiKey: 'YOUR_SEARCH_API_KEY',
  });
</script>

Both UMD entries expose callable window.docsearch. Load only one of them: the package default loads the AI-capable dist/umd/index.js, while dist/umd/docsearch.js is keyword-only.

Documentation

Read documentation →