Nov 20, 2024

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

Matt Perry

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 😅

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

Read more

Framer Motion is now independent, introducing Motion

Do you still need Framer Motion?

When browsers throttle requestAnimationFrame