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 😅

Read more

Revealed: React's experimental animations API

React is experimenting with a new animation API based on the View Transition API. How does it work? What can it do? We reveal all in this blog post.

React is experimenting with a new animation API based on the View Transition API. How does it work? What can it do? We reveal all in this blog post.

Framer Motion is now independent, introducing Motion

Framer Motion is now independent. Introducing Motion, a new animation library for React and all JavaScript environments. Here's what it means for you.

Framer Motion is now independent. Introducing Motion, a new animation library for React and all JavaScript environments. Here's what it means for you.

Do you still need Framer Motion?

In the five years since Framer Motion was released, CSS animation APIs have come a long way. Do you still need to use Framer Motion?

In the five years since Framer Motion was released, CSS animation APIs have come a long way. Do you still need to use Framer Motion?

When browsers throttle requestAnimationFrame

In specific situations Safari and Firefox may throttle requestAnimationFrame. Here’s why your JavaScript animations are janky.

In specific situations Safari and Firefox may throttle requestAnimationFrame. Here’s why your JavaScript animations are janky.