Algolia integration
Algolia is a hosted search API with front-end libraries, a crawler and DocSearch for documentation. On Webflow a marketplace app syncs CMS collections to Algolia; on Astro and Next.js we build search with InstantSearch and index content at build time or with the Algolia Crawler. For most Framer sites, Framer’s native Site Search is enough.
| Complexity | Medium |
|---|---|
| Method |
|
| Typical setup | 1 to 3 days |
| What we do | We design the search experience, set up the index and its sync, and build the UI with secured, search-only keys. |
| Category | Search |
Setup by platform
How we set up Algolia
Framer
- Embed
There is no official Algolia plugin for Framer, and Framer has its own Site Search. When a site outgrows it, the Algolia Crawler can index the published pages and a search UI goes in an Embed or code component.
Webflow
- Native
The Algolia Search and Sync app (by Candid Leap) maps CMS fields to your own Algolia index, re-syncs on publish and adds styleable search components in the Designer.
Astro
- API
A build step pushes content to the index with the admin key on the server; the page uses InstantSearch.js or a React island with the search-only key.
Next.js
- API
react-instantsearch with the lite algoliasearch client, and react-instantsearch-nextjs for server-rendered results in the App Router.
Use cases
What teams use it for
Resource and blog search
Hundreds of articles, guides or templates with instant results and filters.
Documentation search
DocSearch for eligible docs sites, indexed by the Algolia Crawler.
Directories with facets
Filter integrations, partners or products by category, region or plan.
Before you add it
What to watch out for
Security
Search-only key in the browser
Only the search-only key goes in front-end code, ideally limited by referrer, rate or index, or replaced by secured keys. The admin key never leaves the server.
Performance
Render results on the server
Server-side rendering with React InstantSearch avoids a flash of empty results, can help Largest Contentful Paint and makes results crawlable.
Data layer
Keep the index in sync
Stale results feel broken. We re-index on publish through the Webflow app, a CMS webhook or the build, not by hand.
FAQ
Questions about Algolia
Do we need Algolia for search on a Framer site?
Usually not. Framer has a native Site Search component. Algolia is worth it for large content sets, filters or search across several sites.
Which Algolia key can go in the website’s JavaScript?
Only the search-only key, ideally restricted by referrer or rate, or a secured API key. Never the admin key.
Is the Webflow app made by Algolia?
The Algolia Search and Sync listing names Candid Leap as the publisher. It uses your own Algolia account, so you keep ownership of the index and keys.
You've reached the end, so now…
Tell us what you’re building.
We’ll help you map the right scope, team, timeline, and next steps.
Book a call