Search UI for Elasticsearch & Opensearch. Compatible with Algolia's Instantsearch and Autocomplete components. React & Vue support
Alternatives To Searchkit
Project NameStarsDownloadsRepos Using ThisPackages Using ThisMost Recent CommitTotal ReleasesLatest ReleaseOpen IssuesLicenseLanguage
Searchkit4,6501431616 days ago114July 15, 202325apache-2.0TypeScript
Search UI for Elasticsearch & Opensearch. Compatible with Algolia's Instantsearch and Autocomplete components. React & Vue support
Heyui2,5259154 months ago494March 27, 202260mitVue
🎉UI Toolkit for Web, Vue3.0
Vue Tags Input89251219 months ago35June 30, 201992JavaScript
A tags input component for VueJS
Multiselect69529 days ago38July 11, 202250mitJavaScript
Vue 3 multiselect component with single select, multiselect and tagging options (+Tailwind CSS support).
Vue Autosuggest60831129 months ago58June 22, 202022mitJavaScript
🔍 Vue autosuggest component.
Vue Google Autocomplete4944910a year ago20March 02, 202291mitJavaScript
A Vue.js autosuggest component for the Google Places API.
Vue Simple Suggest457187a month ago50October 12, 202158mitVue
Feature-rich autocomplete component for Vue.js
Vue Excel Editor416
a year ago237October 15, 20226mitVue
Vue2 plugin for displaying and editing the array-of-object in Excel style
Vue Instant415233a year ago18February 28, 201919mitVue
vue instant allows you to easily create custom search controls with auto suggestions for your vue 2 applications.
Autocomplete381148 months ago28May 29, 202068mitJavaScript
Accessible autocomplete component for vanilla JavaScript and Vue.
Alternatives To Searchkit
Select To Compare

Alternative Project Comparisons

Elasticsearch Search UI Components

Searchkit is an open source library which helps you build a great search experience with Elasticsearch. Works with Javascript, React, Vue, Angular, and more.

npm version Discord Shield

Website | Demos | Documentation | Discord

Alt Text

Searchkit provides a Search UI for Elasticsearch or Opensearch. With Searchkit, you can use Instantsearch components like Searchbox, refinement filters and results (and many more!) to build a search experience.

Searchkit is great for anyone who want to build a search experience quickly.

Searchkit simplifies Search UI with Elasticsearch:

  • UI Search Components for React, Vue, Angular, and more
  • Searchkit Node API proxies Elasticsearch requests from the browser.
  • Ability to use Elasticsearch Query DSL for advanced queries


Quick Start Guides


Codesandbox Examples

Code Examples (on Github)

Proxy Elasticsearch Quick Starts

Video Tutorials

Or checkout our documentation for more examples.


Either install via npm or yarn

npm install searchkit @searchkit/api @searchkit/instantsearch-client

or via CDN

<script src=""></script>
<script src=""></script>
<script src=""></script>

Setup Elasticsearch

Searchkit requires Elasticsearch 7.0 or higher or Opensearch 2.4 or higher.

Below we are using Docker to run Elasticsearch.

docker pull
docker network create elastic
docker run --name elasticsearch --net elastic -p 9200:9200 -p 9300:9300 -e "discovery.type=single-node" -e "" -e http.cors.enabled=true -e "http.cors.allow-origin='*'" -e http.cors.allow-headers=X-Requested-With,X-Auth-Token,Content-Type,Content-Length,Authorization -e http.cors.allow-credentials=true -e network.publish_host=localhost -e

then lets add an index and some data

