Guides Use InstantSearch.js

Edit this page

Use InstantSearch.js

InstantSearch.js can be used either with a direct link in your webpage or with a packaging system.

Directly in your page

This method uses built bersion of InstantSearch.js from the jsDeliver CDN:

<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/instantsearch.js@2.0.0/dist/instantsearch.min.css">
<script src="https://cdn.jsdelivr.net/npm/instantsearch.js@2.0.0/dist/instantsearch.min.js"></script>

We also provide you a default Algolia theme for the widgets to be effectively styled:

<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/instantsearch.js@2.0.0/dist/instantsearch-theme-algolia.min.css">

You will then have access to the instantsearch function in the global scope (window).

The jsDeliver CDN is highly available with over 110 locations in the world.

With a build system

If you have a JavaScript build system, you can install InstantSearch.js from NPM:

npm install instantsearch.js --save
# or
yarn add instantsearch.js

Then in your module, you can load the main package:

const instantsearch = require('instantsearch.js');

or if you are using ES modules:

import instantsearch from 'instantsearch.js';

Afterwards, you need to manually load the companion CSS file into your page.

You can also load into your page the Algolia default theme for the widgets to be styled.

Optimize your build with tree shaking

If you are using webpack2+ or rollup as build system, you are elligible for tree shaking.

Tree shaking is a term commonly used in the JavaScript context for dead-code elimination, or more precisely, live-code import. (You can read more about tree shaking in webpack documentation).

With InstantSearch.js itโ€™s really simple to use, the example speaks for itself:

// instantsearch() function without reference to the widgets or connectors
import instantsearch from 'instantsearch.js/es';

// import connectors individually
import {connectSearchBox} from 'instantsearch.js/es/connectors';

// import widgets individually
import {searchBox} from 'instantsearch.js/es/widgets';

const search = instantsearch({ ... });

search.addWidget(searchBox({ ... }));
search.addWidget(connectSearchBox(function() { ... })({ ... }))