> ## Documentation Index
> Fetch the complete documentation index at: https://algolia.com/llms.txt
> Use this file to discover all available pages before exploring further.

# UI examples for InstantSearch.js

> See a few examples of user interfaces built with InstantSearch.js.

<div className="not-prose algolia-flavor-switcher">
  <div className="afs-dropdown">
    <div className="afs-trigger" role="button" tabIndex="0" aria-haspopup="listbox">
      <span className="afs-current">JavaScript</span>

      <svg className="afs-chevron lucide lucide-chevron-down" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
        <path d="m6 9 6 6 6-6" />
      </svg>
    </div>

    <ul className="afs-menu" role="listbox">
      <li role="option" aria-selected="true"><a className="afs-option is-current" href="/doc/guides/building-search-ui/resources/demos/js"><span className="afs-option-name">JavaScript</span><span className="afs-option-lib">InstantSearch.js</span></a></li>
      <li role="option" aria-selected="false"><a className="afs-option" href="/doc/guides/building-search-ui/resources/demos/react"><span className="afs-option-name">React</span><span className="afs-option-lib">React InstantSearch</span></a></li>
      <li role="option" aria-selected="false"><a className="afs-option" href="/doc/guides/building-search-ui/resources/demos/vue"><span className="afs-option-name">Vue</span><span className="afs-option-lib">Vue InstantSearch</span></a></li>
      <li role="option" aria-selected="false"><a className="afs-option" href="/doc/guides/building-search-ui/resources/demos/ios"><span className="afs-option-name">iOS</span><span className="afs-option-lib">InstantSearch iOS</span></a></li>
      <li role="option" aria-selected="false"><a className="afs-option" href="/doc/guides/building-search-ui/resources/demos/android"><span className="afs-option-name">Android</span><span className="afs-option-lib">InstantSearch Android</span></a></li>
    </ul>
  </div>
</div>

## Ecommerce

<Frame>
  <img src="https://mintcdn.com/algolia/WOi5v-PGZrMZ2rOj/images/build-search-ui/demos/e-commerce.png?fit=max&auto=format&n=WOi5v-PGZrMZ2rOj&q=85&s=85cf653f3e839f676fac7a19eb9e2dbf" alt="Screenshot of an ecommerce search interface with a yellow background, a search box, product listings, and a filters sidebar." width="1645" height="1028" data-path="images/build-search-ui/demos/e-commerce.png" />
</Frame>

[View demo](https://instantsearchjs.netlify.app/examples/js/e-commerce/)

[View source code](https://github.com/algolia/instantsearch/tree/master/examples/js/e-commerce)

[View dataset](https://github.com/algolia/datasets/tree/master/ecommerce)

## Media

<Frame>
  <img src="https://mintcdn.com/algolia/WOi5v-PGZrMZ2rOj/images/build-search-ui/demos/media-articles.png?fit=max&auto=format&n=WOi5v-PGZrMZ2rOj&q=85&s=c4d7b7592b2a0d4576230a60ed4068ef" alt="Screenshot of a media demo with a search box, filter tags, and article cards, including a large featured article with a space-themed illustration." width="1645" height="1028" data-path="images/build-search-ui/demos/media-articles.png" />
</Frame>

[View demo](https://instantsearchjs.netlify.app/examples/js/media/)

[View source code](https://github.com/algolia/instantsearch/tree/master/examples/js/media)

## Tourism

<Frame>
  <img src="https://mintcdn.com/algolia/WOi5v-PGZrMZ2rOj/images/build-search-ui/demos/tourism.png?fit=max&auto=format&n=WOi5v-PGZrMZ2rOj&q=85&s=c2fcfd2da36d373e64cda96cce540e99" alt="Screenshot of a tourism search interface with filters and property listings alongside a map with location pins." width="1280" height="852" data-path="images/build-search-ui/demos/tourism.png" />
</Frame>

[View demo](https://instantsearchjs.netlify.app/examples/js/tourism/)

[View source code](https://github.com/algolia/instantsearch/tree/master/examples/js/tourism)