Instant-meilisearch

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:

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

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

Introduction

Back-end SDKs

Frontend SDKs

Framework integrations

Integrations

Why instant-meilisearch?

Quick example

Framework guides

React

Vue

Available widgets

Using your own data

Resources

​Why instant-meilisearch?

​Quick example

​Framework guides

React

Vue

​Available widgets

​Using your own data

​Resources

Why instant-meilisearch?

Quick example

Framework guides

Available widgets

Using your own data

Resources