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

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.