React vs. Theme | Yext Hitchhikers Platform
Background
Historically at Yext, all Search frontends have been built using the Hitchhiker Theme . The Theme is a bundled package of files and code templates that sets up the necessary components of your Search experience like the search bar, result cards, and facets. The Theme has served us well over the years; as it provides admins with a way to build Search experiences without needing to know how to code.
The downside to the Theme is that it is built on Search UI SDK, a vanilla JS library that doesn’t take advantage of any modern web frameworks like React. For this reason, it can be difficult to customize Search experiences built on the Theme.
React, in contrast, is a modern frontend framework that makes customization easier, improves experience speeds, and comes with a large and active developer ecosystem.
In order to utilize React we built Search UI React, a component library built on our Search Headless React library allowing developers to easily create and customize Search experiences.
Here’s a table showing the relationship between our current frontend options.
| Existing | New | |
|---|---|---|
| Library | Search UI SDK | Search UI React |
| No-Code Tool | Hitchhiker Theme | Coming Soon |
Search UI SDK is the library that powers the Hitchhiker Theme. Similarly, Search UI React is the library that eventually will power a no-code React visual editor.
Which Option Should I Choose?
If you are debating between both build options, here are the items you should consider:
React
Today at Yext, customers that want to build Search experiences using React are limited to using our SDKs directly. We do not currently have a low-code solution for building React experiences.
Customers building Search experiences on React will likely use our Search UI React library. Check out this Storybook to visualize and test the components available.
To take this approach you must satisfy one of the conditions from group A AND one of the conditions from group B below:
Group A
- You have developer resources and are building the experience yourself.
- You are paying for either our services team or a partner to develop the experience for you.
Group B
- Your site is already built in React.
- You are using the subdomain method to integrate. The JS Snippet (iframe) method is not supported in React as of writing this document. We plan on releasing a solution to this in early 2024.
If no conditions from both group A and group B are satisfied, we don’t have a good way to support any Search experience built in React. You should use the Theme instead.
We are actively working on a project that will enable customers to embed React Search experiences into their site, regardless of if it is built in React or not. When that project is complete, we will update this document to remove Group B above.
Feature Parity
If a condition from both groups above are met, then we should consider the feature parity between the two options to determine which approach we should take.
Here is the following list of features that are available in one approach but not the other:
| Feature | Description | Theme | React |
|---|---|---|---|
| Visual Autocomplete | The ability to surface previews in the query suggestions dropdown. |  |
 |
| Functions in Query Rules | The use_function query rule action allows developers to execute arbitrary typescript functions. | |
|
| Hierarchical Facets | The ability to click through a ‘hierarchy’ of categories to filter results. | |
|
| Number Range in Numerical Facets | A number range filter that allows users to set minimum and maximum values. The Theme only allows pre-set ranges. | |
|
| Custom Icon for Search Bar | The ability to add a custom icon to the search bar. While this isn’t possible in Search UI React, users can create their own search bar component to achieve this feature. | |
 |
| Disallow Empty Search | The ability to configure the search bar to not run a query with no input. In Search UI React this defaults to true and is not configurable. However, users can create their own search bar component to achieve this feature. | |
|
| URL Routing (query parameter handling) | The ability to store the query and filters/facets/pagination in the URL so that users can share the link to the page. While this isn’t possible in Search UI React, users can use external libraries like React Router to solve this issue. | |
|
| Conversion Tracking | While the ability to capture click events in analytics is available both in the Theme and in React, the ability to attribute “conversions” to specific clicks or events taken on the experience is only currently available in the Theme. We are working on making this possible in React soon! | |
|
| IFrame Integration | Search UI React experiences are not currently able to use the iFrame integration method. | |
|
While this captures the list of built-in features available in each library, it is by no means an all-encompassing list of capabilities. Our React SDK is significantly more flexible and customizable. If you have the ability to use React and don’t require any of the missing features listed above, it is our recommendation that you build using React. The Theme should only be used if it isn’t possible to use React.
Future Plans
We want all Search experiences to be built on React in the near future. Today this isn’t likely because we don’t have a way to embed React experiences onto non-React sites. We plan to remedy this in 2024.