UI Kits

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.

• JavaScript or JS Frameworks
• Search UI Rest APIs

Here is a brief overview of each of these resources.

JavaScript or JS Frameworks

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, see What are Headless Content Management Systems?

SearchStax Site Search lets you build your search page using pre-built UI components in various JavaScript frameworks in headless environments. You can find the JS Frameworks by navigating to Site Search > Configurations > Search UI > UI Kits.

Click the icon of the framework you prefer. The blue button at the bottom of the screen will take you to its documentation.

There are four JS Framework options:

• JavaScript is a programming language for creating interactive web pages. It can be used for both front-end and back-end development.
• Vue is a JavaScript-based framework that creates web applications using a data object and HTML templates. It is known to be smaller, faster, and easier to use than other frameworks.
• React is a JavaScript library that creates web applications using a state object and JSX. It 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 based on the concept of components. It supports full-stack development for building all types of web applications, especially single-page applications (SPAs).

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 search pages:

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.

Pagination Variables

The Pagination widget exposes variables for customizing pagination labels:

• currentPage: The current page number (1-indexed).
• totalPages: The total number of pages based on result count and page size.

Use these variables to display page-based pagination labels (for example, "Page 1 of 10") instead of the default record-range format (for example, "1 - 15 of 150").

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:

Search UI Rest APIs

SearchStax Site Search includes several APIs to streamline and accelerate the implementation process.

See the Site Search API Overview for more information on the Search, Analytics, Discovery, and Ingest APIs.