# Building Search UIs

You can use the open source InstantSearch.js (opens new window) library or its React (opens new window), Vue (opens new window), Angular (opens new window) cousins, along with our Typesense-InstantSearch-Adapter (opens new window) to build a plug-and-play full-featured search interface, with just a few lines of code.

If you prefer a video walk-through, here are two videos where a member of our community, Zaiste (opens new window) walks you through how to build an end-to-end search experience with Typesense:

# Using a package manager

If you are already using a package manager like npm or yarn, here's how to add Instantsearch to your app:

# Walk-through

Let's start with a starter template:

A couple of setup pointers for the npx create-instantsearch-app command above:

  • InstantSearch template: you can pick any one of the web libraries we support: InstantSearch.js, React, Vue or Angular.
  • InstantSearch.js version: you can leave it at the default
  • Application ID: can be any string - we'll be replacing this later in the guide
  • Search API key: can be any string - we'll be replacing this later in the guide with your Typesense Search-only API Key
  • Index name: the name of your collection in Typesense
  • Attributes to display: Uncheck all the options by pressing space bar, including "Dynamic Widgets" (this step is important).

Let's now install the Typesense InstantSearch adapter, to be able to use InstantSearch with a Typesense backend:

To get InstantSearch.js to use the Typesense adapter, open src/app.js and edit how InstantSearch is initialized, from this:

to this:

We're essentially creating a searchClient with the adapter and passing it to instantsearch when initializing it.

Now, you can use any of the widgets supported by InstantSearch to build a search interface. In this walkthrough, we'll add a search box, along with results:

search.addWidgets([
  instantsearch.widgets.searchBox({
    container: '#searchbox',
  }),
  instantsearch.widgets.hits({
    container: '#hits',
    templates: {
      item: `
        <div>
          <img src="" align="left" alt="" />
          <div class="hit-name">
            {{#helpers.highlight}}{ "attribute": "title" }{{/helpers.highlight}}
          </div>
          <div class="hit-description">
            {{#helpers.highlight}}{ "attribute": "authors" }{{/helpers.highlight}}
          </div>
          <div class="hit-price">\$</div>
          <div class="hit-rating">Rating: </div>
        </div>
      `,
    },
  }),
  instantsearch.widgets.pagination({
    container: '#pagination',
  }),
]);

search.start();

Now run npm start to start the dev server and view the app. You should now have a fully-functioning instant search interface with a search box, results that update as you type and pagination.

# Demo App

Here's a repo with a working version of the app, following the instructions above: https://github.com/typesense/typesense-instantsearch-demo (opens new window). The repo also contains quick commands to start a local Typesense server (npm run typesenseServer) and index the books collection used in this example (npm run populateTypesenseIndex).

InstantSearch.js also has React (opens new window), Vue (opens new window), Angular (opens new window) cousins. The Typesense InstantSearch adapter is also compatible with them. Similar to the above, you only need to swap the searchClient to the one provided by Typesense adapter. The rest of the instructions found in each of these repos work without additional changes.

# Without using a package manager

If you don't want to use npm / yarn, you can still use Instantsearch.js and typesense-instantsearch-adapter directly from plain HTML files and Javascript using script tags.

Here's a demo app that shows you how to do this https://github.com/typesense/typesense-instantsearch-demo-no-npm-yarn (opens new window).

Last Updated: 8/19/2022, 2:26:14 PM