Skip to main content
Discover how to build powerful search experiences with InstantSearch through our collection of real-world examples. Each example includes complete, working code that you can use as a starting point for your own projects.

​
Available Examples

E-Commerce Search

Complete product search with facets, filters, sorting, and pagination

Media Search

Image and article search with infinite scroll and date filtering

Geographic Search

Location-based search with map visualization using GeoSearch

Multi-Index Search

Search across multiple indices simultaneously

Next.js SSR

Server-side rendering with Next.js for better SEO and performance

URL Routing

Sync search state with URL for shareable searches

​
Source Code

All examples are available in the InstantSearch repository under the examples/ directory:
  • JavaScript: examples/js/
  • React: examples/react/
  • Vue: examples/vue/

​
Getting Started

Each example includes:
1

Complete source code

Fully functional implementations you can copy and modify
2

Setup instructions

Step-by-step guide to get the example running locally
3

Key concepts

Explanation of the main features and patterns used
4

Customization tips

Suggestions for adapting the example to your needs

​
Running Examples Locally

To run any example from the repository: 
# Clone the repository
git clone https://github.com/algolia/instantsearch.git
cd instantsearch

# Install dependencies
yarn install

# Navigate to an example
cd examples/js/e-commerce  # or any other example

# Install example dependencies and start
yarn install
yarn start
Most examples use demo Algolia credentials that are publicly available. For production use, replace these with your own Algolia application ID and API key.

​
Framework Variations

Many examples are available in multiple framework implementations:
ExampleJavaScriptReactVue
E-Commerce✓✓✓
Media Search✓-✓
Geographic Search✓--
Query Suggestions✓✓-
SSR-✓✓
Next.js-✓-

​
Common Patterns

Across all examples, you’ll find consistent patterns:

​
Search Client Setup

import { liteClient as algoliasearch } from 'algoliasearch/lite';

const searchClient = algoliasearch(
  'YOUR_APP_ID',
  'YOUR_SEARCH_API_KEY'
);

​
Widget Configuration

Widgets are configured with containers and customizable templates: 
searchBox({
  container: '#search-box',
  placeholder: 'Search for products...'
})

​
Styling

Examples use InstantSearch CSS themes as a foundation: 
import 'instantsearch.css/themes/satellite.css';
// or
import 'instantsearch.css/themes/reset.css';

​
Need Help?

If you have questions about any example:

Build docs developers (and LLMs) love

Get started for freeTalk to us