This lesson was released before Agents, Branching, and the CMS update on June 16, 2026. Some UI may differ, but the core concepts still apply.
Benjamin
4:05
Add site search with the Search Component in Framer
Add search to your site in Framer by inserting the Search Component. Framer builds the search index after publishing and can search page titles, descriptions, headings, and body copy. This lesson also covers animation and styling controls, result scopes for a path or CMS collection, and the need to wait for site optimization before testing.
Lesson details
In this Framer tutorial, you will learn Adding search to your site. We explain a practical workflow, highlight the key settings that affect the result, and show how to apply the technique on real pages for cleaner UX and better site performance. See Site Search.
Frequently asked questions
How do I add site search in Framer?
Open the Insert menu, find the Search Component in the interactive section, and place it on the page. Publish the site so Framer can build the search index, then test the component on the live URL.
What content does Framer site search index?
Site search can use text from body copy, headings, page titles, and page descriptions. The available results depend on the published pages inside the selected search scope.
Can I search only one CMS collection?
Yes. Use the scope control to limit results to a site path, such as the path used by one CMS collection. This keeps unrelated pages out of the results.
Why are new pages missing from search?
The search index is generated during site optimization after publishing. Wait until optimization finishes, then open the latest live version and test the query again.
Can I customize the Search Component?
Yes. You can edit its visual style and built-in animation controls on the canvas. Keep the input, result labels, and focus states readable at every breakpoint.