CMS Searchbar
Real-time search for Framer CMS collections. Tag filters, keyboard navigation, fully client-side.
1. Quick start
- Install CMS Searchbar from the Framer Marketplace.
- Open the plugin on your project.
- Select the CMS collection to index (e.g. Blog, Articles, Team).
- Pick which fields to include in the search index (title, excerpt, body).
- Click Generate index.
- Insert the SearchBar code component on any page.
- Publish. Visitors can now search your CMS in real time.
2. How indexing works
The plugin generates a static JSON index from your selected CMS fields and embeds it in the code component. Everything happens client-side at runtime: no server, no external API, no request latency.
Regenerate the index any time your CMS changes. The new index replaces the old one inside the component.
3. Searching by tag fields
On the Free tier, only enum (tag) fields can be indexed. Users search by tag values directly: typing "interview" surfaces every item whose tag matches.
On Pro, you can index any field type on top of tags: strings, rich text, numbers. Users get full-text search across the whole content, not just tags.
4. Styling
Every visual aspect is exposed as a property control on the code component:
- Dropdown background, border, radius, shadow
- Input typography, placeholder color
- Result card layout, hover states
- Keyboard navigation highlights (always on)
Match your site's design without touching code.
5. Free vs Pro
| Feature | Free | Pro (€19 one-time) |
|---|---|---|
| Collections | 1 | Unlimited |
| Indexed field types | Tags (enum) only | Strings, rich text, numbers, tags |
| Results per search | 3 max | Configurable (default 10) |
| Fuzzy matching | Strict (exact tokens) | Tolerant (typos, partial matches) |
| Images in results | — | Yes |
| Keyboard navigation | Yes | Yes |
| Priority support | — | Yes |
6. Troubleshooting
Search returns no results
Check the index is generated (plugin shows "Index generated: X items"). Check the searched fields are included in the index.
Index too large
Reduce the number of indexed fields. Exclude body fields if only titles matter.
Styles don't match my site
All styles are exposed as property controls. Open the component's property panel and tweak there.
7. FAQ
Does it work with external APIs?
Not in V1. Only Framer CMS collections are supported. External API support is on the roadmap.
Client-side — is that SEO-friendly?
The search is an enhancement, not a page. Your CMS pages are crawled normally. The search just helps visitors navigate faster once on the site.
Refund policy?
14-day money back, email me.
8. Support
- Email pro.allali.ilies@gmail.com
- DM on the Framer Community (
@ilies-allali)