Are you wondering if Meilisearch is the right choice for you? Well, don't worry! We're here to help make that decision a bit easier for you. In this article, we'll break down the main strengths and weaknesses of both search engines.

Why should I consider Meilisearch over Elasticsearch?
-----------------------------------------------------

If you are looking for a search engine that attempts to do everything from app search to log analytics, and you don’t mind spending the time and effort necessary to make it work for your search needs, then Elasticsearch might be suitable for you.

But if ease of use, performance, and relevancy are important to you, Meilisearch was made for you. Exhausted from scouring documentation pages to configure an extensive list of parameters just to deliver a decent search experience? We understand your frustration.

Let’s be honest, even if you have the most flexible and powerful tool in the world, it doesn’t count for much if it’s a pain to use and understand. That's why we made Meilisearch: to give developers the tool they need to create remarkable search experiences effortlessly.

Before making your decision, you need to understand the differences between the two engines and what you plan to use them for.

Understanding the key differences and their importance
------------------------------------------------------

Since its creation in 2010, Elasticsearch has quickly become a popular option in the search engine market, finding use in all kinds of applications and datasets. However, while it is undeniably a powerful tool for heavy full-text search, the need for extensive configuration before use means that all that power comes with a high resource cost.

Elasticsearch's open-source nature has played a significant role in its popularity and adoption. And, because historically there haven't been many open-source alternatives, developers continue to go for Elasticsearch as the default solution and wind up losing a disproportionate amount of time on setup and training.

This is where Meilisearch comes in. It’s an open-source, easy-to-use, fast, relevant, and typo-tolerant search engine that fits effortlessly into any app, website, and workflow. It works out-of-the-box with default settings that meet the needs of most projects, while also being highly customizable to meet individual needs.

What is Elasticsearch made for?
-------------------------------

