{"id":18711888,"url":"https://github.com/algolia/instantsearch-electron","last_synced_at":"2025-06-19T15:43:54.041Z","repository":{"id":66050849,"uuid":"79890761","full_name":"algolia/instantsearch-electron","owner":"algolia","description":"A boilerplate for building desktop React InstantSearch apps with Electron","archived":false,"fork":false,"pushed_at":"2023-03-04T08:10:00.000Z","size":4074,"stargazers_count":15,"open_issues_count":1,"forks_count":5,"subscribers_count":75,"default_branch":"master","last_synced_at":"2025-04-25T11:53:18.364Z","etag":null,"topics":["algolia","electron","instantsearch","react"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/algolia.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null}},"created_at":"2017-01-24T07:58:58.000Z","updated_at":"2024-10-31T13:16:51.000Z","dependencies_parsed_at":"2023-03-13T20:31:04.081Z","dependency_job_id":null,"html_url":"https://github.com/algolia/instantsearch-electron","commit_stats":null,"previous_names":[],"tags_count":36,"template":false,"template_full_name":null,"purl":"pkg:github/algolia/instantsearch-electron","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/algolia%2Finstantsearch-electron","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/algolia%2Finstantsearch-electron/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/algolia%2Finstantsearch-electron/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/algolia%2Finstantsearch-electron/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/algolia","download_url":"https://codeload.github.com/algolia/instantsearch-electron/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/algolia%2Finstantsearch-electron/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":260781705,"owners_count":23062287,"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","electron","instantsearch","react"],"created_at":"2024-11-07T12:40:43.037Z","updated_at":"2025-06-19T15:43:49.027Z","avatar_url":"https://github.com/algolia.png","language":"JavaScript","funding_links":[],"categories":["JavaScript","Libraries \u0026 Tools"],"sub_categories":[],"readme":"# instantsearch-electron\n\n**A boilerplate for building desktop React InstantSearch apps with Electron**\n\nThis boilerplate includes everything you need to create an instant search experience that runs as a native desktop application. It combines the power of [React InstantSearch](https://community.algolia.com/instantsearch.js/react/) with [Electron](http://electron.atom.io/), as well as several other hand-picked technologies that make desktop app development a breeze.\n\n![Screenshot of an instantsearch-electron app](https://d17oy1vhnax1f7.cloudfront.net/items/2X140E1T2A001i2r3i0h/Screenshot%202017-02-07%2011.16.22.png)\n*The example application, a search for quotes faceted by nationality and author*\n\n[React InstantSearch](https://community.algolia.com/instantsearch.js/react/) is a set of components and patterns for building a powerful search experience that includes facets, filters, pagination and many other refinements. React InstantSearch is an [Algolia Community](https://community.algolia.com/) project with official support from [Algolia](https://algolia.com).\n\nThis project is based on the excellent [electron-react-boilerplate](https://github.com/chentsulin/electron-react-boilerplate) project, which includes support for hot reloading in dev all the way to releases and auto-updates. For information about how to work with this boilerplate in detail, please see the [electron-react-boilerplate README](https://github.com/chentsulin/electron-react-boilerplate). Except for some basics, the documentation in this README will be focused on the modifications to the boilerplate to add React InstantSearch functionality.\n\n## Install\n\nFirst, clone the repo via git:\n\n```bash\ngit clone https://github.com/algolia/instantsearch-electron.git your-project-name\n```\n\nAnd then install dependencies.\n**ProTip**: Install with [yarn](https://github.com/yarnpkg/yarn) for faster and safer installation\n\n```bash\n$ cd your-project-name \u0026\u0026 npm install\n```\n\n## Run\n\nRun these two commands __simultaneously__ in different console tabs.\n\n```bash\n$ npm run hot-server\n$ npm run start-hot\n```\n\nor run two servers with one command\n\n```bash\n$ npm run dev\n```\n\n## Packaging\n\nTo package apps for the local platform:\n\n```bash\n$ npm run package\n```\n\nYou will find the created app in the `release` directory.\n\nTo run a non-development build of the app without packaging run:\n\n```bash\n$ npm run build\n$ npm start\n```\n\n## Features\n\n+ Window position and size are remembered between restarts.\n+ The state of the search is remembered between restarts. This is done by saving the URL of the Chromium window each time a search state change is published. The goal of remembering state is to have an opening and closing experience that is seamless to the user and feels native.\n+ The example app, a search for famous quotes, contains a search box, 2 refinement lists for faceting, and a custom template for rendering hits. There are many more [React InstantSearch widgets](https://community.algolia.com/instantsearch.js/react/widgets/InstantSearch.html) available.\n\n## Customization\n\nReact InstantSearch uses an Algolia index as its data source. You will want to change some parameters in the boilerplate to point to the index you'd like to search. You will need to have created an Algolia account and the index in advance, which you can do right now via [algolia.com](https://algolia.com).\n\nReplace these params in the `Search.js` file with your specific data.\n\n``` js\nconst algoliaAppId = '\u003cmy-app-id\u003e';\nconst algoliaIndexName = '\u003cmy-index-name\u003e';\nconst algoliaAPIKey = '\u003cmy-api-key\u003e';\n```\n\nThen, be sure to change the properties of the `\u003cHits/\u003e` widget and `\u003cRefinementList /\u003e` widget(s) to match the relevant attributes of your data model.\n\nThis is the Hit template for the example quotes app. For your app you will modify this to display the results as you like.\n\n``` jsx\nconst Hit = ({ hit }) =\u003e\n  \u003cdiv className=\"hit\"\u003e\n    \u003cdiv className=\"quote-text\"\u003e\n      \"\u003cHighlight attributeName=\"quote\" hit={hit} /\u003e\"\n    \u003c/div\u003e\n    \u003cdiv className=\"additional-info\"\u003e\n      \u003cdiv className=\"author\"\u003e\u003cHighlight attributeName=\"author\" hit={hit} /\u003e\u003c/div\u003e\n      \u003cdiv\u003e{hit.nationality}\u003c/div\u003e\n      \u003cdiv\u003e{hit.deathDate || hit.deathDate}\u003c/div\u003e\n      \u003cdiv className=\"keywords\"\u003e\u003cHighlight attributeName=\"keywords\" hit={hit} /\u003e\u003c/div\u003e\n    \u003c/div\u003e\n  \u003c/div\u003e;\n```\n\n## Source Code\n\nThe primary logic for the search is in [app/components/Search.js](app/components/Search.js). The render method looks like this:\n\n``` jsx\nrender() {\n    return (\n      \u003cInstantSearch\n        appId={algoliaAppId} apiKey={algoliaAPIKey} indexName={algoliaIndexName}\n        searchState={this.state.searchState}\n        onSearchStateChange={this.onSearchStateChange.bind(this)}\n        createURL={this.createURL.bind(this)}\n      \u003e\n        \u003cdiv className=\"window\"\u003e\n          \u003cdiv className=\"window-content\"\u003e\n            \u003cdiv className=\"pane-group\"\u003e\n              \u003cdiv className=\"pane-sm sidebar\"\u003e\n                \u003cul className=\"list-group\"\u003e\n                  \u003cli className=\"list-group-header\"\u003e\n                    \u003cSearchBox translations={{ placeholder: 'Search...' }} /\u003e\n                  \u003c/li\u003e\n                  \u003cli className=\"list-group-item\"\u003e\n                    \u003cRefinementList attributeName=\"nationality\" /\u003e\n                  \u003c/li\u003e\n                  \u003cli className=\"list-group-item\"\u003e\n                    \u003cRefinementList attributeName=\"author\" /\u003e\n                  \u003c/li\u003e\n                  \u003cdiv className=\"ais-PoweredBy__root\"\u003e\n                    Powered by Algolia\n                  \u003c/div\u003e\n                \u003c/ul\u003e\n              \u003c/div\u003e\n              \u003cdiv className=\"pane\"\u003e\n                \u003cheader className=\"toolbar toolbar-header\"\u003e\n                  \u003cdiv className=\"toolbar-actions\"\u003e\n                    \u003cClearAll /\u003e\n                  \u003c/div\u003e\n                \u003c/header\u003e\n                \u003cdiv className=\"after-header\"\u003e\n                  \u003cdiv className=\"hits\"\u003e\n                    \u003cHits hitComponent={Hit} /\u003e\n                  \u003c/div\u003e\n                \u003c/div\u003e\n              \u003c/div\u003e\n            \u003c/div\u003e\n          \u003c/div\u003e\n        \u003c/div\u003e\n      \u003c/InstantSearch\u003e\n    );\n  }\n```\n\nThe primary CSS file is at [app/app.global.css](app/app.global.css).\n\n\n## Photon Kit\n\nThis boilerplate includes styles and icon fonts from the excellent [Photon](http://photonkit.com/) project. Photon's HTML and CSS helps make your Electron app look and feel native. You can find the Photon components in the [app/assets/photon](app/assets/photon) folder of the boilerplate.\n\n## Contributing\n\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Falgolia%2Finstantsearch-electron","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Falgolia%2Finstantsearch-electron","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Falgolia%2Finstantsearch-electron/lists"}