Getting Started Adding Hotlight

Install Hotlight

npm install hotlight-core

Add it to a page

Vanilla html+javascript

<html>
  <head>
    ...
    <script type="module" src="/build/hotlight-core.esm.js"></script>
  </head>
  <body>
    <hotlight-modal />
  </body>
</html>

React

// add hotlight somewhere near the root
import Hotlight from "hotlight-react";

const Root = () => {
  return (
    <div>
      <Hotlight />
    </div>
  )
}

Launching it other than with cmd+k or ctrl+k

It is highly recommended to place a button somewhere on the page that displays the hot key used to launch command k. The button itself should of course launch commandk as well:

<script>
function openHandler() {
  let open = new Event('hotlight:open');
  window.dispatchEvent(open);
}
</script>

<button type="button" onClick={openHandler}>Search everything (CMD+K)</button>

Edit this page on Github