136 lines
4.7 KiB
Markdown
136 lines
4.7 KiB
Markdown
<div align="center">
|
||
|
||
[](https://docsearch.algolia.com)
|
||
|
||
The easiest way to add search to your documentation – for free.
|
||
|
||
[](https://app.netlify.com/sites/docsearch/deploys) [](https://www.npmjs.com/package/@docsearch/js/v/alpha) [](https://github.com/algolia/docsearch/network/dependents) [](./LICENSE)
|
||
|
||
<p align="center">
|
||
<strong>
|
||
<a href="https://docsearch.algolia.com">Documentation</a> •
|
||
<a href="https://codesandbox.io/s/docsearchjs-v3-playground-z9oxj">JavaScript Playground</a> •
|
||
<a href="https://codesandbox.io/s/docsearch-react-v3-playground-619yg">React Playground</a>
|
||
</strong>
|
||
</p>
|
||
|
||
</div>
|
||
|
||
---
|
||
|
||
DocSearch crawls your documentation, pushes the content to an Algolia index and provides a dropdown search experience on your website.
|
||
|
||
## Preview
|
||
|
||
|
||
|
||
## Usage
|
||
|
||
> Don't have your Algolia credentials yet? [Apply to DocSearch](https://docsearch.algolia.com/apply)!
|
||
|
||
### JavaScript
|
||
|
||
#### Installation
|
||
|
||
```sh
|
||
bun add @docsearch/js@5
|
||
# or
|
||
npm install @docsearch/js@5
|
||
```
|
||
|
||
If you don’t want to use a package manager, you can use a standalone endpoint:
|
||
|
||
```html
|
||
<script src="https://cdn.jsdelivr.net/npm/@docsearch/js@5"></script>
|
||
```
|
||
|
||
#### Get started
|
||
|
||
To get started, you need a [`container`](https://docsearch.algolia.com/docs/api#container) for your DocSearch component to go in. If you don’t have one already, you can insert one into your markup:
|
||
|
||
```html
|
||
<div id="docsearch"></div>
|
||
```
|
||
|
||
Then, insert DocSearch into it by calling the [`docsearch`](https://docsearch.algolia.com/docs/api) function and providing the container. It can be a [CSS selector](https://developer.mozilla.org/en-us/docs/web/css/css_selectors) or an [Element](https://developer.mozilla.org/en-us/docs/web/api/htmlelement).
|
||
|
||
Make sure to provide a [`container`](https://docsearch.algolia.com/docs/api#container) (for example, a `div`), not an `input`. DocSearch generates a fully accessible search box for you.
|
||
|
||
```js app.js
|
||
import docsearch from '@docsearch/js';
|
||
|
||
import '@docsearch/css';
|
||
|
||
docsearch({
|
||
container: '#docsearch',
|
||
appId: 'YOUR_APP_ID',
|
||
indices: ['YOUR_INDEX_NAME'],
|
||
apiKey: 'YOUR_SEARCH_API_KEY',
|
||
});
|
||
```
|
||
|
||
### React
|
||
|
||
#### Installation
|
||
|
||
```bash
|
||
bun add @docsearch/react@5
|
||
# or
|
||
npm install @docsearch/react@5
|
||
```
|
||
|
||
If you don’t want to use a package manager, you can use a standalone endpoint:
|
||
|
||
```html
|
||
<script src="https://cdn.jsdelivr.net/npm/@docsearch/react@5"></script>
|
||
```
|
||
|
||
#### Get started
|
||
|
||
DocSearch generates a fully accessible search box for you.
|
||
|
||
```jsx App.js
|
||
import { DocSearch } from '@docsearch/react';
|
||
|
||
import '@docsearch/css';
|
||
|
||
function App() {
|
||
return (
|
||
<DocSearch
|
||
appId="YOUR_APP_ID"
|
||
apiKey="YOUR_SEARCH_API_KEY"
|
||
indices=["YOUR_ALGOLIA_INDEX"]
|
||
/>
|
||
);
|
||
}
|
||
|
||
export default App;
|
||
```
|
||
|
||
## Styling
|
||
|
||
[Read documentation →](https://docsearch.algolia.com/docs/styling)
|
||
|
||
## MCP plugins
|
||
|
||
Client plugins for the public DocSearch MCP endpoint are in [`mcp/plugins/docsearch`](mcp/plugins/docsearch). They connect ChatGPT, Codex, Cursor, and Claude Code to `https://mcp.algolia.com/1/docsearch/mcp` for current public developer documentation.
|
||
|
||
## Related projects
|
||
|
||
DocSearch is made of the following repositories:
|
||
|
||
- **[algolia/docsearch](https://github.com/algolia/docsearch)**: DocSearch source code.
|
||
- **[algolia/docsearch/packages/website](https://github.com/algolia/docsearch/tree/main/packages/website)**: DocSearch website and documentation.
|
||
- **[algolia/docsearch-configs](https://github.com/algolia/docsearch-configs)**: DocSearch websites configurations that DocSearch powers.
|
||
- **[algolia/docsearch-scraper](https://github.com/algolia/docsearch-scraper)**: DocSearch crawler that extracts data from your documentation.
|
||
|
||
## Used by
|
||
|
||
DocSearch is used by [Bootstrap](https://github.com/twbs/bootstrap), [Cheerio](https://github.com/cheeriojs/cheerio), [Element Plus](https://github.com/element-plus/element-plus), [Authelia](https://github.com/authelia/authelia), [MDX](https://github.com/mdx-js/mdx), [VitePress](https://github.com/vuejs/vitepress) and [many more](https://github.com/algolia/docsearch/network/dependents).
|
||
|
||
[](https://github.com/algolia/docsearch/network/dependents)
|
||
Generated with [usedby.dev](https://usedby.dev/)
|
||
|
||
## License
|
||
|
||
[MIT](LICENSE)
|