> ## Documentation Index
> Fetch the complete documentation index at: https://www.meilisearch.com/docs/llms.txt
> Use this file to discover all available pages before exploring further.
# Instant-meilisearch
> Build search interfaces with instant-meilisearch and InstantSearch.
[instant-meilisearch](https://github.com/meilisearch/instant-meilisearch) is the easiest way to add a search interface to your front-end. It connects Meilisearch to [InstantSearch](https://www.algolia.com/doc/guides/building-search-ui/what-is-instantsearch/js/), an open-source library by Algolia that provides pre-built UI components for search.
## Why instant-meilisearch?
* **Pre-built components**: Search boxes, hit lists, facet filters, pagination, and more
* **Framework support**: Works with React, Vue, Angular, and vanilla JavaScript
* **Customizable**: Full control over styling and behavior
* **Search-as-you-type**: Real-time results as users type
## Quick example
Create an `index.html` file with the following code:
```html theme={null}
```
Open this file in your browser to see a working search interface.
## Framework guides
> [card] [React](https://www.meilisearch.com/docs/getting_started/instant_meilisearch/react.md)
>
> Build search UIs with React InstantSearch
> [card] [Vue](https://www.meilisearch.com/docs/getting_started/instant_meilisearch/vue.md)
>
> Build search UIs with Vue InstantSearch
## Available widgets
InstantSearch provides many pre-built widgets:
| Widget | Description |
| - | - |
| `searchBox` | Text input for search queries |
| `hits` | Display search results |
| `infiniteHits` | Infinite scroll results |
| `pagination` | Page navigation |
| `refinementList` | Facet filter checkboxes |
| `menu` | Single-select facet filter |
| `rangeSlider` | Numeric range filter |
| `sortBy` | Sort results dropdown |
| `stats` | Search statistics |
[See all InstantSearch widgets](https://www.algolia.com/doc/api-reference/widgets/js/)
## Using your own data
The example above uses a public demo instance. To use your own Meilisearch instance:
```javascript theme={null}
const { searchClient } = instantMeilisearch(
'https://your-instance.meilisearch.io', // Your instance URL
'your_search_api_key' // Your search API key
);
```
> [!NOTE]
>
> If you are using a bundler (Vite, Next.js, Webpack), you can use environment variables instead of hardcoded strings. Refer to your bundler's documentation for how to inject environment variables.
>
> [Get a free Cloud instance](https://cloud.meilisearch.com)
## Resources
* [instant-meilisearch on GitHub](https://github.com/meilisearch/instant-meilisearch)
* [InstantSearch documentation](https://www.algolia.com/doc/guides/building-search-ui/what-is-instantsearch/js/)
* [Live demo](https://codesandbox.io/p/sandbox/eager-dust-f98w2w)
This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.