How to Integrate Algolia Search into Storyblok Using Astro

For content-heavy websites, search is one of the most effective ways to help users explore and quickly access the information they’re looking for.

With Storyblok’s Algolia plugin, you can seamlessly index your content into Algolia and bring advanced, AI-powered search to your project with minimal setup.

Learn how to integrate Storyblok with Algolia and implement a React-based search page in an Astro project, ensuring visitors can navigate content intuitively.

Prerequisites

• An active Algolia account
• A Storyblok space with the Algolia App installed.
• A Astro project configured to work with Storyblok's SDK.

Update the Page block

In this tutorial, we work with the Page block (included in every Blueprint Starter space), and modify it to match the required fields:

• body: Richtext field (for the article content)
• image: Asset field (for the article feature image)
• tags: Multi-selection field (for key-value tags, such as SEO, Headless, JavaScript, etc.)
• description: Textarea field

Setting up the Algolia Plugin

To set up the Algolia plugin, you’ll need your Application ID and Write API Key from Algolia. You can find these in your Algolia account settings.

Once you have the keys, follow our Algolia Plugin setup guide to connect Storyblok and index your content in Algolia.

After your content is indexed, you can head to your Algolia dashboard and open your index to configure various search settings such as searchable attributes, facets, pagination, and more.

For this tutorial, we’ll use the tags field to create a filter/facet. You can set this up under Configuration → Facets in your Algolia index.

To learn more about available configuration options, check out the Algolia documentation.

Integrating Algolia into your frontend

Algolia provides the InstantSearch UI libraries*,* which simplify the integration of search functionality into your frontend application. It offers JavaScript packages for general use, as well as dedicated integrations for popular frameworks, like React and Vue.

To add React support to your Astro project, run:

npx astro add react

Once React is installed, add the required packages:

npm install algoliasearch react-instantsearch

With these dependencies in place, you’re ready to start building your search component.

Create a Search Component

In the src/components directory, create a file named SearchPage.tsx. This component will contain the Algolia InstantSearch setup.

import algoliasearch from 'algoliasearch/lite';
import {
  Hits,
  InstantSearch,
  RefinementList,
  SearchBox,
} from 'react-instantsearch';

const appId = 'Your Algolia Application ID';
const apiKey = 'Your Algolia Search API Key';
const indexName = 'Your Algolia Index Name';

const searchClient = algoliasearch(appId, apiKey);

export default function SearchPage() {
  return (
    <InstantSearch searchClient={searchClient} indexName={indexName}>
      <SearchBox placeholder="Search articles, topics, or authors" />
      <RefinementList attribute="content.tags" />
      <Hits />
    </InstantSearch>
  );
}

Now, import the SearchPage you created into index.astro or a dedicated search page based on your site structure.

---
import BaseLayout from '../layouts/BaseLayout.astro';
import SearchPage from '../components/SearchPage.tsx';
---

<BaseLayout>
  <SearchPage client:load />
</BaseLayout>

This is all you need to set up search with Algolia. From here, you can customize the design and adjust the look and feel to match your project. Check the code repository on GitHub for examples of a custom UI.

Wrap up

You’ve now set up search in your Astro project using Storyblok and Algolia. Starting from configuring the Page block, connecting Algolia, and adapting your frontend code, you now have a working search experience. From here, you can extend the filters, or refine your indexing strategy to fit your project needs.

Resources

• Storyblok Documentation
• Algolia Documentation
• React InstantSearch Guide
• Example Code Repository