Catche Search Widget: A low-code way to add instant search to your website
Catche Search Widget
AKA a Ctrl/Cmd-K Menu or a Command Palette
Catche provides a low-code way to add instant search to your website in two steps!
- Go to https://try.catche.co and enter your website URL
- Add the provided code snippet to your website’s
<head>
This repo contains the open-source code for the client-side widget.
For those who are interested in theming their widget or using self-hosted data, check out the Tutorials section below.
Contributions welcome!
Overview
This widget is built with Vue and TypeScript and uses Tailwind for styling.
Catche uses Supabase for our database hosting but you don’t need to do that if you intend to self-host your data – you just need a JSON file!
We use MiniSearch for searching, while fast-fuzzy is used for highlighting.
Tutorials
Note – the index.html files in the tutorial folders cannot be opened as-is, due to several requirements in the scripts. Instead, run a local server via Node or Python.
Themes
See tutorials/theme for relevant files.
You can theme the widget via the catche-css attribute in the <script> element, which should take the path to the .css file.
<script catche-css="PATH/TO/CSS" type="module" crossorigin src="PATH/TO/WIDGET/index.js"></script>
See tutorials/theme/dark.css for an example of the relevant CSS attributes.
Custom Data
See tutorials/selfhost for relevant files.
You can use your own data saved in a .json file, via the catche-data attribute in the <script> element, which should take the path to the .json file.
<script catche-data="PATH/TO/JSON" type="module" crossorigin src="PATH/TO/WIDGET/index.js"></script>
The .json file should contain an array of objects, where each object represents a webpage with the following attributes:
id– unique stringurl– URL of webpagetitle– title of webpagetext– text of webpage
The widget will search through the title and text attributes.
See tutorials/selfhost/my-data.json for an example of the data format.