Elasticsearch Search UI Components

Searchkit is an open source library which helps you build a great search experience with Elasticsearch.

Works with React, Vue, Angular, and more.

import Searchkit from "searchkit"
import Client from '@searchkit/instantsearch-client'
import { InstantSearch, SearchBox, Hits, RefinementList, Pagination, RangeInput } from 'react-instantsearch';
 
const sk = new Searchkit({
  connection: {
    host: 'http://localhost:9200',
    // cloud_id: "elastic-cloud-id",
    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);
 
export default function Web() {
    return (
      <InstantSearch
        indexName="imdb_movies"
        searchClient={searchClient}
      >
        <SearchBox />
        <div className="left-panel">
          <RefinementList attribute="actors" searchable={true} limit={10} />
          <RangeInput attribute="imdbrating" />
        </div>
        <div className="right-panel">
          <Hits />
          <Pagination />
        </div>
      </InstantSearch>
    );
}
 

Build Search Experiences Fast!

Searchkit uses instantsearch, which means you can use the instantsearch libraries to build your search experience.

Polyfill for Algolia

Use Instantsearch Frontend Libraries with Elasticsearch. Components for React, Vue, Angular and Javascript.

Read More →

Semantic Search Support

Use NLP to build a semantic search experience with Elasticsearch.

Read More →

Autocomplete.js Compatible

Build an autocomplete experience with Autocomplete.js, which is compatible with Searchkit.

Read More →

Geo Search Components

Build a geo search experience with Google Maps.

Read More →

Full Power of Elasticsearch

Searchkit is built on top of Elasticsearch, which means you can use the Elasticsearch query language to build your search experience.

Request Hooks

Customize the query before and after it is sent to Elasticsearch. Allows you to add custom filters, or change the query DSL easily.

Read More →

Customise Query

Allows you to build your own scoring query using the Elasticsearch query language.

Read More →

Nested Field Support

Support for nested fields, for data models that require joins.

Read More →

Custom Facet Aggregations

Build your own Facets using Elasticsearch aggregations.

Read More →

Query rules make relevance simple

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.

Boosting or exclude results

Trigger a boost or exclude results based on a set of query, filter or context conditions.

Read More →

Pin or bury results

Pin results to the top of the search results when they match a query.

Read More →

Show, order and hide facets

Hide or show or order facets depending on what they are searching for or which filters they are applying.

Read More →

5 minute Video Tutorial

Do I need to expose Elasticsearch to the public internet?

No you don't. You can use Searchkit API to proxy requests to Elasticsearch. The XHR requests will provide the search state to the Searchkit Node API, which will then transform the request into elasticsearch queries and perform them 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.

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.

Which version of Elasticsearch is supported?

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

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.

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.


Apache 2.0 2024 © Joseph McElroy.
Need help? Join discord