What is Algolia

Algolia empowers modern developers to build world class search and discovery experiences without any DevOps.
Libraries with every major language and framework make it easy to enrich your users' experiences. 
Learn more about the Algolia products
Add instant-search to javascript applications

Vanilla JS InstantSearch UI library is pre-built, customizable and flexible UI widgets to create your own search experiences -  explore the widget showcas. It has server side rendering and routing capabilities and is Open source, production-ready and maintained by Algolia.
Get started with InstantSearch JS

Features

  • Provides pre-built UI components following best practice principles for Vanilla JS that remain independent from external frameworks

  • Integrate into your existing UI or app, or use InstantSearch templates

  • Comes with a default CSS theme, completely customizable

  • Manages all business logic for search requests, responses, and states

  • Progressive customization of components (use, extend, or customize)

Version

  • Compatible with all current versions of the underlying JavaScript library

  • Code is entirely open source and available on GitHub

  • Bootstrap your application, with create-instantsearch-app, NPM, ...

Related Integrations

Get started

HTML (GET A FREE ACCOUNT HERE)

 

        
          
            
<div class="ais-InstantSearch">

  <h1>InstantSearch.js e-commerce demo</h1>



  <div class="left-panel">

    <div id="clear-refinements"></div>



    <h2>Brands</h2>

    <div id="brand-list"></div>

  </div>



  <div class="right-panel">

    <div id="searchbox"></div>

    <div id="hits"></div>

    <div id="pagination"></div>

  </div>

</div>


        

      

    



    

      
        
CSS


      
      
    
    


    

      

        

        
          
            
body { font-family: sans-serif; padding: 1em; }

.ais-SearchBox { margin: 1em 0; }

.ais-Pagination { margin-top: 1em }

.left-panel { float: left; width: 250px; }

.right-panel { margin-left: 260px; }


        

      

    



    

      
        
SEARCH


      
      
    
    


    

      

        

        
          
            
search.addWidgets([

  instantsearch.widgets.hits({

    container: '#hits',

    templates: {

      item: `

        <div>

          <img src="{{image}}" align="left" alt="{{name}}" />

          <div class="hit-name">

            {{#helpers.highlight}}{ "attribute": "name" }{{/helpers.highlight}}

          </div>

          <div class="hit-description">

            {{#helpers.highlight}}{ "attribute": "description" }{{/helpers.highlight}}

          </div>

          <div class="hit-price">\${{price}}</div>

        </div>

      `,

    },

  })

]);


        

      

    




    

        

            

   



   
        

                
                        
                                Get started for free
                        
                        
        


     




   
        

                
                        
                                Explore developer docs
                        
                        
        


     


    







        



    






        
        
      

        
Enable anyone to build great Search & Discovery

        

                    



   
        

                
                        
                                Get a demo
                        
                        
        


     




   
        

                
                        
                                Start Free