Vanilla JS InstantSearch for web
A computer on a search page, with recommendations being inserted on the side

What is Algolia

Algolia is a hosted, API-first platform used to build world-class search & discovery experiences. 

Start building quickly using libraries for every major language and framework. Scale your solution with a platform that serves over 85 billion queries for more than 13k customers every month.

Algolia UI Components - Instantsearch Vanilla JS

Add instant-search to javascript applications

Vanilla JS InstantSearch UI library is 

  • Pre-built, customizable and flexible UI widgets to create your own search experiences -  explore the widget showcase
  • Has server side rendering and routing capabilities
  • Open source, production-ready and maintained by Algolia 

Features

  • Provides pre-built UI components following best practice principles for Vanilla JS that remain independent from external frameworks
  • Integrate into your existing UI or app, or use InstantSearch templates
  • Comes with a default CSS theme, completely customizable
  • Manages all business logic for search requests, responses, and states
  • Progressive customization of components (use, extend, or customize)

Version

  • Compatible with all current versions of the underlying JavaScript library
  • Code is entirely open source and available on GitHub
  • Bootstrap your application, with create-instantsearch-app, NPM, ...

Related Integrations

Key links


Get started

HTML (get a free account here)

1<div class="ais-InstantSearch">
2  <h1>InstantSearch.js e-commerce demo</h1>
3
4  <div class="left-panel">
5    <div id="clear-refinements"></div>
6
7    <h2>Brands</h2>
8    <div id="brand-list"></div>
9  </div>
10
11  <div class="right-panel">
12    <div id="searchbox"></div>
13    <div id="hits"></div>
14    <div id="pagination"></div>
15  </div>
16</div>

CSS

1body { font-family: sans-serif; padding: 1em; }
2.ais-SearchBox { margin: 1em 0; }
3.ais-Pagination { margin-top: 1em }
4.left-panel { float: left; width: 250px; }
5.right-panel { margin-left: 260px; }

Search

1search.addWidgets([
2  instantsearch.widgets.hits({
3    container: '#hits',
4    templates: {
5      item: `
6        <div>
7          <img src="{{image}}" align="left" alt="{{name}}" />
8          <div class="hit-name">
9            {{#helpers.highlight}}{ "attribute": "name" }{{/helpers.highlight}}
10          </div>
11          <div class="hit-description">
12            {{#helpers.highlight}}{ "attribute": "description" }{{/helpers.highlight}}
13          </div>
14          <div class="hit-price">\${{price}}</div>
15        </div>
16      `,
17    },
18  })
19]);
Get started for freeExplore all developer docs

Built with Vanilla JS on Algolia

Showcase
Sample Applications

Autocomplete with InstantSearch

Create a typeahead experience using Autocomplete and InstantSearch library

  • javascript
  • nodejs