Go to homev1.4 Docs

    Front-end integration

    In the quick start tutorial, you learned how to launch Meilisearch and make a search request. This article will teach you how to create a simple front-end interface to search through your dataset.

    Using instant-meilisearch is the easiest way to build a front-end interface for search. instant-meilisearch is a plugin that establishes communication between a Meilisearch instance and InstantSearch. InstantSearch, an open-source project developed by Algolia, renders all the components needed to start searching.

    Let's try it!

    1. Create an empty file and name it index.html
    2. Open it in a text editor like Notepad, Sublime Text, or Visual Studio Code
    3. Copy-paste one of the code samples above—either vanilla JavaScript, Vue 2, or React— and save the file
    4. Open index.html in your browser by double-clicking it in your folder

    The following code sample uses plain JavaScript.

    <!DOCTYPE html>
    <html lang="en">
        <meta charset="utf-8" />
        <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@meilisearch/instant-meilisearch/templates/basic_search.css" />
        <div class="wrapper">
          <div id="searchbox" focus></div>
          <div id="hits"></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>
        const search = instantsearch({
          indexName: "movies",
          searchClient: instantMeiliSearch(
              container: "#searchbox"
            instantsearch.widgets.configure({ hitsPerPage: 8 }),
              container: "#hits",
              templates: {
              item: `
                <div class="hit-name">
                      {{#helpers.highlight}}{ "attribute": "title" }{{/helpers.highlight}}

    Here's what's happening:

    • The first four lines of the <body> add two container elements: #searchbox and #hits. instant-meilisearch creates the search bar inside #searchbox and lists search results in #hits
    • The first two<script src="…"> tags import libraries needed to run instant-meilisearch
    • The third and final <script> tag is where you customize instant-meilisearch

    You should now have a working front-end search interface. Consult instant-meilisearch's documentation for more information on how to further customize your search interface.