curl --location --request PUT 'http://localhost:9200/products' \
--header 'Content-Type: application/json' \
--data-raw '{
  "mappings": {
    "properties": {
      "name": {
        "type": "text"
      "description": {
        "type": "text"
      "price": {
        "type": "integer"
      "categories": {
        "type": "text",
        "fields": {
          "keyword": {
            "type": "keyword"

curl --location --request POST 'http://localhost:9200/products/_doc' \
--header 'Content-Type: application/json' \
--data-raw '{
  "name": "Apple iPhone 12 Pro Max",
  "description": "The iPhone 12 Pro Max is the most powerful iPhone ever. It has a 6.7-inch Super Retina XDR display, a Ceramic Shield front cover, and a triple-camera system with a LiDAR scanner. It also has a 5G connection, a 6-core CPU, and a 4-core GPU. The iPhone 12 Pro Max is available in 128GB, 256GB, and 512GB storage options.",
  "categories": ["phones", "apple"],
  "price": 800
curl --location --request POST 'http://localhost:9200/products/_doc' \
--header 'Content-Type: application/json' \
--data-raw '{
  "name": "Apple iPhone 12 Pro",
  "description": "The iPhone 12 Pro is the most powerful iPhone ever. It has a 6.1-inch Super Retina XDR display, a Ceramic Shield front cover, and a triple-camera system with a LiDAR scanner. It also has a 5G connection, a 6-core CPU, and a 4-core GPU. The iPhone 12 Pro is available in 128GB, 256GB, and 512GB storage options.",
  "categories": ["phones", "apple"],
  "price": 700

Setup Searchkit

Searchkit compatible with all Instantsearch frameworks. Below is an example using react-instantsearch-hooks-web.

import Searchkit from "searchkit"
import Client from '@searchkit/instantsearch-client'

// import your InstantSearch components
import { InstantSearch, SearchBox, Hits, RefinementList, Pagination, RangeInput } from 'react-instantsearch-hooks-web';

const sk = new Searchkit({
  connection: {
    host: 'http://localhost:9200',
    // with an apiKey
    // apiKey: '##########'
    // with a username/password
    //auth: {
    //  username: "elastic",
    //  password: "changeme"
  search_settings: {
    search_attributes: [{ field: 'title', weight: 3 }, 'actors', 'plot'],
    result_attributes: ['title', 'actors', 'poster', 'plot'],
    highlight_attributes: ['title'],
    facet_attributes: [
      { attribute: 'actors', field: 'actors.keyword', type: 'string' },
      { attribute: 'imdbrating', type: 'numeric', field: 'imdbrating' }

const searchClient = Client(sk);

const App = () => (
    <SearchBox />
    <div className="left-panel">
      <RefinementList attribute="actors" searchable={true} limit={10} />
      <RangeInput attribute="imdbrating" />
    <div className="right-panel">
      <Hits />
      <Pagination />

follow along with the Getting Started guide.

Hide Elasticsearch from the browser

Searchkit Node API allows you to proxy requests to Elasticsearch from the browser. This is useful if you want to hide Elasticsearch from the browser, or if you want to add user permission filters to the query.

Query Customisation

Searchkit has an out the box query builder, but you can also customise the query by passing a getQuery function to the apiClient.

const results = await apiClient.handleRequest(req.body, {
  getQuery: (query, search_attributes) => {
    return [
        combined_fields: {
          fields: search_attributes,

Semantic Query Search

Searchkit supports KNN query search. Below is an example of a KNN query search.

  const results = await client.handleRequest(req.body, {
    getKnnQuery(query, search_attributes, config) {
      return {
        field: 'dense-vector-field',
        k: 10,
        num_candidates: 100,
        // supported in latest version of Elasticsearch
        query_vector_builder: { 
          text_embedding: {
            model_id: 'cookie_model',
            model_text: query

Follow along with the Semantic Search tutorial.

Advanced Customisation

You can also override the entire query with request hooks. Below is an example of a request hook that adds a rescore query to the first search request.

You can apply this at beforeSearch and afterSearch.

  const results = await client.handleRequest(req.body, {
    hooks: {
      beforeSearch: (searchRequests) => {
        const uiRequest = searchRequests[0]
        return [
            body: {
              rescore: {
                window_size: 100,
                query: {
                  rescore_query: {
                    match: {
                      plot: {
                        query: uiRequest.body.query,
                        operator: "and",
                  query_weight: 1,
                  rescore_query_weight: 10,
          searchRequests.slice(1, searchRequests.length)

read more in the api docs here.

Query Rules

Query rules allows you to customize the behavior of the search experience. You can use query rules to boost or filter results, or to change the ranking of results, based on a set of conditions.

Below is an example of a query rule that boosts results for movies with Dan Aykroyd or Charlie Sheen, and filters results to only show movies if the query is the word "movie".

  id: '1',
  conditions: [
        context: 'query',
        value: 'movie',
        match_type: 'exact'
  actions: [
      action: 'QueryBoost',
      query: 'actors:"Dan Aykroyd" OR actors:"Charlie Sheen"',
      weight: 2
      action: 'QueryFilter',
      query: 'type:"movie"'

read more at Query Rules docs.

NPM Packages


Q: Do I need to expose Elasticsearch to the public internet?

Searchkit proxies requests to Elasticsearch.

Searchkit offers both options, either perform the search directly from the browser, or use the Searchkit API to proxy requests to Elasticsearch. Directly from the browser offers great developer experience & prototyping. Once you are ready to deploy, you can use the Searchkit API to proxy requests to Elasticsearch.

Q: Do I need to use React?

You can use React, React Native, Vue, Angular. You dont even need to use a frontend framework, you can use plain Javascript and HTML with instantsearch.js widgets.

Q: Which version of Elasticsearch is supported?

Searchkit is compatible with Elasticsearch 7.0 and above + Opensearch 2.0 and above.

Q: Do you support Android and iOS?

Potentially. Searchkit API mimics the Algolia API, so it should be possible to use the Algolia Instantsearch client with Searchkit API with a few tweaks. If you are interested in this, please let us know.

Q: Why would I use Searchkit instead of Algolia?

Elasticsearch has alot of advantages over Algolia. You might want to use Elasticsearch as a cheaper alternative to Algolia, especially if you have a large dataset. You might want to run Elasticsearch on your own infrastructure, or have greater control over the query relevance.

Popular Vue Projects
Popular Autocomplete Projects
Popular Web User Interface Categories
Related Searches

Get A Weekly Email With Trending Projects For These Categories
No Spam. Unsubscribe easily at any time.