How to add cmd-k search shortcut to your Framer site

Matt Perry

Nov 20, 2024

On the old Framer Motion docs, the top request from visitors was search functionality. When making the new Motion homepage I knew that search was a must-have. The new site is built with Framer, so adding search is as simple as a drag and drop.

No more excuses.

So I dragged and dropped, and patted myself on the back thinking that would be the end of it.

But no. Now, I'm getting Github issues, Twitter DMs, emails, all asking for a cmd-k keyboard shortcut.

This is a keyboard shortcut I've never used or noticed, I had no idea this was a thing! Apparently it's very popular.

But now, if you hit cmd-k or ctrl-k now, you'll notice our search will open. Framer's search functionality doesn't support this out the box, so there's a little hackery involved.

First, you want to wrap your Search component with a layer named something unique, like "Search Container".

Framer will output this label via the data-framer-name attribute.

Next, we want to go to our Custom Code section in the site settings.

In the "End of <body> tag" section, add the following script. It will add an event listener to the page that listens for the cmd-k shortcut, and simulates a click on the search button.

<script>
document.addEventListener('keydown', (event) => {
  if (event.metaKey && event.key === 'k') {
    event.preventDefault()
    const searchButton = document.querySelector('[data-framer-name="Search Container"] button')
    if (searchButton) searchButton.click()
  }
})
</script>

Naughty? Probably. But hey, enjoy the shortcut 😅

Revealed: React's experimental animations API

Framer Motion is now independent, introducing Motion

Motion+

Level up your animations with Motion+

Unlock the full vault of 290+ Motion examples, premium APIs, private Discord and GitHub, and powerful VS Code animation editing tools.

Get Motion+

One-time payment, lifetime updates.

Introducing the Motion+ Carousel

Meet the Motion+ Carousel for React. A performant and accessible component with infinite loops and pixel-perfect swiping.

Motion's independence: One year in review

It's been an entire year since I took Framer Motion independent as Motion. Here's how it's gone, and what I learned in this first year.

The Web Animation Performance Tier List

Learn what makes web animations fast, slow, and everything in between with our 2025 web animation performance tier list.

Building the ultimate ticker

Ticker compoments are becoming common decorative features, but building a good one isn't easy. Let's take a look at the problem with CSS components, and how Motion+ Ticker aims to solve them.

Motion is supported by the best in the industry.