Skip to content

📘 The easiest way to add search to your documentation.

License

Notifications You must be signed in to change notification settings

harshini-rangaswamy/docsearch

This branch is 78 commits behind algolia/docsearch:main.

Folders and files

NameName
Last commit message
Last commit date

Latest commit

5ed9a6d · Jul 11, 2023
Feb 24, 2023
Nov 2, 2021
Aug 2, 2022
Oct 23, 2022
Jun 16, 2023
Jul 11, 2023
Nov 22, 2021
Sep 1, 2020
Sep 1, 2020
Jul 9, 2021
Nov 18, 2021
May 17, 2023
Jul 11, 2023
Jul 9, 2021
Dec 1, 2020
Sep 1, 2020
Jun 16, 2023
Sep 1, 2022
Aug 3, 2022
Sep 1, 2020
Aug 2, 2022
Nov 12, 2020
Jun 15, 2023
Sep 1, 2020
Nov 2, 2021
Nov 22, 2021
Jun 16, 2023
Oct 24, 2022
Jul 11, 2023
Jul 21, 2022
Sep 1, 2020
Jan 10, 2023
Sep 1, 2020
Nov 22, 2021
Jul 11, 2023

Repository files navigation

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

About

📘 The easiest way to add search to your documentation.

Resources

License

Stars

Watchers

Forks

Packages

No packages published

Languages

  • TypeScript 31.1%
  • MDX 25.2%
  • JavaScript 23.3%
  • CSS 20.4%