November 08, 2023

Kevin Montgomery


4 min. read

Search UI Kit for SearchStax Studio delivers a big win for developers looking to add site search in headless architectures. 

For years, the SearchStax Studio product has enabled organizations across the globe to painlessly transform their digital experiences to be search-optimized. Through innovative packaging, workflow designs, extensive APIs, and native connector integrations, SearchStax Studio has enabled digital teams to embed site search functionality into their websites in record time.

Today we’re happy to announce Search UI Kit, which adds to SearchStax Studio’s flexibility, ease of use, and speed of implementation, by directly addressing the technical requirement within headless architectures, to decouple front-end search capabilities from back-end systems and logic, within common enterprise CMS and DXP environments such as Acquia/Drupal, Sitecore, Adobe, Contentful, and others. We’re committed to continue building the toolsets and features that devs and marketers need to deliver engaging and powerful site search for their site visitors.

Search UI Kit includes JavaScript, React, Vue, and Angular components that you can use to build out customized site search as part of your headless front end.

The Search UI JS, Search UI ReactSearch UI Vue, and Search UI Angular packages are available for install via npm. You can build an entire search page with our prebuilt components as well as use search components on other sections and templates of your front end.

What are the Search UI Packages?

Our newly-released Search UI packages provide the components and framework to build a customized site search experience with Vanilla JS, React, Vue, or Angular. The Search UI packages handle API integration and state management for your search result page front ends. You can compose and style your search result page using our pre-built components for seamless integration in your deploy process, front end development workflows, and site UX/UI.

Combined with our native CMS integrations, content indexing/ingest REST APIs, and site crawlers you can build a headless experience with the back end systems and JavaScript front ends of your choice.

SearchStax Studio Accelerator

The SearchStax Studio Accelerator is a pre-built JavaScript template for site search result pages. If you’re already using the Accelerator you can continue to do so – but the Search UI JS package offers the same feature-set and support with more options for customization and integration with your front end.

Building with Search UI for JavaScript, React, Vue, and Angular

You can get started today building with the SearchStax Search UI packages of your choice using npm. We’ve also built a couple of example site search front ends to show how certain features work and provide a template to develop from.

Drupal Decoupled and Headless

SearchStax can be directly integrated with Drupal using the Search API and SearchStax connectors. If you’re considering headless or have already moved to a decoupled front end you can continue to speed up your front end by using the Search UI package for front end framework. Using Search UI components for your search result page can provide faster response times by directly connecting SearchStax Solr servers instead of routing requests through the Drupal backend first. You’ll still have reliable direct integration with Drupal content and features while delivering results directly to site visitors. Our prebuilt search components can be used on your search result page and throughout your front end app so that search inputs, suggestions, and related items can be used beyond the search page.

Sitecore Headless

Search UI JS and Search UI React are a perfect fit for your JSS headless front end. You can directly connect to Sitecore using our connectors to keep indexes up to date and deliver fast results directly through your JSS app.

Using Search UI and SearchStax with other CMSes

SearchStax can be used with most content management systems in addition to Drupal and Sitecore. Our content Ingest APIs and site crawlers can index web pages, PDFs, Microsoft Office files, and more across multiple CMSs, document stores, and databases.

Search UI components can be used with front end frameworks like AngularJS and Node for easy deployment and scale. SearchStax Cloud can be deployed on AWS, GCP, and Azure so your search indexes can be deployed to the same regions and your front end infrastructure.

Headless frontends can make it easier to use the CMS of your choice, such as WordPress, Joomla, Django, and other enterprise platforms while getting the flexibility of rapid deployment from a decoupled front end. The Search UI JS package is easy to integrate and provides the quickest response time for answering user search queries.

What’s Next?

Get started with our site search and job search examples to explore SearchStax Studio features and the capabilities of the different Search UI packages. Learn more about building engaging site search experiences with our UX Best Practices blog.

By Kevin Montgomery

Product Marketing Engineer

You can build an entire search page with our prebuilt components as well as use search components on other sections and templates of your front end.

Get the Latest Content First