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

# renderState

> Object with state data about all widgets.

```ts Signature theme={"system"}
search.renderState: object;
```

## About this widget

The `renderState` property provides all the data and functions from the widgets.
It lets you access the render state of any widget from anywhere,
so you can create custom widgets or refine the search outside the InstantSearch.js lifecycle.

<Note>
  The `renderState` property is available starting in InstantSearch.js v4.9.
</Note>

## Examples

You can access the render state of the `searchBox` widget.

```js JavaScript icon=code theme={"system"}
const indexName = "<index-name>";
const search = instantsearch({
  indexName,
  // ...
});
search.addWidgets([
  searchBox({
    container: "<your-container>",
  }),
]);
search.start();

console.log(search.renderState[indexName].searchBox);
/*
  {
    query: string;
    refine: Function;
    clear: Function;
    isSearchStalled: boolean;
    widgetParams: object;
  }
*/
```

## Working with virtual widgets

To access the `renderState` of widgets, you must add them to the InstantSearch instance.
If you don't want to add a widget to the UI,
but want to get access to its `renderState`, you can add it as a virtual, or renderless widget.

<CodeGroup>
  ```html HTML theme={"system"}
  <button id="next-page-button">Next Page</button>
  ```

  ```js JavaScript theme={"system"}
  const renderer = () => null;
  const virtualPagination = connectPagination(renderer);

  search.addWidgets([virtualPagination()]);

  // Add a click listener to the button
  document.querySelector("#next-page-button").addEventListener("click", () => {
    // Get the `renderState` of the `pagination` widget
    const paginationRenderState = search.renderState[indexName].pagination;

    // Get the current page
    const currentPage = paginationRenderState.currentRefinement;

    // Call `refine` to move to the next page
    paginationRenderState.refine(currentPage + 1);
  });
  ```
</CodeGroup>

## Type definition

```ts TypeScript icon=code theme={"system"}
type RenderState = {
  [indexId: string]: IndexRenderState;
}

type IndexRenderState = Partial<{
  searchBox: SearchBoxState;
  autocomplete: AutocompleteState;
  breadcrumb: BreadcrumbState;
  clearRefinements: ClearRefinementsState;
  configure: ConfigureState;
  currentRefinements: CurrentRefinementsState;
  hierarchicalMenu: {
    [attribute: string]: HierarchicalMenuState;
  }
  hits: HitsState;
  infiniteHits: InfiniteHitsState;
  analytics: AnalyticsState;
  places: PlacesState;
  poweredBy: PoweredByState;
  range: {
    [attribute: string]: RangeState;
  ratingMenu: {
    [attribute: string]: RatingMenuState;
  };
  numericMenu: {
    [attribute: string]: NumericMenuState;
  };
  voiceSearch: VoiceSearchState;
  geoSearch: GeoSearchState;
  queryRules: QueryRulesState;
  hitsPerPage: HitsPerPageState;
  pagination: PaginationState;
  refinementList: {
    [attribute: string]: RefinementListState;
  };
  answers: AnswersState;
}>;
```