Shay Bannon created Elasticsearch, a distributed search and analytics engine based on the [Apache Lucene library](https://lucene.apache.org/core/). Elasticsearch is now developed alongside other tools for data collection, analysis, and visualization. These products are designed to be used as an integrated solution called the "Elastic Stack".

### Key strengths

Elasticsearch’s main strengths lie in its flexibility and scalability, as well as its capabilities for aggregation and analysis.

**Flexibility**

Elasticsearch provides search and analytics for all types of data. It has extensive use cases spanning everything from simple site search, management and analysis of log data to endpoint security.

**Scalability**

Elasticsearch’s distributed architecture enables scalability by adding or removing nodes from the cluster, making it a suitable choice for managing large volumes of data.

**Aggregation and analysis**

Elasticsearch provides advanced aggregation and analytics capabilities that enable users to extract insights from their data and perform sophisticated analysis operations.

### Challenges

Elasticsearch is a very powerful tool, but it’s also a very complex one. It can be arduous to set up and maintain. Since there are no defaults for implementing a basic site or app search, it needs to be configured. While Elasticsearch has extensive documentation; there is a lot to learn before jumping into implementation, which can be daunting, especially for new users.

Before you can perform your first search, there are several parameters you'll need to set up, including relevancy or typo tolerance, a must-have in a modern app or site search. It can take some time to become familiar with the process.

Let's look at an example. Given [a dataset of news headlines](https://www.kaggle.com/datasets/rmisra/news-category-dataset), the request below asks for results containing “Khloe Kardashian Kendall Jenner” in the headline:

```JSON
GET news_headlines/_search
{
 "query": {
   "match": {
   "headline": {
       "query": "Khloe Kardashian Kendall Jenner"
   }
   }
 }
}
```

Here is Elasticsearch’s default response:

```JSON
{
   "_index": "news_headlines",
   "_type": "_doc",
   "_id": "E9CoJ3cBwsjPafpAr39g",
   "_score": 17.15928,
   "_source": {
       "_date": "2015-05-16",
       "short_description": "",
       "@timestamp": "2015-05-16T00:00:00.000-06:00",
       "link": "https://www.huffingtonpost.com/entry/kendall-jenner-kourtney-kardashian-height-difference_n_7297968.html",
       "category": "ENTERTAINMENT",
       "headline": "Kendall Jenner And Kourtney Kardashian Are Not Quite Twins In Hilarious Instagram Photo",
       "authors": "Lily Karlin"
   }
}
```

Contrary to what one might expect, the first result returned by Elasticsearch is not the most relevant; it only contains some of the search terms. As you can see in the \`headline\` field: it contains “Kendall Jenner”, which is expected, but instead of “Khloe Kardashian”, we find “Kourtney Kardashian”.

When a query contains multiple terms, users typically expect the search engine to prioritize results that contain all the terms rather than just some of them. In other words, users generally expect an "AND" operation rather than an "OR" when searching for multiple terms.

Elasticsearch’s match query uses the "OR" logic by default. If a document contains one of the search terms, Elasticsearch will consider that document as a hit. If we want all the query terms to be present, we have to add the [“AND” operator](https://www.elastic.co/guide/en/elasticsearch/reference/current/query-dsl-match-query.html#query-dsl-match-query-boolean) to the query, but we’ll get far fewer results.

The other option Elasticsearch provides to tweak the relevancy is to specify the minimum number of terms a document should have to be included in the search results with the \`minimum\_should\_match\` parameter.

That’s a lot of effort for something that should be quick and painless. And we are only talking about the very basics of search.

Moreover, querying for “Kardasian”—without the \`h\`— returns no results. This is because Elasticsearch doesn’t allow any typos unless we set an [extra parameter](https://www.elastic.co/guide/en/elasticsearch/reference/current/query-dsl-match-query.html#query-dsl-match-query-fuzziness) called \`fuzziness\`.

We sent the same query—with a typo—to Meilisearch:

```JSON
POST /indexes/news_headlines/search
{ 
   "q": "Khloe Kardasian Kendall Jenner" 
}
```

With zero configuration, the first result returned by Meilisearch was:

```JSON
{
   "link": "https://www.huffingtonpost.com/entry/khloe-kardashian-licks-kendall-jenner-abs_us_559d7e27e4b05b1d028f98cf",
   "headline": "Khloe Kardashian Licks Kendall Jenner's 'Irresistible' Abs In New Instagram Photo",
   "category": "ENTERTAINMENT",
   "short_description": "Khloe and Kendall shared quite the intimate moment at the gym!",
   "authors": "Julia Brucculieri",
   "date": "2015-07-08",
   "id": 94869
}
```

As we saw earlier, achieving this level of relevancy with Elastic required adjusting several search parameters. So, just because you can do anything with Elasticsearch, doesn’t mean you should. In many cases, Elasticsearch might just be overkill.

What is Meilisearch made for?
-----------------------------

Meilisearch is an open-source, user-focused search engine written in Rust. It was created in 2018 to provide an accessible search solution designed to meet a vast majority of needs, with zero configuration required and a high degree of customization.

Meilisearch delivers an instant search experience, including powerful built-in capabilities such as [search-as-you-type](https://www.meilisearch.com/docs/learn/what_is_meilisearch/overview?utm_campaign=comparisons&utm_source=blog&utm_medium=vs-elasticsearch&utm_content=search-as-you-type#features), [typo tolerance](https://docs.meilisearch.com/learn/configuration/typo_tolerance.html?utm_campaign=comparisons&utm_source=blog&utm_medium=vs-elasticsearch), [faceted search](https://www.meilisearch.com/docs/learn/what_is_meilisearch/overview?utm_campaign=comparisons&utm_source=blog&utm_medium=vs-elasticsearch&utm_content=faceted-search#features), [geo search](https://docs.meilisearch.com/learn/advanced/geosearch.html?utm_source=release-post&utm_id=v1-announcement&utm_content=geosearch), and [multi-tenancy](https://www.meilisearch.com/docs/learn/security/tenant_tokens?utm_campaign=comparisons&utm_source=blog&utm_medium=vs-elasticsearch). Its [first major version was released](/blog/v1-enterprise-ready-stable/?utm_campaign=comparisons&utm_source=blog&utm_medium=vs-elasticsearch)n early 2023, making it completely stable, forward-compatible, and enterprise-ready.

### Key strengths

Meilisearch focuses on simplicity, relevancy, and performance.

**Simplicity**

Meilisearch aims for a simple and intuitive experience for developers. It works out of the box with no configuration needed. But you can easily tailor it to your needs in just a few minutes, so you don't have to be a search expert to get the most out of Meilisearch.

**Relevancy**

Meilisearch provides a pre-configured set of ranking rules, delivering high relevancy right out of the box. These default settings were developed iteratively by working directly with the community and are suitable for most use cases. These rules can be customized to suit individual requirements.

**Performance**

Meilisearch aims to provide a search-as-you-type experience, returning results within a maximum of 50 milliseconds.

Challenges
----------

While it can handle a considerable amount of data, the open-source version of Meilisearch (self-hosted) may not be the best fit for applications requiring a distributed architecture to handle massive amounts of data across multiple nodes or clusters.

Meilisearch Cloud, on the other hand, already provides scalability and high availability with its [Pro and Enterprise plans](https://www.meilisearch.com/pricing?utm_campaign=comparisons&utm_source=blog&utm_medium=vs-elasticsearch).

However, our team is currently [gathering feedback](https://github.com/meilisearch/product/discussions/617) to implement a distributed open-source Meilisearch in the near future.

Meilisearch is primarily designed to deliver performant instant-search experiences aimed at end-users and does not provide comprehensive data analysis features. While Meilisearch can help you search through your data and retrieve relevant results instantly, it has yet to offer advanced data analysis capabilities such as data visualization or statistical analysis. Meilisearch Cloud plans to provide similar features down the line, as you can see in its [roadmap](https://roadmap.meilisearch.com/c/129-search-analytics).

Meilisearch or Elasticsearch?
-----------------------------

Hopefully, it’s clear by now that one search engine is not better than the other. The most important factor lies in the purpose you are using it for. Both search engines have their strengths and weaknesses, and it is essential to understand them to make the right choice for your particular use case.

Meilisearch is not made to search through billions of large text files or parse complex queries. This kind of searching power would require a higher degree of complexity and lead to slower search experiences, which runs against our instant search philosophy. For those purposes, look no further than Elasticsearch; it’s an excellent solution for companies with the necessary resources, whether that be the financial means to hire consultants or the time and money required to implement it themselves.

Meilisearch is a perfect choice if you need a developer-friendly tool to effortlessly deploy a typo-tolerant search, intuitive for users and return results instantly with excellent relevance out of the box. It's ideal for on-site and in-app search, including [e-commerce](/blog/minipouce-top-grade-customer-experience/) [documentation](/blog/symfonys-solution-for-documentation-search/) and [content search](/blog/hugging-face-democratizes-ai/) * *

Learn more about what Meilisearch can bring to your business

[Talk to a sales expert](https://dub.sh/meili-sales?utm_campaign=comparisons&utm_source=blog&utm_medium=vs-elasticsearch)

* * *

Conclusion
----------

To recap, we have addressed both search engines' main strengths and weaknesses, but we have only scratched the surface. The capabilities of both search engines go far beyond what this article has covered. For a comprehensive comparison of Meilisearch with Elasticsearch and other search engines, please refer to the [dedicated section](https://docs.meilisearch.com/learn/what_is_meilisearch/comparison_to_alternatives.html?utm_campaign=comparisons&utm_source=blog&utm_medium=vs-elasticsearch#comparison-table) in our documentation.

Do you want to see Meilisearch in action? Try our [demo](https://where2watch.meilisearch.com/?utm_campaign=comparisons&utm_source=blog&utm_medium=vs-elasticsearch). You can also run it and start searching through your data in less than five minutes by following our [quick start guide](https://www.meilisearch.com/docs/learn/getting_started/cloud_quick_start?utm_campaign=comparisons&utm_source=blog&utm_medium=vs-elasticsearch).

We continuously collaborate with the open-source community to develop new features and provide the best developer and search experience. See what's next on our [public roadmap](https://roadmap.meilisearch.com/)!

If you have any feedback or suggestions, please join our [Discord server](https://discord.gg/meilisearch) and have a chat with us!

Meilisearch vs Elasticsearch

Meilisearch v0.30 is out and brings with it the ability to create numbered page selectors. You can read more about the new features and updates from v0.30 in our [release blog post](/blog/whats-new-in-v0-30/)his article will go over the different ways of navigating search results and the pros and cons of each method.

### What is pagination, and what are some common alternatives?

Let’s say you go to an ecommerce website to buy a new pair of shoes. It would be quite overwhelming if you got 700 pairs of shoes to choose from as soon as the page loads—not to mention that fetching every pair of shoes would certainly slow down the site.  

To avoid this, most websites will break search results up into chunks, such as pages, and load a certain number at a time based on input from the user.  

There are three main ways to display large datasets: pagination, infinite scroll, and load more. Each method has benefits and downsides that make it suited for certain use cases and content types. For example, Google’s use of numbered pagination makes it easier to find a specific result again, while Twitter, Facebook, and Instagram use infinite scroll to keep users glued to their screens. Google uses load more on mobile devices to display search results.  

Changing from one type of pagination to another can completely alter user experience.  Imagine waking up to a paginated version of Twitter, where you have to continuously click a “Next” button to view more posts in your feed (thanks, Elon). This would completely change the way you interact with the site!  

In making the choice of how to display search results, you decide how much content to show users at one time, what action they have to take to view more, and how convenient it is to find a specific result again.

### Pagination

Pagination works by breaking search results down into separate pages. There are two main types of pagination interfaces: numbered ones, where you find a list of numbered pages at the bottom of each page, and unnumbered ones, where you navigate from page to page using the “Previous” and “Next” buttons.  

Pagination is one of the most popular ways to display search results and is particularly common on ecommerce websites. Pagination breaks down content, making it easier to process. Since each page is distinct, users can easily return to items they liked or share them with others. This helps users to search for something specific instead of browsing through a never-ending list of items.  

The biggest downside to pagination is that most users don’t look beyond the first few pages and hence never get to look at more results. When was the last time you went to the second page of Google’s search results?

![](https://media.tenor.com/zmDrt3416pcAAAAC/think-winniethepooh.gif)

Since the results are replaced with every new page, users need to switch between pages to compare results. In addition, pagination isn’t very mobile-friendly. Mobile users prefer load more or infinite scroll as it’s more intuitive. It also requires additional actions from the user: clicking the “Next” button and waiting for the page to load. This may also give the impression that pagination is slow.

#### Numbered page selection

Page numbers add clarity to the search process and guide users to what they’re searching for. Numbered page selection offers numerous advantages, such as:  

*   Users can be shown the total number of pages of results, allowing them to estimate how long they will need to find a particular item. (“I have 25 pages worth of shoes to sift through!”)
*   With numbered pages, it’s clear that some pages are more relevant than others. (“I didn’t find those shoes on the first five pages, so this website probably doesn’t sell them.”)
*   Users can remember the positioning of an item, and numbered pages allow them to return to it faster. (“I liked the pink shoes on page 3.”)
*   Users can generally stop in the middle of a session and continue from where they left off. (“I stopped at page 5 yesterday.”)

![](https://unable-actionable-car.media.strapiapp.com/Screen_Shot_2022_11_29_at_16_12_39_22ff2f4296.png)

#### “Previous” and “Next” buttons

In numberless pagination, users navigate via “Next” and “Previous” buttons instead of a list of numbered pages. This alternative to numbered pagination is often used for mobile displays where there isn’t enough space to display page numbers. Since there are only two buttons, it offers less precision, as users can’t jump to specific pages. However, it offers better performance as it isn’t necessary to calculate the total number of search results.  

![](https://lh4.googleusercontent.com/7g66Jnt6E-GR1esTMZrmCv6MDvHMOn-FprG5cHxYQhmHGQLS8vYFvlmOlpaBdjmf_pc285dIACe3SeUNSj2UJ9C2JMfk4cxoxbqFuS_eD4q9qZp1h2yhIaz-9ng7xB3ly39_PvvtUNqm6L0a5euKFYvZSn9ttg5NzKPQMmz4X0k37XiGqD7RnkuVwT9XKg)

### Infinite scroll

Infinite scroll has become increasingly popular over the past decade due to the rise in smartphones. It loads more content seamlessly as the user scrolls, reducing friction. It’s also more intuitive than pagination; you just keep scrolling to view more content! Additionally, since all the content is loaded to a single page, it may seem faster than traditional pagination.

![](/blog/content/images/2022/11/IMG_3391.GIF

The biggest downside to infinite scroll is poor usability.  The page length increases infinitely, making it difficult to find previously viewed results again, nor can users bookmark or share a particular set of items on the list.  Page performance slows down as more content is loaded, making the page “heavier”. Meanwhile, the site footer may be inaccessible since infinite scroll pushes it endlessly down as more content is loaded. Since Googlebot cannot emulate scrolling, infinite scroll also has a negative impact on SEO.  

However, the greatest impact by far is on user behavior. At some point, users of infinite scroll will stop paying attention to individual results and begin to focus more on scrolling, leading to decreased engagement. You can read more about this in [Baymard Institute's study](https://www.smashingmagazine.com/2016/03/pagination-infinite-scrolling-load-more-buttons/) on design patterns for loading products on desktops and mobile devices.  

Based on the above, infinite scroll may not be the best solution for ecommerce websites. How do you find the pink shoes you liked 15-ish scrolls ago?  

There is one use case where infinite scroll cannot be beat. For entertainment websites whose main purpose is to keep the users with no particular aim on the page for as long as possible, infinite scroll all but guarantees a longer time on site. This is why infinite scroll is closely linked with social media and other business models that rely on advertising or data harvesting.

### Load more

Like infinite scroll, load more is a mobile-friendly option that works by extending one page infinitely. However, unlike infinite scroll, load more allows users to choose whether they want to view more results by clicking a “Load more” button at the bottom of the page. This critical difference gives users more control, making it easier, for example, to access the footer or keep track of a specific result. Studies show that it also increases the amount of attention users give to each individual item.  

Load more shares many downsides with infinite scroll, such as poor page performance. Like infinite scroll, it’s not ideal for SEO as Googlebot cannot click the “Load more” button. This means it cannot crawl or index all of your content.  

![](https://lh5.googleusercontent.com/-xmPwy0C6ZdgZoHNMV4fmRdxR_g9scVY5J0ktGY_k0oh24Un80WooYE9zSRo_TxNhPJE5--hAQJ-UJIRPejnFZt4pcNca6l4z6JedvwrjdKucMBAurVeBgMgIGYWS9unr2cOEA-1CZYBwlQ0ySexv2HqYSWqCSemBCVK5_jb-VweLwczjNcXQjl3ghxdmA)

### So, what do I use?

The short answer: it depends on the kind of product experience you want.  

**Pagination**

*   Your users are looking for highly specific results
*   SEO is very important to you

**Infinite scroll**

*   You’re building a social media site
*   Your users want to explore a large amount of content

**Load more**

*   You want to hide your content behind a paywall
*   You want to build an ethical mobile experience
*   You want to gain some of the benefits of both pagination and infinite scroll  
    

Or you could go hybrid! Consider Ikea: they use a load more button but also display the total number of search results and a progress bar, enabling users to see how many results they’ve viewed so far.  

![](https://unable-actionable-car.media.strapiapp.com/Screen_Shot_2022_11_29_at_18_45_56_68c9b2fc30.png)

While we have covered the three main ways to display search results today, they are far from set in stone. At the end of the day, your goal is to help your users find the content they need. If you understand which key goals you want to accomplish with your search navigation interface and which pitfalls you want to avoid, you may be able to design something even better than what’s been done before. Good luck, and let us know what you create with Meilisearch!

Navigating search results: pagination vs infinite scroll vs load more

Integrate a relevant search bar to your documentation
=====================================================

You might have noticed the search bar in [our documentation](https://docs.meilisearch.com/).

![](https://unable-actionable-car.media.strapiapp.com/vuepress_searchbar_demo_b1b886ebc2.gif)

MeiliSearch docs search bar demo

And you are probably wanting the same for your own documentation!

This tutorial will guide you through the steps of building a relevant and powerful search bar for your documentation 🚀

1.  Run a MeiliSearch Instance
2.  Scrape your content
3.  Integrate the Search Bar

Run a MeiliSearch Instance
--------------------------

First of all, you need your documentation content to be scraped and pushed into a MeiliSearch instance.

You can install and run MeiliSearch on your machine using `curl`.

```bash
$ curl -L https://install.meilisearch.com | sh
$ ./meilisearch --master-key=myMasterKey

```

There are [other ways to install MeiliSearch](https://docs.meilisearch.com/reference/features/installation.html#download-and-launch).

MeiliSearch is open-source and can run either on your server or on any cloud provider.

> **Note:** The host URL and the API key you will provide in the next steps correspond to the credentials of this MeiliSearch instance.  
> In the example above, the host URL is `http://localhost:7700` and the API key is `myMasterKey`.

Scrape your Content
-------------------

The Meili team provides and maintains a [scraper tool](https://github.com/meilisearch/docs-scraper) to automatically read the content of your website and store it into an index in MeiliSearch.

### Configuration File

The scraper tool needs a configuration file to know what content you want to scrape, this is done by providing selectors (e.g. the HTML tag).

Here is an example of a basic configuration file:

```json
{
  "index_uid": "docs",
  "start_urls": ["https://www.example.com/doc/"],
  "sitemap_urls": ["https://www.example.com/sitemap.xml"],
  "stop_urls": [],
  "selectors": {
    "lvl0": {
      "selector": ".docs-lvl0",
      "global": true,
      "default_value": "Documentation"
    },
    "lvl1": {
      "selector": ".docs-lvl1",
      "global": true,
      "default_value": "Chapter"
    },
    "lvl2": ".docs-content .docs-lvl2",
    "lvl3": ".docs-content .docs-lvl3",
    "lvl4": ".docs-content .docs-lvl4",
    "lvl5": ".docs-content .docs-lvl5",
    "lvl6": ".docs-content .docs-lvl6",
    "text": ".docs-content p, .docs-content li"
  }
}

```

The `index_uid` field is the index identifier in your MeiliSearch instance in which your website content is stored. The scraping tool will create a new index if it does not exist.

The `docs-content` class is the main container of the textual content in this example. Most of the time, this tag is a `<main>` or an `<article>` HTML element.

`lvlX` selectors should use the standard title tags like `h1`, `h2`, `h3`, etc. You can also use static classes. Set a unique `id` or `name` attribute to these elements.

Every searchable `lvl` elements outside this main documentation container (for instance, in a sidebar) must be `global` selectors. They will be globally picked up and injected to every document built from your page.

If you use VuePress for your documentation, you can check out the [configuration file](https://github.com/meilisearch/documentation/blob/master/.vuepress/docs-scraper/docs-scraper.config.json) we use in production. In our case, the main container is `theme-default-content` and the selector the titles and sub-titles are `h1`, `h2`...

### Run the Scraper

You can run the scraper with Docker. With our local MeiliSearch instance set up at the first step, we run:

```bash
$ docker run -t --rm \
    --network=host \
    -e MEILISEARCH_HOST_URL='http://localhost:7700' \
    -e MEILISEARCH_API_KEY='myMasterKey' \
    -v <absolute-path-to-your-config-file>:/docs-scraper/config.json \
    getmeili/docs-scraper:latest pipenv run ./docs_scraper config.json

```

> **Note:** If you don't want to use Docker, here are [other ways to run the scraper](https://github.com/meilisearch/docs-scraper#installation-and-usage).

`<absolute-path-to-your-config-file>` should be the **absolute** path of your configuration file defined at the previous step.

The API key you must provide should have the permissions to add documents into your MeiliSearch instance. In a production environment, we recommend providing the private key instead of the master key, as it is safer and it has enough permissions to perform such requests.

_More about [MeiliSearch authentication](https://docs.meilisearch.com/reference/features/authentication.html)._

> **Tip:** We recommend running the scraper at each new deployment of your documentation, [as we do for the MeiliSearch's one](https://github.com/meilisearch/documentation/blob/master/.github/workflows/gh-pages-scraping.yml).

Integrate the Search Bar
------------------------

If your documentation is not a VuePress application, you can skip the "For a VuePress Documentation" section and go directly to "For All Kinds of Documentation".

### For a VuePress Documentation

If you use VuePress for your documentation, we provide a [VuePress plugin](https://github.com/meilisearch/vuepress-plugin-meilisearch). This plugin is used in production in the MeiliSearch documentation.

![VuePress plugin example](https://unable-actionable-car.media.strapiapp.com/vuepress_plugin_example_ba1e4b4668.png)

VuePress plugin example

In your VuePress project:

```bash
$ yarn add vuepress-plugin-meilisearch
# or
$ npm install vuepress-plugin-meilisearch

```

In your `config.js` file:

```js
module.exports = {
  plugins: [
    [
      "vuepress-plugin-meilisearch",
      {
        "hostUrl": "<your-meilisearch-host-url>",
        "apiKey": "<your-meilisearch-api-key>",
        "indexUid": "docs"
      }
    ],
  ],
}

```

The `hostUrl` and the `apiKey` fields are the credentials of the MeiliSearch instance. Following on from this tutorial, they are respectively `http://localhost:7700` and `myMasterKey`.

`indexUid` is the index identifier in your MeiliSearch instance in which your website content is stored. It has been defined in the config file.

These three fields are mandatory, but more [optional fields are available](https://github.com/meilisearch/vuepress-plugin-meilisearch#customization) to customize your search bar.

> **Warning:** Since the configuration file is public, we strongly recommend providing the MeiliSearch public key in a production environment, which is enough to perform search requests.  
>   
> Read more about [MeiliSearch authentication](https://docs.meilisearch.com/reference/features/authentication.html#authentication).

### For All Kinds of Documentation

If you don't use VuePress for your documentation, we provide a [front-end SDK](https://github.com/meilisearch/docs-searchbar.js) to integrate a powerful and relevant search bar to any documentation website.

![docs-searchbar.js example](https://unable-actionable-car.media.strapiapp.com/docs_searchbar_example_83b1557e12.png)

docs-searchbar.js example

```html
<!DOCTYPE html>
<html>
  <head>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/docs-searchbar.js@{version}/dist/cdn/docs-searchbar.min.css" />
  </head>

  <body>
    <input type="search" id="search-bar-input">
    <script src="https://cdn.jsdelivr.net/npm/docs-searchbar.js@{version}/dist/cdn/docs-searchbar.min.js"></script>
    <script>
      docsSearchBar({
        hostUrl: '<your-meilisearch-host-url>',
        apiKey: '<your-meilisearch-api-key>',
        indexUid: 'docs',
        inputSelector: '#search-bar-input',
        debug: true // Set debug to true if you want to inspect the dropdown
      });
    </script>
  </body>
</html>

```

The `hostUrl` and the `apiKey` fields are the credentials of the MeiliSearch instance. Following on from this tutorial, they are respectively `http://localhost:7700` and `myMasterKey`.

`indexUid` is the index identifier in your MeiliSearch instance in which your website content is stored. It has been defined in the config file.  
`inputSelector` is the `id` attribute of the HTML search input tag.

> **Warning:** We strongly recommend providing the MeiliSearch public key in a production environment, which is enough to perform search requests.  
> Read more about [MeiliSearch authentication](https://docs.meilisearch.com/reference/features/authentication.html).

The default behavior of this library fits perfectly for a documentation search bar, but you might need [some customizations](https://github.com/meilisearch/docs-searchbar.js#customization).

> **Note:** For more concrete examples, you can check out this [basic HTML file](https://github.com/meilisearch/docs-searchbar.js/blob/master/scripts/playground.html) or [this more advanced Vue file](https://github.com/meilisearch/vuepress-plugin-meilisearch/blob/master/MeiliSearchBox.vue).

What's next?
------------

At this point you should have a working search engine on your website, congrats! 🎉

You can check [this tutorial](https://docs.meilisearch.com/running-production/) if you now want to run MeiliSearch in production!

Meilisearch latest news and company updates

Meilisearch vs Elasticsearch

Navigating search results: pagination vs infinite scroll vs load more

How to integrate a relevant search bar to your documentation