Great search experiences, made easy.

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

Works with React, Vue, Angular, and more.

Website | Demos | Documentation | Discord

Searchkit to simplify using Elasticsearch for Search:

• Support for Edge Function Platforms like Cloudflare and Vercel Edge functions to proxy Elasticsearch requests.
• Integrates with Instantsearch UI components for React, Vue, Angular, and more
• A great Search experience without needing to be an expert in Elasticsearch

Quick Start

Either install via npm or yarn

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

or via CDN

<script src="https://cdn.jsdelivr.net/npm/@searchkit/instantsearch-client@latest"></script>
<script src="https://cdn.jsdelivr.net/npm/instantsearch.js@4"></script>
<script src="https://cdn.jsdelivr.net/npm/searchkit@latest"></script>

Usage

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

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

// import your InstantSearch components
import { InstantSearch, SearchBox, Hits, RefinementList, Pagination, NumericMenu } from 'react-instantsearch-dom';

const sk = new Searchkit({
  connection: {
    host: 'http://localhost:9200'
  },
  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(searchkitClient);

const App = () => (
  <InstantSearch
    indexName="imdb_movies"
    searchClient={searchClient}
  >
    <SearchBox />
    <div className="left-panel">
      <RefinementList attribute="actors" searchable={true} limit={10} />
      <NumericMenu
        attribute="imdbrating"
        items={[
          { label: '5 - 7', start: 5, end: 7 },
          { label: '7 - 9', start: 7, end: 9 },
          { label: '>= 9', start: 9 },
        ]}
      />
    </div>
    <div className="right-panel">
      <Hits />
      <Pagination />
    </div>
  </InstantSearch>
}

Video Tutorials

• Searchkit Intro Video with Instantsearch.js - https://www.youtube.com/watch?v=R6iYpEuCdVs
• Searchkit Proxy - https://www.youtube.com/watch?v=8ztvn1-VZ_U

Proxy Elasticsearch

In above example, we are calling Elasticsearch directly from the browser. This is not recommended for production use. Instead, you should use the Searchkit API to proxy requests to Elasticsearch. With Searchkit, you can do this in a few lines of code.

Frontend Changes

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

// import your InstantSearch components
import { InstantSearch, SearchBox, Hits, RefinementList, Pagination, NumericMenu } from 'react-instantsearch-dom';

const searchClient = Client({
    url: "/api/search",
});

const App = () => (
  <InstantSearch
    indexName="imdb_movies"
    searchClient={searchClient}
  >
    <SearchBox />
    <div className="left-panel">
      <RefinementList attribute="actors" searchable={true} limit={10} />
      <NumericMenu
        attribute="imdbrating"
        items={[
          { label: '5 - 7', start: 5, end: 7 },
          { label: '7 - 9', start: 7, end: 9 },
          { label: '>= 9', start: 9 },
        ]}
      />
    </div>
    <div className="right-panel">
      <Hits />
      <Pagination />
    </div>
  </InstantSearch>
}

Backend Changes

Example below using Next.js API Routes. You can also use Cloudflare Workers or Vercel Edge Functions, or any other Node.js server.

import Client from '@searchkit/api'
import { NextApiRequest, NextApiResponse } from 'next'

const client = Client(
  {
    connection: {
      host: 'http://localhost:9200'
    },
    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' }
      ]
    }
  },
  { debug: true }
)

export default async function handler(req: NextApiRequest, res: NextApiResponse) {
  const results = await client.handleRequest(req.body)
  res.send(results)
}

Autocomplete

Searchkit supports autocomplete.js library for autocomplete search.

Example

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"'
    }
  ]
}

NPM Packages

• @searchkit/api Documentation
• @searchkit/instantsearch-client Documentation

Looking for the old Searchkit?

• Searchkit v3 Docs