Displaying fewer items when the search query is blank (Instantsearch.js)

What would be the best way to show a different amount of results (hitsPerPage) or filter the results differently when the search query is empty? Using Instantsearch.js

I’d like to show only the first 5 items of my index when the query is blank, but increase this number to 20 when the user performs a search.

I’ve tried two different ways but couldn’t make it work:

  1. A rule that filters the results when the query is blank. The problem is that I have other widgets in other pages and I don’t want this rule to apply to them. So the question is, is there a way to enable/disable rules per widget?

  2. I tried to programmatically change hitsPerPage when the query is blank. I read the answers on this and this posts but they didn’t get me too far.

I’m using a very simple setup for my pages:

const searchClient = algoliasearch(

const search = instantsearch({
  indexName: 'symbols_index',

    container: '#search-results',
    cssClasses: {
    templates: {
      item: `
     <a href="#" class="symbol-link">
     {{ symbol }}
    hitsPerPage: 20,


Answering my own question for future reference.
There’s this beautiful thin in Algolia rules called context.

I created a rule that applies a filter to my results when the search query is blank.

And used a context to only apply this rule on my homepage.

        hitsPerPage: 20,
        ruleContexts: "homepage",