Subscribe
Contact
Find Anything Instantly
Page Search brings a true ‘Find on Page’ experience to Framer. Trigger with Cmd/Ctrl+F or a customizable search button—no setup required. A frosted glassmorphism search bar animates down, ready to scan headings, paragraphs, lists, and more, highlighting every match in real-time. The interface is styled, animated, and integrates seamlessly with modern Framer sites.
Efficient, Context-Aware Search
Every keystroke highlights matching text directly on the page, with each hit visually marked for clarity via the browser’s Range API. A floating counter badge displays the current result (such as “2 of 10”), and users can cycle matches using arrow keys, Enter, or dedicated navigation buttons, each match scrolling smoothly into view.
Beneath the search bar, Page Search offers an optional contextual match list. Each result shows a 50-character snippet, giving users meaningful context. Click any snippet and instantly jump to its location, making long articles and complex documents easier to navigate.
Power users appreciate toggles for case sensitivity and regex mode, delivering advanced control for deep search scenarios. From skipping code blocks, scripts, and non-content elements to instant highlight cleanup upon closing, Page Search optimizes usability for every visitor.
Explore detailed tips, customization ideas, and technical guides for Page Search in Framer.
Triggers
Highlighting
Controls
Ideas for styling, advanced queries, and match cycling with Page Search
Inside Framer: Range API, real-time DOM highlights, and search skipping of non-content elements
Interactive Highlighting, Contextual Results
Matches highlight and cycle live as you type, with focus scrolling each into view. Below the search bar, snippets show surrounding text, making it easy to identify the best result. Cycle between matches easily, and jump instantly via click or keyboard.
Glassmorphism UI, real-time context, match lists, regex, case toggles & more
Framer Property Controls
Property controls for Page Search are grouped into collapsible sections in Framer: Search Options (animation, context, text highlights), Appearance (themes, highlight, overlays), Button Style (color, icon, shape), and Font. This keeps configuration clear, fast, and consistent with your project.
Explore
Home
Latest
Categories
Resources
Guides
Newsletter
Contact
About
About Aidan
Contributors
Careers
Social
GitHub