Search UI Kit

The SearchStax Site Search solution provides resources to implement search in the front-end of your headless web application. These resources are meant to accelerate the development of the search page regardless of your environment.

Here is a brief overview of each of these resources.

Search UI App

To accelerate front-end development, we offer a pre-configured search user interface with essential features for a world-class search experience.

You can find the Search UI App under the Search UI Kit in the left navigation pane. You can either view the Search UI directly using the View button or copy the Search Experience Template URL and paste the URL in a separate browser window.

JavaScript or JS Frameworks

SearchStax Site Search lets you build your search page using pre-built UI components in a variety of JavaScript frameworks in headless environments. You can find the JS Frameworks under the Search UI Kit in the left navigation pane.

There is a strong push toward headless CMS systems to manage, deliver and render content for users. For more background on headless content management systems, check out our blog post on What are Headless Content Management Systems?.

Site Search UI Kit provides tools for building Search pages in JavaScript, Vue, React, and Angular environments.

There are four JS Framework options:

  • JavaScript – is a programming language that is used to create interactive web pages and can be used for both front-end and back-end development.
  • Vue – is a JavaScript-based framework that uses a data object and HTML templates to create web applications, and is known to be smaller, faster and easier to use than other frameworks.
  • React – is a JavaScript library that uses a state object and JSX to create web applications and is ideal for larger and more complex applications. Our React widgets also work with Next.js.
  • Angular JS – is a JavaScript-based web application framework that supports full-stack development for building all types of web applications, especially single-page applications (SPAs), and based on the concept of components.

SearchStudio UX Packages

For each of the UX Packages, you can find the Framework description, the Getting Started page and NPM Package Libraries to build SearchStax Site Search search pages:

Framework DescriptionGetting Started Page NPMJS Package
JavaScriptJS Getting StartedNPM Package
VueVue Getting StartedNPM Package
ReactReact Getting StartedNPM Package
AngularAngular Getting StartedNPM Package

Widgets Directory

Here are the Widgets for each framework that can be used to create search experiences. The links go the NPMJS packages for each framework – JavaScript, Vue, React and Angular.

WidgetJavaScriptVueReactAngular
InputDownloadDownloadDownloadDownload
ResultsDownloadDownloadDownloadDownload
FacetsDownloadDownloadDownloadDownload
PaginationDownloadDownloadDownloadDownload
SearchFeedbackDownloadDownloadDownloadDownload
RelatedSearchesDownloadDownloadDownloadDownload
ExternalPromotionsDownloadDownloadDownloadDownload
SortingDownloadDownloadDownloadDownload

Pages Directory

The Pages directory contains example applications that demonstrate how to use the various widgets together to build real apps. Follow the links to GitHub below to see the application that implements one or more of the available Framework-related widgets:

AppJavaScriptVueReactAngular
Accelerator PageGithub LinkGithub LinkGithub LinkGithub Link
Job Search AppGithub LinkGithub LinkPendingPending

Search UI Rest APIs

SearchStax Site Search includes a number of APIs to streamline and seamlessly accelerate the implementation process.

Selecting one of the APIs will provide you with the Endpoints needed to query the index or enable the search functionality.

  • Search APIs – Search APIs are components that allow developers to seamlessly introduce search and auto-suggest capabilities to websites and applications
  • Analytics APIs – the Analytics APIs are designed to capture the tracking and reporting analytics data used by Site Search
  • Discovery APIs – the Discovery APIs drive the information for Popular Searches and Related Searches
  • Ingest APIs – the Ingest API lets you update Solr documents

Questions?

Do not hesitate to contact the SearchStax Support Desk.