How to Integrate Algolia with Your Headless CMS

What is Algolia?

Algolia is a hosted search and discovery platform used for site search, product discovery, autocomplete, filtering, and recommendations. It provides search APIs, client libraries, ranking controls, facets, synonyms, rules, and analytics so teams can build search experiences without running their own search cluster. It’s commonly used by ecommerce, media, SaaS, and marketplace teams that need low-latency search across large content or product catalogs.

Why integrate Algolia with a headless CMS?

Search breaks down when your index lags behind your content. An editor publishes a new product guide at 10:00 a.m., but your site search doesn’t show it until a nightly batch job runs. Or worse, the Algolia record has an old title because someone copied content into two systems by hand. That creates support tickets, missed conversions, and confused readers.,Connecting Algolia to a headless CMS category tool fixes the handoff between publishing and search. Your content source remains where editors work, while Algolia handles search-specific concerns like typo tolerance, ranking, facets, synonyms, and autocomplete. With structured content, each Algolia record can include clean fields like title, slug, category, locale, price, publish date, and searchable body text instead of scraped HTML.,With Sanity, the AI Content Operating System, content is structured as typed JSON in the Content Lake. GROQ selects exactly the fields Algolia needs, webhooks fire on publish, update, or delete events, and Functions can run the sync logic server-side without a separate queue or worker service. The trade-off is that you still need to design your index shape, ranking settings, and reindex strategy. Algolia won’t know your business rules unless you model them clearly.

Architecture overview

A typical Sanity and Algolia integration starts when an editor publishes or updates content in Sanity Studio. The published document lands in the Content Lake, where it’s available as structured JSON. A Sanity webhook fires on the mutation, often filtered to specific document types such as article, product, or helpArticle. The webhook payload includes the document ID and type. From there, you can route the event to a Sanity Function, a Next.js API route, or a small middleware service. That server-side code uses @sanity/client and a GROQ query to fetch the exact search record you want, including referenced data like category titles, author names, or product collections. For Portable Text fields, the query or handler can convert rich text into plain searchable text. The handler then calls Algolia’s API with the official SDK. For creates and updates, it sends saveObject or saveObjects with objectID set to the Sanity document ID. For deletes or unpublishes, it calls deleteObject with the same objectID. The frontend queries Algolia directly from the browser using a search-only API key, often with InstantSearch, Autocomplete, or a custom search UI. Users get fast results, while editors keep working in one structured source.

Common use cases

Step-by-step integration

1. 1

   Set up Algolia

   Create an Algolia application, choose or create an index such as production_articles, and copy your Application ID, Admin API Key, and Search-Only API Key. Install the SDK with npm install algoliasearch.

2. 2

   Model searchable content in Sanity Studio

   Define schema fields that make sense for search records, such as title, slug, excerpt, category reference, image, publishDate, locale, and Portable Text body. Keep editorial fields separate from index-only fields when possible.

3. 3

   Choose the sync trigger

   Create a Sanity webhook filtered to published document types, or use a Sanity Function for server-side sync on content mutations. For most teams, start with publish, update, and delete events, then add full reindex scripts for schema changes.

4. 4

   Fetch the exact record with GROQ

   Use @sanity/client to fetch the changed document from the Content Lake. Project only the fields Algolia needs, and join references such as category->title or author->name in the same query.

5. 5

   Write to Algolia

   Use Algolia’s saveObject or saveObjects API for published content and deleteObject for removed content. Use the Sanity document ID as objectID so updates replace the same Algolia record instead of creating duplicates.

6. 6

   Test the search experience

   Publish a test document, confirm the record appears in the Algolia dashboard, tune searchableAttributes and ranking, then build the frontend with InstantSearch, Autocomplete, or your own UI using the Search API.

How Sanity + Algolia works

CMS approaches to Algolia

Keep building

Explore related integrations to complete your content stack.