Catche Search Widget
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
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.
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!
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.
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.
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 string
url– URL of webpage
title– title of webpage
text– text of webpage
The widget will search through the
See tutorials/selfhost/my-data.json for an example of the data format.