Guitar Chords Search in different JS frameworks

Sites that showcase how to use Typesense in different Javascript frameworks, using a dataset of 2141 chord shapes of 552 guitar chords.

NuxtJS

Live Demo (opens new window) | Source Code (opens new window)

• Here's (opens new window) how to set up vue-instantsearch in NuxtJS.
• Here's (opens new window) how to use custom hits template.

Next.js app router

Live Demo (opens new window) | Source Code (opens new window)

• Here's (opens new window) how to set up react-instantsearch in Next.js app router. If you want to use Server Component for your page.tsx, move the search component into its own file and make sure to include the 'use client' directive at the top.
• Here's (opens new window) how to use custom hits template.

Angular v15

Live Demo (opens new window) | Source Code (opens new window)

• Here's (opens new window) how to set up angular-instantsearch.
• Here's (opens new window) how to use custom hits template.
• Here's (opens new window) how to create a load more hits button and disable it when reaching the last page.

Vanilla Javascript

Live Demo (opens new window) | Source Code (opens new window)

• Here's (opens new window) how to set up instantsearch.js in Vite.
• Here's (opens new window) how to use custom hits template.

Astro

Live Demo (opens new window) | Source Code (opens new window)

• Here's (opens new window) how to use instantsearch.js in Astro. Make sure to wrap it in a <script> tag.

SolidJS

Live Demo (opens new window) | Source Code (opens new window)

• Here's (opens new window) how to use instantsearch.js in SolidJS. Make sure to wrap it in an onMount or createEffect function.

Remix

Live Demo (opens new window) | Source Code (opens new window)

• Here's (opens new window) how to configure Typesense Instantsearch Adapter (opens new window) with Browser Environment Variables (opens new window).
• Here's (opens new window) how to use react-instantsearch in Remix (no SSR).

SvelteKit

Live Demo (opens new window) | Source Code (opens new window)

• Here's (opens new window) how to use instantsearch.js in SvelteKit. Make sure to wrap it in an onMount function.

Qwik

Live Demo (opens new window) | Source Code (opens new window)

• Here's (opens new window) how to use instantsearch.js in Qwik. Make sure to wrap it in useVisibleTask$.

React Native

Source Code (opens new window)

• Here's (opens new window) how to display infinite hits.
• Here's (opens new window) how to create a RefinementList component with showmore and searchable attributes.
• Here's (opens new window) how to create a filter with refinement lists in a modal.