Skip to main content
instant-meilisearch is the easiest way to add a search interface to your front-end. It connects Meilisearch to InstantSearch, 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: 
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@meilisearch/instant-meilisearch/templates/basic_search.css" />
  </head>
  <body>
    <div class="wrapper">
      <div id="searchbox"></div>
      <div id="hits"></div>
    </div>

    <script src="https://cdn.jsdelivr.net/npm/@meilisearch/instant-meilisearch/dist/instant-meilisearch.umd.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/instantsearch.js@4"></script>
    <script>
      const { searchClient } = instantMeiliSearch(
        'https://ms-adf78ae33284-106.lon.meilisearch.io',
        'a63da4928426f12639e19d62886f621130f3fa9ff3c7534c5d179f0f51c4f303'
      );

      const search = instantsearch({
        indexName: 'steam-videogames',
        searchClient
      });

      search.addWidgets([
        instantsearch.widgets.searchBox({
          container: '#searchbox'
        }),
        instantsearch.widgets.hits({
          container: '#hits',
          templates: {
            item: (hit, { html, components }) => html`
              <div>
                <h2>${components.Highlight({ hit, attribute: 'name' })}</h2>
                <p>${hit.description}</p>
              </div>
            `
          }
        })
      ]);

      search.start();
    </script>
  </body>
</html>
Open this file in your browser to see a working search interface.

​
Framework guides

React

Build search UIs with React InstantSearch

Vue

Build search UIs with Vue InstantSearch

​
Available widgets

InstantSearch provides many pre-built widgets:
WidgetDescription
searchBoxText input for search queries
hitsDisplay search results
infiniteHitsInfinite scroll results
paginationPage navigation
refinementListFacet filter checkboxes
menuSingle-select facet filter
rangeSliderNumeric range filter
sortBySort results dropdown
statsSearch statistics
See all InstantSearch widgets

​
Using your own data

The example above uses a public demo instance. To use your own Meilisearch instance: 
const { searchClient } = instantMeiliSearch(
  'https://your-instance.meilisearch.io',  // Your instance URL
  'your_search_api_key'                     // Your search API key
);
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

​
Resources