How to install InstantSearch.js
On this page
You can use InstantSearch.js either with a direct link in your web page or with a packaging system.
With a packaging system
If you have a JavaScript build tool, 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
import { liteClient as 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.addWidgets([
searchBox({
container: "#searchbox"
}),
hits({
container: "#hits"
})
]);
search.start();
Directly in your page
This method uses the version of InstantSearch.js from the jsDelivr CDN:
1
2
<script src="https://cdn.jsdelivr.net/npm/algoliasearch@4.24.0/dist/algoliasearch-lite.umd.js" integrity="sha256-b2n6oSgG4C1stMT/yc/ChGszs9EY/Mhs6oltEjQbFCQ=" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/instantsearch.js@4.75.6/dist/instantsearch.production.min.js" integrity="sha256-DuvNCzkn3zdi0M6ISr57tX37YCcb7ezs9WK3lqUEe3Q=" crossorigin="anonymous"></script>
The jsDelivr 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
const searchClient = algoliasearch('YourApplicationID', 'YourSearchOnlyAPIKey');
const search = instantsearch({
indexName: 'demo_ecommerce',
searchClient,
});
search.addWidgets([
instantsearch.widgets.searchBox({
container: '#searchbox',
}),
instantsearch.widgets.hits({
container: '#hits',
})
]);
search.start();
Load the styles
You then need to manually load the companion CSS file into your page:
1
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/instantsearch.css@8.5.1/themes/reset-min.css" integrity="sha256-KvFgFCzgqSErAPu6y9gz/AhZAvzK48VJASu3DpNLCEQ=" crossorigin="anonymous">
Or you can load the satellite theme widget styles into your page.
1
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/instantsearch.css@8.5.1/themes/satellite-min.css" integrity="sha256-woeV7a4SRDsjDc395qjBJ4+ZhDdFn8AqswN1rlTO64E=" crossorigin="anonymous">
You can find more information in the styling guide.
With the create-instantsearch-app
CLI
Alternatively, you can use create-instantsearch-app
to instantly set up a working InstantSearch boilerplate. Similar to other interactive command-line applications, you run it either with npm
or with yarn
:
1
2
3
npx create-instantsearch-app@latest 'getting-started'
# or
yarn create instantsearch-app 'getting-started'
To launch the app, type inside your terminal:
1
2
cd getting-started
npm start # or yarn start
Browser support
The code samples used in this documentation use JavaScript syntax not natively supported by older browsers like Internet Explorer 11. If your site needs to support older browsers, make sure to use a tool like Babel to transform your code into code that works in the browsers you target.
Algolia supports the last two versions of the major browsers: Chrome, Edge, Firefox, Safari.
To support Internet Explorer 11 you need polyfills for:
Array.prototype.find
, Array.prototype.includes
, Promise
, Object.entries
, and Object.assign
.