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

What is Algolia

Algolia empowers modern developers to build world class search and discovery experiences without any DevOps. 

Libraries with every major language and framework make it easy to enrich your users' experiences. 

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