January 09, 2024

Kevin Montgomery


6 min. read

How to use SearchStax Studio Search UI Components with Sitecore JSS

SearchStax Studio now includes pre-built site search component libraries for ReactVueAngular, and other JS-powered front-ends. These components make it easier to build, style, test, and deploy your search experience to your headless front end or Node-powered rendering engine. SearchStax Search UI Components can be used throughout your Sitecore XP rendering flow but they’ll typically perform best when used client side for faster request and response (as opposed to using SSR and calling the SearchStax APIs during that process).

What you’ll need to get started

Once you’ve got your Sitecore instance and SearchStax Studio account set up you can begin building custom search experiences. You’ll need to connect your Sitecore instance to your SearchStax account using our Sitecore Connector. After your content and schemas have been updated and indexed you can set up your SearchStax Studio App and configure search fields, relevancy, facets, and other search enhancements.

Sitecore Connected, Integrated, and Headless

Sitecore offers several different methods for decoupled or completely headless page rendering. Typically Sitecore rendered an entire page from templates and components before sending the complete HTML to a user for viewing – now Sitecore provides direct integration with frameworks such as React, NextJS, or Node for client and server side rendering Sitecore pages through the JSS SDKs as well as REST and GraphQL APIs for consuming Sitecore content and features from a completely headless front end.

In this example we’ll build a completely headless front end that can consume content and other features from the Sitecore API while also fetching search results from SearchStax Studio using the Search UI Components and underlying APIs.

Search Experience

One of the major benefits of developing your own search experience using our SearchStax Search UI packages is the complete customization of search features and interface as well as adding or embedding search across your entire site and within specific templates or components.

In this example we’ll add a site-wide search box to the app so visitors can start searching from any page or experience they’re currently looking at. We’ll also add a customized site search component to display search results and provide faceting, filtering, related keywords, and other search enhancements.

Setting up SearchStax Studio with Sitecore

Before you can begin building your search interface you’ll need to connect your Sitecore instance with SearchStax Studio using our Sitecore connector and configure your search app. A SearchStax Studio search app includes relevance modeling, content to search field mapping, facet and filtering options, as well as other search customization options.

  1. Adding the connector
  2. Configuring schema and fields and then indexing data
  3. Configure search features

Once your content is indexed and searchable you can start requesting and consuming search results through the Search UI Components packages and APIs.

Create a JSS App

Sitecore JavaScript Rendering SDKs (JSS) can create a boilerplate front end app that connects with your Sitecore instance. Typically the boilerplate apps have an AppRoute.js component that handles URL requests via react-router-dom and fetches content from Sitecore.
					npx create-sitecore-jss
Select the appropriate template (Angular, NextJS, Node.js for server side rendering, React, or Vue) and enter your Sitecore hostname and API endpoints to build the initial app. Once installed run `jss start` to run the app and connect to your Sitecore instance.

Adding Search UI Package

Start by adding the appropriate Search UI Components package to your app using NPM. In this example we’ll be using React and starting with Sitecore’s Headless Demo app.

					cd ~/your-react-app/
npm i @searchstax-inc/searchstudio-ux-react


The Search UI package uses a SearchStaxWrapper component that connects to the SearchStax Studio APIs to handle user requests and show relevant results. Individual search components (such as input box, facets, and individual search results) will need to be encapsulated within a SearchStaxWrapper component. This allows you to use individual features (e.g. showing a site search box in the site navigation) without having to include every other part of the search page.

Building the Search Page

Typically site search includes a stand-alone result page that includes a search input bar, individual search results, and other search refinement features such as facets, filtering, and pagination. With the SearchStax Search UI components you can create a stand-alone search result page or integrate search features and experience within components or other design or UX features such as overlays, inline search results, and more.

In this example we’ll add a site-wide search box that includes autocomplete along with a stand-alone search page. Since site search is a dynamic experience it makes the most sense to handle search requests and result display on the client side. You can create a search-specific client-side experience within Sitecore by embedding the search-specific JSS appuse the `isServer` method for apps that are backed with server side rendering, or add the dynamic search features outside of the Sitecore Layout integration in the front end app.

