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.

How it works

Searchkit uses Elasticsearch and provides an API that allows you to build a search experience with Algolia Instantsearch.

overview

Searchkit provides two public libraries:

  • API Node API which transforms instantsearch requests into Elasticsearch queries
  • instantsearch-client that integrates with the instantsearch library and the Searchkit's SDK.

With Searchkit's API, you'll be able to use instantsearch frameworks to quickly build great search experiences with Elasticsearch.

How you can use it

Once you have indexed your data in Elasticsearch, you can use Searchkit and instantsearch to query your data and display it in your app.

Install the package

Installing both the API and instantsearch-client is easy. You can install them with npm or yarn.

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

Setup an API

This creates an API which transforms the instantsearch requests sent from the browser into Elasticsearch queries and transforms the responses into instantsearch results.

import API from "@searchkit/api";
import { NextApiRequest, NextApiResponse } from "next";
 
const api = API({
  connection: {
    host: "<elasticsearch-host>",
    apiKey: "<api-key>", // optional
  },
  search_settings: {
    highlight_attributes: ["title", "actors"],
    search_attributes: ["title", "actors"],
    result_attributes: ["title", "actors"],
    facet_attributes: ["type", "rated"],
  },
});
 
// example API handler for Next.js
export default async function handler(
  req: NextApiRequest,
  res: NextApiResponse
) {
  const results = await api.handleRequest(req.body);
  res.send(results);
}

Setup the Frontend

Using InstantSearch and the instantsearch-client is as simple as adding this JavaScript code to your page:

import React from "react";
import ReactDOM from "react-dom";
import Client from "@searchkit/instantsearch-client";
import { InstantSearch, SearchBox, Hits } from "react-instantsearch-dom";
 
const searchClient = Client({
  url: "/api/search", // API url
});
 
const App = () => (
  <InstantSearch indexName="bestbuy" searchClient={searchClient}>
    <SearchBox />
    <Hits />
  </InstantSearch>
);
 
export default App;

IMDB Movies Example

Demo site running Instantsearch React and Elasticsearch: https://beta.searchkit.co/demo

Found a Bug?

Not all features of Instantsearch is supported so you may encounter issues. If you do encounter issues or missing features, please submit an issue!