Skip to content

algolia/docsearch

main
Switch branches/tags

Name already in use

A tag already exists with the provided branch name. Many Git commands accept both tag and branch names, so creating this branch may cause unexpected behavior. Are you sure you want to create this branch?
Code

Latest commit

* chore(website): update language and compress images

* ran linter

* - update aria text
d0c15d6

Git stats

Files

Permalink
Failed to load latest commit information.
Type
Name
Latest commit message
Commit time
February 6, 2023 12:47
September 1, 2020 11:54
September 1, 2020 11:54
September 1, 2022 13:38
September 1, 2020 11:54
September 1, 2020 11:54
February 6, 2023 12:47

DocSearch

The easiest way to add search to your documentation – for free.

Netlify Status npm version License

DocumentationJavaScript PlaygroundReact Playground


DocSearch crawls your documentation, pushes the content to an Algolia index and provides a dropdown search experience on your website.

Preview

Screencast

Light Dark
Light preview Dark preview

Usage

Don't have your Algolia credentials yet? Apply to DocSearch!

JavaScript

Installation

yarn add @docsearch/js@3
# or
npm install @docsearch/js@3

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@3"></script>

Get started

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',
  indexName: 'YOUR_INDEX_NAME',
  apiKey: 'YOUR_SEARCH_API_KEY',
});

React

Installation

yarn add @docsearch/react@3
# or
npm install @docsearch/react@3

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

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

Get started

DocSearch generates a fully accessible search box for you.

import { DocSearch } from '@docsearch/react';

import '@docsearch/css';

function App() {
  return (
    <DocSearch
      appId="YOUR_APP_ID"
      indexName="YOUR_INDEX_NAME"
      apiKey="YOUR_SEARCH_API_KEY"
    />
  );
}

export default App;

Styling

Read documentation →

Related projects

DocSearch is made of the following repositories:

License

MIT