Find your way around.

1. Add the files

Copy widget.js to your website and create a search.json file as described in the search index guide.

2. Configure and load the widget

Set the index URL before loading the script. The URL can be relative to the current page or start at your site's root.

<script>
  window.CommandPaletteConfig = {
    data: "./search.json"
  };
</script>
<script src="./widget.js"></script>

3. Serve your site over HTTP

The widget uses fetch() to load the index and its pages. Use a local web server or your production host; opening the page as a file:// URL is not supported.

[
  {
    "title": "Getting started",
    "url": "/guide/getting-started.html"
  },
  {
    "title": "FAQ",
    "url": "/faq.html"
  }
]

• Root-relative URLs like /guide/start.html start at your domain's root.
• Relative URLs like ./guide/start.html are resolved from the page that loaded the widget.
• Only add pages that should be visible in search. The widget indexes their title and visible body text.

window.CommandPaletteConfig = {
  data: "/assets/search.json"
};

Assign window.CommandPaletteConfig before the widget.js script. If omitted, the widget requests /search.json from your site root.

Search is case-insensitive substring matching, and the widget shows up to ten results. Arrow-key navigation and selecting a result with Enter are not currently supported.