Default template structure and CSS


I’m trying to add instantsearch.js to my website. Things are working fine, but I cannot figure out the styling.

I’d like to use the CSS that Algolia provides but I can’t find an example on how to use the classes. Reading CSS to figure out which classes should be used in my case, and also figuring out the required sequence of containers is hard.

Ideally, I’d like to get the same structure as the search hits in the docsearch playground but I could not find how you defined the template used for the playground and it also seems that you use a different CSS stylesheet for this, not the Algolia one.

  • Do you guys have an example of a template using the Algolia theme?
  • Would it be possible for you to have the docsearch tool use a more standard Algolia theme? That would be a good example.


Hi @artflag,

Here is a guide on our class-naming conventions for InstantSearch:

Is this what you are looking for?

Hi Ajay,

Thanks for the answer. I have read this guide but that didn’t help me in my situation. But then I realized that the styling of docsearch playground is not done in the scraper repo, but in the main repo.

Scss sources are here, if anyone is interested.