We’re very excited to announce the launch of instantsearch.js, our new library of UI widgets to help you build the best instant-search experience with Algolia’s hosted search API.
So how does this library change search?
Our mission at Algolia is to make sure any website or application has the best search experience. But we don’t want to make this only available to developers with extensive coding knowledge. Which leads us to the second part of our mission—making great search available to everyone. This is where instantsearch.js comes into play.
With this new library, we’re separating the logic and design of search, empowering developers and designers alike to create unique search experiences.
When building or adding an instant-search experience to your website, you can now think in terms of end results and how pages will look and feel, rather than having to carefully create and refine an Algolia query.
tl;dr; Using instantsearch.js, you can:
- Build an instant-search UI faster than ever
- Focus entirely on building the UI, forget about the complex code
- Plug and play—everything is included in one library
How did we get here?
There are two ways to implement Algolia on the front end. The first way is with an autocompletion menu.
This kind of UI can be broken down into two elements: the text input and the search suggestions. As the user types, the search suggestion list refreshes and refines, providing the user with only the most relevant results.
The second way, what we like to refer to as instant search, is more difficult to implement as it is made up of multiple elements such as search filters, results and pagination that interact with one another. And you have to glue them together manually.
- You need to fully understand the whole tutorial code.
- You can’t easily configure individual components.
- Once you’ve copied and pasted the code into your implementation, you won’t automatically get important updates from our engineers.
We really needed a solution that offered much more guidance in terms of building out a great search UI. So, to overcome these limitations and make implementing instant search easier for everyone, we started working toward a more universal solution—instantsearch.js.
With instantsearch.js, we propose a simple and powerful API that allows our users to build a complete search experience simply by mapping parts of the UI to components of the instant search via a series of widgets.
Widgets are essentially the UI components that deal with either the input of the search (such as the searchBox or refinementList widgets) or the output of the search (such as the hits widget). The instantsearch.js library includes a set of core widgets, but you can also build and implement your own. Here are some custom widgets we created to inspire the community.
As with most of our projects, the instantsearch.js code is entirely open source and available on GitHub. If you’d like to contribute, please jump on in!
Ready to start building your own instant-search experience?