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 | Source Code

• Here's how to set up vue-instantsearch in NuxtJS.
• Here's how to use custom hits template.

Next.js app router

Live Demo | Source Code

• Here's 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 how to use custom hits template.

Angular v15

Live Demo | Source Code

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

Vanilla Javascript

Live Demo | Source Code

• Here's how to set up instantsearch.js in Vite.
• Here's how to use custom hits template.

Astro

Live Demo | Source Code

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

SolidJS

Live Demo | Source Code

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

Remix

Live Demo | Source Code

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

SvelteKit

Live Demo | Source Code

• Here's how to use instantsearch.js in SvelteKit. Make sure to wrap it in an onMount function.

Qwik

Live Demo | Source Code

• Here's how to use instantsearch.js in Qwik. Make sure to wrap it in useVisibleTask$.

React Native

Source Code

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