Updating Layout.js

The Layout.js component builds the basic page layout – including the global navigation and Sitecore content. We can start by adding a search input box in the global navigation by modifying the Navigation function.
					  <div className="d-flex flex-column flex-md-row align-items-center p-3 px-md-4 mb-3 bg-white border-bottom">
	<h5 className="my-0 me-md-auto fw-normal">
  	<NavLink to="/" className="text-dark">
    	<img src={logo} alt="Sitecore" />
	<nav className="my-2 my-md-0 me-md-3">
    	className="p-2 text-dark"
    	rel="noopener noreferrer"
  	<NavLink to="/styleguide" className="p-2 text-dark">
  	<NavLink to="/graphql" className="p-2 text-dark">
  	<NavLink to="/search" className="p-2 text-dark">
		<InputWidget />


Updating AppRoot.js

We’ll intercept any /search URL requests in the AppRoot.js component and use a SearchPage.js component to display search results. Any other URL requests will get passed to Sitecore to fetch and render.
					class AppRoot extends React.Component {
  render() {
	const { path, Router, graphQLClient } = this.props;

	return (
  	<ApolloProvider client={graphQLClient}>
    	<SitecoreContext componentFactory={componentFactory} layoutData={this.props.ssrState}>
      	<Router location={path} context={{}}>
          	<Route path="/search" element={<SearchPage />} />
          	<Route path="*" element={<JssRoute isSSR={!!this.props.ssrState} />} />


Creating SearchPage.js Component

The actual search result page is a completely dynamic interface that should be handled entirely on the client side. The SearchStax Search UI Components automatically handle API integration and requests so user searches will be sent directly to your site search app instead of getting passed through a server side rendering delay.

There may be instances where server side rendering of search results is required – in this case the SearchStax Search UI components will need to be implemented in your Node server rendering flow.

SearchStax Studio – Search UI Examples

We’ve created several demo search experiences using the Search UI Components for React, Angular, Vue, and other JS frameworks. Our SearchPage component will use our SearchStax Studio React example that includes search bar with autocomplete, facets, filters, pagination, and related search results.
					return (
    	router={{ enabled: true }}
    	<div className="searchstax-page-layout-container">
      	<InputWidget />

      	<div className="search-details-container">
        	<OverviewWidget />
        	<SortingWidget />

      	<div className="searchstax-page-layout-facet-result-container">
        	<div className="searchstax-page-layout-facet-container">
          	<FacetsWidget />

        	<div className="searchstax-page-layout-result-container">
        	<ResultWidget />
          	<ExternalPromotionsWidget />
          	<RelatedSearchesWidget />
          	<PaginationWidget />
These components can be completely customized, reused, and extended throughout your app so that site search can become an integral feature of your site.

Next Steps

Site search becomes a much more engaging feature when it’s properly integrated in your site UI and design. Our Search UI Components and Sitecore connector make it much easier to integrate and customize site search while still using your preferred tech stack, workflows, and user experience practices.

Learn more about headless CMS configurations and see how SearchStax Studio can enhance your Sitecore experience.

Why should I render search results on the client side?

SearchStax Studio supports UI Components and APIs that directly interact with your site search instances so they can quickly fetch and re-render search results without re-rendering the entire page.

What are Search UI Components?

Search UI Components are front end packages for JavaScript-powered frameworks including React. Search UI Components let you build customized search interfaces and result pages for your SearchStax Studio app.

Can I Use Search UI Components in my Server Side Rendering Process?

Yes you can include Search UI Components in any JS-powered frameworks including React, NextJS, Node, and others. Server side rendering may be useful is search result content needs to be served statically.

By Kevin Montgomery

Product Marketing Engineer

"Our Search UI Components and Sitecore connector make it much easier to integrate and customize site search while still using your preferred tech stack, workflows, and user experience practices"

Get the Latest Content First