{"id":13422342,"url":"https://github.com/searchkit/searchkit","last_synced_at":"2025-05-14T08:03:53.374Z","repository":{"id":38347113,"uuid":"46511887","full_name":"searchkit/searchkit","owner":"searchkit","description":"React + Vue Search UI for Elasticsearch \u0026 Opensearch. Compatible with Algolia's Instantsearch and Autocomplete components.","archived":false,"fork":false,"pushed_at":"2025-03-15T21:22:59.000Z","size":88253,"stargazers_count":4816,"open_issues_count":43,"forks_count":440,"subscribers_count":86,"default_branch":"main","last_synced_at":"2025-05-07T07:00:03.814Z","etag":null,"topics":["algolia","angular","autocomplete","components","elasticsearch","instantsearch","javascript","nodejs","react","search","typescript","ui","ui-components","vue","web"],"latest_commit_sha":null,"homepage":"http://www.searchkit.co/docs","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"apache-2.0","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/searchkit.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":"CONTRIBUTING.md","funding":null,"license":null,"code_of_conduct":"CODE_OF_CONDUCT.md","threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":"SECURITY.md","support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null}},"created_at":"2015-11-19T18:27:43.000Z","updated_at":"2025-05-02T05:40:50.000Z","dependencies_parsed_at":"2022-07-11T02:51:21.830Z","dependency_job_id":"c630615c-04a0-4eff-99fc-bea56011a46f","html_url":"https://github.com/searchkit/searchkit","commit_stats":{"total_commits":2025,"total_committers":66,"mean_commits":"30.681818181818183","dds":0.4804938271604938,"last_synced_commit":"14f9b5b152ae0da69e8d58b6c52d0563ea69aa03"},"previous_names":[],"tags_count":337,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/searchkit%2Fsearchkit","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/searchkit%2Fsearchkit/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/searchkit%2Fsearchkit/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/searchkit%2Fsearchkit/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/searchkit","download_url":"https://codeload.github.com/searchkit/searchkit/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":253411566,"owners_count":21904151,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["algolia","angular","autocomplete","components","elasticsearch","instantsearch","javascript","nodejs","react","search","typescript","ui","ui-components","vue","web"],"created_at":"2024-07-30T23:00:42.116Z","updated_at":"2025-05-14T08:03:53.329Z","avatar_url":"https://github.com/searchkit.png","language":"TypeScript","readme":"# Elasticsearch Search UI Components\nSearchkit is an open source library which helps you build a great search experience with **Elasticsearch**.\nWorks with Javascript, React, Vue, Angular, and more.\n\n\n[![npm version](https://badge.fury.io/js/searchkit.svg)](https://badge.fury.io/js/searchkit)  ![Discord Shield](https://discordapp.com/api/guilds/778278262304276521/widget.png?style=shield) [![](https://data.jsdelivr.com/v1/package/npm/searchkit/badge)](https://www.jsdelivr.com/package/npm/searchkit)\n\n\n[Website](https://www.searchkit.co/) | [Demos](https://www.searchkit.co/demos) | [Documentation](https://www.searchkit.co/docs/getting-started) | [Discord](https://discord.gg/CRuWmSQZQx)\n\n![Alt Text](apps/web/public/overview.gif)\n\nSearchkit 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.\n\nSearchkit is great for anyone who want to build a search experience quickly.\n\n**Searchkit simplifies Search UI with Elasticsearch:**\n  - UI Search Components for React, Vue, Angular, and more\n  - Searchkit Node API proxies Elasticsearch requests from the browser.\n  - Ability to use Elasticsearch Query DSL for advanced queries\n\n## Searchkit AI Bot\n\n[Searchkit](https://codeparrot.ai/oracle?owner=searchkit\u0026repo=searchkit) Bot will help you understand this repository better. You can ask for code examples, installation guide, debugging help and much more.\n\n\n## Demos\n* [Movies Search](https://www.searchkit.co/demo)\n* [Semantic Search](https://codesandbox.io/p/sandbox/github/searchkit/searchkit/tree/main/examples/with-semantic-search-nextjs)\n* [Geo Search](https://www.searchkit.co/geo-search-demo)\n* [Camp Availability Search](https://www.searchkit.co/camping-sites-demo)\n* [Autocomplete](https://www.searchkit.co/autocomplete)\n\n## Quick Start Guides\n* [Searchkit with Javascript](https://www.searchkit.co/docs/getting-started/with-javascript)\n* [Searchkit with React](https://www.searchkit.co/docs/getting-started/with-react)\n* [Searchkit with Vue](https://www.searchkit.co/docs/getting-started/with-vue)\n* [Searchkit with Angular](https://www.searchkit.co/docs/getting-started/with-angular)\n\n## Tutorials\n* [Searchkit with Next.js](https://www.searchkit.co/tutorials/with-nextjs)\n* [Semantic Search](https://www.searchkit.co/tutorials/semantic-search)\n* [Searchkit with Availability Search](https://www.searchkit.co/tutorials/build-availability-search-ui)\n\n## Codesandbox Examples\n* [Searchkit with JS Widgets](https://codesandbox.io/s/github/searchkit/searchkit/tree/main/examples/with-ui-instantsearchjs)\n* [Searchkit with Vue](https://codesandbox.io/s/github/searchkit/searchkit/tree/main/examples/with-ui-vue)\n* [Searchkit with Next.js](https://codesandbox.io/s/github/searchkit/searchkit/tree/main/examples/with-ui-nextjs-react)\n* [Proxy with Express.js](https://codesandbox.io/s/github/searchkit/searchkit/tree/main/examples/proxy-elasticsearch/with-express-typescript-esm)\n\n## Code Examples (on Github)\n* [Searchkit with Next.JS](https://github.com/searchkit/searchkit/tree/main/examples/with-ui-nextjs-react)\n* [Searchkit with Javascript](https://github.com/searchkit/searchkit/tree/main/examples/with-ui-instantsearchjs)\n* [Searchkit with Vue](https://github.com/searchkit/searchkit/tree/main/examples/with-ui-vue)\n\n## Proxy Elasticsearch Quick Starts\n* [Searchkit with Next.js Functions](https://www.searchkit.co/docs/proxy-elasticsearch/with-next-js)\n* [Searchkit with Cloudflare Workers](https://www.searchkit.co/docs/proxy-elasticsearch/with-cloudflare-workers)\n* [Searchkit with Express.js](https://www.searchkit.co/docs/proxy-elasticsearch/with-express-js)\n\n## Video Tutorials\n* [Searchkit Intro Video Tutorial with Instantsearch.js](https://www.youtube.com/watch?v=R6iYpEuCdVs)\n* [Searchkit Node API Video Tutorial](https://www.youtube.com/watch?v=8ztvn1-VZ_U)\n\nOr checkout our [documentation](https://searchkit.co/docs) for more examples.\n\n## Installation\n\nEither install via npm or yarn\n\n```bash\nnpm install searchkit @searchkit/api @searchkit/instantsearch-client\n```\n\nor via CDN\n\n```html\n\u003cscript src=\"https://cdn.jsdelivr.net/npm/@searchkit/instantsearch-client@latest\"\u003e\u003c/script\u003e\n\u003cscript src=\"https://cdn.jsdelivr.net/npm/instantsearch.js@4\"\u003e\u003c/script\u003e\n\u003cscript src=\"https://cdn.jsdelivr.net/npm/searchkit@latest\"\u003e\u003c/script\u003e\n```\n\n## Setup Elasticsearch\n\nSearchkit requires Elasticsearch 7.0 or higher or Opensearch 2.4 or higher. \n\nBelow we are using Docker to run Elasticsearch.\n\n```bash\ndocker pull docker.elastic.co/elasticsearch/elasticsearch:8.6.2\ndocker network create elastic\ndocker run --name elasticsearch --net elastic -p 9200:9200 -p 9300:9300 -e \"discovery.type=single-node\" -e \"xpack.security.enabled=false\" -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 xpack.security.enabled=false docker.elastic.co/elasticsearch/elasticsearch:8.6.2\n```\n\nthen lets add an index and some data\n\n```bash\ncurl --location --request PUT 'http://localhost:9200/products' \\\n--header 'Content-Type: application/json' \\\n--data-raw '{\n  \"mappings\": {\n    \"properties\": {\n      \"name\": {\n        \"type\": \"text\"\n      },\n      \"description\": {\n        \"type\": \"text\"\n      },\n      \"price\": {\n        \"type\": \"integer\"\n      },\n      \"categories\": {\n        \"type\": \"text\",\n        \"fields\": {\n          \"keyword\": {\n            \"type\": \"keyword\"\n          }\n        }\n      }\n    }\n  }\n}'\n\ncurl --location --request POST 'http://localhost:9200/products/_doc' \\\n--header 'Content-Type: application/json' \\\n--data-raw '{\n  \"name\": \"Apple iPhone 12 Pro Max\",\n  \"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.\",\n  \"categories\": [\"phones\", \"apple\"],\n  \"price\": 800\n}'\n \ncurl --location --request POST 'http://localhost:9200/products/_doc' \\\n--header 'Content-Type: application/json' \\\n--data-raw '{\n  \"name\": \"Apple iPhone 12 Pro\",\n  \"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.\",\n  \"categories\": [\"phones\", \"apple\"],\n  \"price\": 700\n}'\n```\n\n## Setup Searchkit\n\nSearchkit compatible with all Instantsearch frameworks. Below is an example using react-instantsearch.\n\n```tsx\nimport Searchkit from \"searchkit\"\nimport Client from '@searchkit/instantsearch-client'\n\n// import your InstantSearch components\nimport { InstantSearch, SearchBox, Hits, RefinementList, Pagination, RangeInput } from 'react-instantsearch';\n\nconst sk = new Searchkit({\n  connection: {\n    host: 'http://localhost:9200',\n    // with an apiKey\n    // https://www.searchkit.co/docs/guides/setup-elasticsearch#connecting-with-api-key\n    // apiKey: '##########'\n    // with a username/password\n    // https://www.searchkit.co/docs/guides/setup-elasticsearch#connecting-with-usernamepassword\n    //auth: {\n    //  username: \"elastic\",\n    //  password: \"changeme\"\n    //}\n  },\n  search_settings: {\n    search_attributes: [{ field: 'title', weight: 3 }, 'actors', 'plot'],\n    result_attributes: ['title', 'actors', 'poster', 'plot'],\n    highlight_attributes: ['title'],\n    facet_attributes: [\n      { attribute: 'actors', field: 'actors.keyword', type: 'string' },\n      { attribute: 'imdbrating', type: 'numeric', field: 'imdbrating' }\n    ]\n  }\n})\n\nconst searchClient = Client(sk);\n\nconst App = () =\u003e (\n  \u003cInstantSearch\n    indexName=\"imdb_movies\"\n    searchClient={searchClient}\n  \u003e\n    \u003cSearchBox /\u003e\n    \u003cdiv className=\"left-panel\"\u003e\n      \u003cRefinementList attribute=\"actors\" searchable={true} limit={10} /\u003e\n      \u003cRangeInput attribute=\"imdbrating\" /\u003e\n    \u003c/div\u003e\n    \u003cdiv className=\"right-panel\"\u003e\n      \u003cHits /\u003e\n      \u003cPagination /\u003e\n    \u003c/div\u003e\n  \u003c/InstantSearch\u003e\n}\n```\n\nfollow along with the [Getting Started](https://www.searchkit.co/docs/getting-started/with-react) guide.\n\n## Hide Elasticsearch from the browser\n\nSearchkit 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.\n\n* [Searchkit with Next.js Functions](https://www.searchkit.co/docs/proxy-elasticsearch/with-next-js)\n* [Searchkit with Cloudflare Workers](https://www.searchkit.co/docs/proxy-elasticsearch/with-cloudflare-workers)\n* [Searchkit with Express.js](https://www.searchkit.co/docs/proxy-elasticsearch/with-express-js)\n\n## Query Customisation\n\nSearchkit has an out the box query builder, but you can also customise the query by passing a getQuery function to the apiClient.\n\n```ts\nconst results = await apiClient.handleRequest(req.body, {\n  getQuery: (query, search_attributes) =\u003e {\n    return [\n      {\n        combined_fields: {\n          query,\n          fields: search_attributes,\n        },\n      },\n    ];\n  },\n});\n```\n\n### Semantic Query Search\n\nSearchkit supports KNN query search. Below is an example of a KNN query search.\n\n```ts\n  const results = await client.handleRequest(req.body, {\n    getKnnQuery(query, search_attributes, config) {\n      return {\n        field: 'dense-vector-field',\n        k: 10,\n        num_candidates: 100,\n        // supported in latest version of Elasticsearch\n        query_vector_builder: { \n          text_embedding: {\n            model_id: 'cookie_model',\n            model_text: query\n          }\n        }\n      }\n    }\n  });\n  ```\n\nFollow along with the [Semantic Search](https://www.searchkit.co/tutorials/semantic-search) tutorial.\n\n### Advanced Customisation\n\nYou 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.\n\nYou can apply this at `beforeSearch` and `afterSearch`.\n\n```ts\n  const results = await client.handleRequest(req.body, {\n    hooks: {\n      beforeSearch: (searchRequests) =\u003e {\n        const uiRequest = searchRequests[0]\n \n        return [\n          {\n            ...uiRequest,\n            body: {\n              ...uiRequest.body,\n              rescore: {\n                window_size: 100,\n                query: {\n                  rescore_query: {\n                    match: {\n                      plot: {\n                        query: uiRequest.body.query,\n                        operator: \"and\",\n                      },\n                    },\n                  },\n                  query_weight: 1,\n                  rescore_query_weight: 10,\n                }\n              }\n            }\n          },\n          searchRequests.slice(1, searchRequests.length)\n        ]\n        \n      },\n    }\n  });\n  ```\n\nread more in the api docs [here](https://www.searchkit.co/docs/api-documentation/searchkit#requestoptions-hooks).\n\n## Query Rules\n\nQuery 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.\n\nBelow 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\".\n\n```js\n\n{\n  id: '1',\n  conditions: [\n    [\n      {\n        context: 'query',\n        value: 'movie',\n        match_type: 'exact'\n      }\n    ]\n  ],\n  actions: [\n    {\n      action: 'QueryBoost',\n      query: 'actors:\"Dan Aykroyd\" OR actors:\"Charlie Sheen\"',\n      weight: 2\n    },\n    {\n      action: 'QueryFilter',\n      query: 'type:\"movie\"'\n    }\n  ]\n}\n\n```\n\nread more at [Query Rules](https://www.searchkit.co/docs/query-rules) docs.\n\n### NPM Packages\n* Searchkit [Documentation](https://www.searchkit.co/docs/api-documentation/searchkit)\n* @searchkit/api [Documentation](https://www.searchkit.co/docs/api-documentation/api)\n* @searchkit/instantsearch-client [Documentation](https://www.searchkit.co/docs/api-documentation/instantsearch-client)\n\n## FAQ\n\n**Q: Do I need to expose Elasticsearch to the public internet?**\n\nSearchkit proxies requests to Elasticsearch.\n\nSearchkit 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 \u0026 prototyping. Once you are ready to deploy, you can use the Searchkit API to proxy requests to Elasticsearch.\n\n**Q: Do I need to use React?**\n\nYou 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.\n\n**Q: Which version of Elasticsearch is supported?**\n\nSearchkit is compatible with Elasticsearch 7.0 and above + Opensearch 2.0 and above.\n\n**Q: Do you support Android and iOS?**\n\nPotentially. 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.\n\n**Q: Why would I use Searchkit instead of Algolia?**\n\nElasticsearch 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. \n","funding_links":[],"categories":["UI Frameworks","Uncategorized","TypeScript","Cases","Table of Contents","JavaScript","Open-source and free products, based on Elasticsearch","Other Components","Elasticsearch","angular"],"sub_categories":["Responsive","Uncategorized","style","Elastic Certified Engineer","Tools"],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsearchkit%2Fsearchkit","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fsearchkit%2Fsearchkit","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsearchkit%2Fsearchkit/lists"}