Installation

Install InstantSearch for vanilla JavaScript, React, or Vue

InstantSearch is available for three different JavaScript environments. Choose the one that matches your project:

InstantSearch.js

Vanilla JavaScript - framework independent

React InstantSearch

For React 16.8+ applications

Vue InstantSearch

For Vue 2.6+ and Vue 3+ applications

Prerequisites

Before installing InstantSearch, you’ll need:

• Node.js 14+ and npm/yarn/pnpm
• An Algolia account with an application and API keys
• An index with searchable data

Don’t have an Algolia account yet? Sign up for free and get started with 10,000 records and 10,000 search operations per month.

InstantSearch.js (Vanilla JavaScript)

InstantSearch.js is the core library that works with any JavaScript project, regardless of framework.

Package Installation

Install both instantsearch.js and algoliasearch:

npm

npm install instantsearch.js algoliasearch

Package Details

• instantsearch.js (v4.90.0) - The InstantSearch library with widgets and UI components
• algoliasearch (>= 3.1 < 6) - The Algolia search client (peer dependency)

Optional: CSS Themes

InstantSearch comes with pre-built CSS themes. Install the CSS package for ready-to-use styling:

npm

npm install instantsearch.css

Then import a theme in your JavaScript:

import 'instantsearch.css/themes/satellite.css';
// or
import 'instantsearch.css/themes/algolia.css';

CDN Usage

For quick prototyping or simple projects, use the CDN:

<!-- InstantSearch.js -->
<script src="https://cdn.jsdelivr.net/npm/instantsearch.js@4"></script>
<!-- Algolia Search Client -->
<script src="https://cdn.jsdelivr.net/npm/algoliasearch@4/dist/algoliasearch-lite.umd.js"></script>
<!-- CSS Theme -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/instantsearch.css@8/themes/satellite-min.css" />

React InstantSearch

React InstantSearch provides React components and hooks for building search UIs.

Package Installation

npm

npm install react-instantsearch algoliasearch

Package Details

• react-instantsearch (v7.26.1) - React components and hooks
• algoliasearch (>= 3.1 < 6) - The Algolia search client (peer dependency)

Peer Dependencies

Ensure you have the required React versions:

• react >= 16.8.0 < 20
• react-dom >= 16.8.0 < 20

React InstantSearch requires React 16.8+ for hooks support. If you’re using an older version of React, you’ll need to upgrade first.

TypeScript Support

React InstantSearch includes TypeScript definitions out of the box. No additional @types packages are needed.

CSS Themes

Optionally install the CSS package:

npm

npm install instantsearch.css

Import in your component:

import 'instantsearch.css/themes/satellite.css';

Vue InstantSearch

Vue InstantSearch provides Vue components compatible with both Vue 2 and Vue 3.

Package Installation

npm

npm install vue-instantsearch algoliasearch

Package Details

• vue-instantsearch (v4.24.0) - Vue 2 and Vue 3 components
• algoliasearch (>= 3.32.0 < 6) - The Algolia search client (peer dependency)

Peer Dependencies

Vue InstantSearch supports both Vue versions:

• vue ^2.6.0 || >=3.0.0-rc.0

Vue Version Support

The package includes builds for both Vue 2 and Vue 3:

• Vue 2: Imports from vue-instantsearch/vue2
• Vue 3: Imports from vue-instantsearch/vue3

Your bundler will automatically pick the correct version based on your installed Vue version.

Plugin Registration

For Vue 2, register the plugin:

import Vue from 'vue';
import InstantSearch from 'vue-instantsearch';

Vue.use(InstantSearch);

For Vue 3, components can be imported directly without plugin registration.

CSS Themes

Optionally install the CSS package:

npm

npm install instantsearch.css

Import in your component:

<style>
@import 'instantsearch.css/themes/satellite.css';
</style>

Server-Side Rendering (Optional)

If you’re using server-side rendering:

Next.js (React)

Install the Next.js-specific package:

npm

npm install react-instantsearch-nextjs

Nuxt.js (Vue)

Vue InstantSearch includes SSR support out of the box. For Nuxt, install the optional server renderer:

npm

npm install @vue/server-renderer

TypeScript Configuration

InstantSearch.js with TypeScript

InstantSearch.js includes TypeScript definitions. Depending on your Algolia client version, you may need additional type packages:

For algoliasearch v4.x

npm install @algolia/client-search

For algoliasearch v3.x (deprecated)

npm install @types/algoliasearch@3

Algoliasearch v3 is deprecated and will soon be unsupported. We recommend upgrading to v4 or v5.

Verify Installation

After installation, verify everything is working by importing the packages:

JavaScript

import instantsearch from 'instantsearch.js';
import { liteClient as algoliasearch } from 'algoliasearch/lite';

console.log('InstantSearch.js loaded successfully!');

React

import { InstantSearch } from 'react-instantsearch';
import { liteClient as algoliasearch } from 'algoliasearch/lite';

console.log('React InstantSearch loaded successfully!');

Vue

import InstantSearch from 'vue-instantsearch';
import { liteClient as algoliasearch } from 'algoliasearch/lite';

console.log('Vue InstantSearch loaded successfully!');

Next Steps

Now that you have InstantSearch installed, you’re ready to build your first search UI:

Quick Start Guide

Follow our quick start guide to create your first search interface in minutes

Browser Support

InstantSearch supports the last two versions of major browsers:

• Chrome
• Edge
• Firefox
• Safari

For legacy browser support (IE11), additional polyfills may be required. See the browser support documentation for details.