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.

Through hundreds of search implementations, we’ve identified and developed best practices for delivering a top-notch search experience. instantsearch.js packages those best practices into a single JavaScript library of UI widgets that you can assemble and customize as you wish.

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.

 

We first presented this instant-search experience to our users in the form of a tutorial featuring a sample project that could be modified to fit their needs. This project was heavily based on our JavaScript helper. Unfortunately, there are several drawbacks to this kind of approach:

• 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.

The tutorial was a solid start, but it was clearly not good enough. The JavaScript helper provided a starting point—an API that simplifies the call to the search engine—but even with all the other moving parts (JavaScript client, jQuery and jQuery plugins), there were still things missing in order to be compatible from a UI perspective.

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?

Get started with our instantsearch.js documentation