DEV Community

Cover image for Searchkit - Search UI with GraphQL, React and Elasticsearch
Tomek Poniatowicz for GraphQL Editor

Posted on

Searchkit - Search UI with GraphQL, React and Elasticsearch

The most important part of any web or mobile app is the content it provides. Exchanging data is a fundamental feature of any modern app. What distinguishes a great app from a mediocre one is the quality of accessing & presenting the data. Using API is the most popular way of setting up a communication system between external systems. Building a great API is a complicated process. Fortunately, there are many tools to help us out. One of them is a library called Searchkit.

Searched focused API made easy

Searchkit is a tool allowing you can quickly build a search experience using predefined GraphQL resolvers and React components. Built on the top of Apollo GraphQL, React & Elasticsearch, Searchkit makes building a high-quality API a lot easier. The library provides GraphQL resolvers dedicated to handling the most common use cases you could think of when using filtering oriented API beginning with basic operations such as simple querying, ending on more tricky ones such as efficient facet filtering or pagination.


  • Designed for Search UI - Searchkit's resolvers combined with the power of Elasticsearch & Apollo GraphQL makes it easy to build your search-focused API.
  • Client-oriented - many APIs end up being completely out of touch with the client's actual needs. Searchkit is listened to the needs of the client-side making it super easy to integrate with your web or mobile app.
  • Efficient Search - the library makes the faceted search easy by providing numerous ways of filtering. Text, numbers, dates? They got you covered.
  • Highly Customisable - Searchkit is easily customizable and doesn't make you bound with Elasticsearch, if you prefer to fetch information from different sources you can write your own resolvers. GraphQL makes it super easy to customize the API with your own data without interacting with Searchkit's core.

Out the box React Components

The makers of the Searchikit are motivated by the idea of providing a great search experience for all users, even those not fluent in Elasticsearch & React. For this group of users Searchkit offers an out of the box solution that provides UI components flawlessly working with Searchkit's API. If you are looking for a search solution for your project Searchkit delivers a great search experience in no time by leveraging Elastic's EUI React components.

yarn add @searchkit/client @searchkit/elastic-ui @elastic/eui
Enter fullscreen mode Exit fullscreen mode

Gif presenting Searchkit example


To get more in-depth information on how to start building your API with Searchkit make sure to visit its official documentation and GitHub page. Have fun!

Speed up your GraphQL schema development

GraphQL Editor is a supportive tool for both advanced GraphQL users as well as those taking their first steps with GraphQL APIs. Our all-in-one development environment for GraphQL will help you build, manage & deploy your GraphQL API much faster. Try GraphQL Editor for free!

New features of GraphQL Editor gif

Top comments (0)