Svelte Themes Logo Svelte Themes
Svelte Algolia Instantsearch screenshot

Svelte Algolia Instantsearch

Author Avatar Theme by Aymeric giraudet
Updated: 24 Oct 2025
54 Stars

A Svelte component library for Algolia InstantSearch.js

Github Live Preview

Categories

Vite

Overview:

svelte-algolia-instantsearch is a community-developed wrapper around instantsearch.js for Svelte. It is not officially affiliated or backed by Algolia. It aims to provide a similar API to react-instantsearch-hooks-web for Svelte. This library is specifically designed to work with SvelteKit, which is now the default when bootstrapping a Svelte project.

Features:

  • Installation: Provides a guide on how to install the theme.
  • Basic usage: Offers basic usage instructions for the theme.
  • Compatibility with SvelteKit SSR: Provides information on the compatibility of the theme with SvelteKit SSR.
  • Components: Offers pre-made components that can be used to build a search UI, including Breadcrumb, Configure, ClearRefinements, CurrentRefinements, DynamicWidgets, HierarchicalMenu, Highlight, Hits, HitsPerPage, Index, InfiniteHits, Menu, Pagination, PoweredBy, RangeInput, RefinementList, SearchBox, Snippet, SortBy, Stats, and ToggleRefinement.
  • API: Includes the connect function, which creates and adds a widget to the InstantSearch instance and returns a Svelte readable store.
  • getInstantSearchContext: Returns the instance of InstantSearch that was instantiated by the <InstantSearch> component. This can be useful when using the instantsearch.js API directly, such as adding a custom middleware.

Installation:

To install the svelte-algolia-instantsearch library, you can follow these steps:

  1. Make sure you have SvelteKit installed as it is a prerequisite for using this library.
  2. Install the library using your preferred package manager (e.g., npm or yarn).
  3. Import the necessary components in your Svelte project.
  4. Use the components and connect function to build your search UI.
  5. Optionally, use the getInstantSearchContext function to access the instantsearch.js API directly for advanced customization.

Summary:

svelte-algolia-instantsearch is a wrapper library for instantsearch.js, designed specifically for Svelte and SvelteKit. It provides a similar API to react-instantsearch-hooks-web and offers a variety of pre-made components to build a search UI. With its connect function and getInstantSearchContext function, developers have flexible options for creating custom search experiences in Svelte projects.