Installation
On this page
You are currently reading the documentation for InstantSearch.js V3. Read our migration guide to learn how to upgrade from V2 to V3. You can still find the V2 documentation here.
Installing 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 the built version of InstantSearch.js from the jsDeliver CDN:
1
2
<script src="https://cdn.jsdelivr.net/npm/algoliasearch@3.33.0/dist/algoliasearchLite.min.js" integrity="sha256-3Laj91VXexjTlFLgL8+vvIq27laXdRmFIcO2miulgEs=" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/instantsearch.js@3.4.0/dist/instantsearch.production.min.js" integrity="sha256-pM0n88cBFRHpSn0N26ETsQdwpA7WAXJDvkHeCLh3ujI=" crossorigin="anonymous"></script>
The jsDeliver CDN is highly available with over 110 locations in the world.
You will then have access to the instantsearch function in the global scope (window).
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
const searchClient = algoliasearch('YourApplicationID', 'YourSearchOnlyAPIKey');
const search = instantsearch({
indexName: 'demo_ecommerce',
searchClient,
});
search.addWidget(
instantsearch.widgets.searchBox({
container: '#searchbox',
})
);
search.addWidget(
instantsearch.widgets.hits({
container: '#hits',
})
);
search.start();
With a build system
If you have a JavaScript build system, you can install InstantSearch.js from npm:
1
npm install algoliasearch instantsearch.js
Then in your module, you can load the main package:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
const algoliasearch = require('algoliasearch/lite');
const instantsearch = require('instantsearch.js').default;
const searchClient = algoliasearch('YourApplicationID', 'YourSearchOnlyAPIKey');
const search = instantsearch({
indexName: 'demo_ecommerce',
searchClient,
});
search.addWidget(
instantsearch.widgets.searchBox({
container: '#searchbox',
})
);
search.addWidget(
instantsearch.widgets.hits({
container: '#hits',
})
);
search.start();
or if you are using ES modules:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
import algoliasearch from 'algoliasearch/lite';
import instantsearch from 'instantsearch.js';
import { searchBox, hits } from 'instantsearch.js/es/widgets';
const searchClient = algoliasearch('YourApplicationID', 'YourSearchOnlyAPIKey');
const search = instantsearch({
indexName: 'demo_ecommerce',
searchClient,
});
search.addWidget(
searchBox({
container: "#searchbox"
})
);
search.addWidget(
hits({
container: "#hits"
})
);
search.start();
Load the style
Afterwards, you need to manually load the companion CSS file into your page:
1
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/instantsearch.css@7.3.1/themes/reset-min.css" integrity="sha256-t2ATOGCtAIZNnzER679jwcFcKYfLlw01gli6F6oszk8=" crossorigin="anonymous">
Or you can load into your page the Algolia theme for the widgets to be styled.
1
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/instantsearch.css@7.3.1/themes/algolia-min.css" integrity="sha256-HB49n/BZjuqiCtQQf49OdZn63XuKFaxcIHWf0HNKte8=" crossorigin="anonymous">
You can find more information about that in the styling guide.
Create InstantSearch App
You can use create-instantsearch-app. Similarly to other interactive command line applications, you can run it either with npm or with yarn:
1
2
3
npx create-instantsearch-app 'getting-started'
# or
yarn create instantsearch-app 'getting-started'
Browser support
We support the last two versions of major browsers (Chrome, Edge, Firefox, Safari).
To support IE11, we recommend using polyfill.io. Add this script to your page to conditionally load polyfills:
1
<script src="https://polyfill.io/v3/polyfill.min.js?features=default,Array.prototype.find,Array.prototype.includes"></script>
