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?.
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 search pages:
| Framework Description | Getting Started Page | NPMJS Package |
| JavaScript | JS Getting Started | NPM Package |
| Vue | Vue Getting Started | NPM Package |
| React | React Getting Started | NPM Package |
| Angular | Angular Getting Started | NPM 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.
| Widget | JavaScript | Vue | React | Angular |
| Input | Download | Download | Download | Download |
| Results | Download | Download | Download | Download |
| Facets | Download | Download | Download | Download |
| Pagination | Download | Download | Download | Download |
| SearchFeedback | Download | Download | Download | Download |
| RelatedSearches | Download | Download | Download | Download |
| ExternalPromotions | Download | Download | Download | Download |
| Sorting | Download | Download | Download | Download |
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:
| App | JavaScript | Vue | React | Angular |
| Accelerator Page | Github Link | Github Link | Github Link | Github Link |
| Job Search App | Github Link | Github Link | Pending | Pending |
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.
Selecting one of the APIs on this screen will provide you with the Endpoints needed to query the index or enable the search functionality.
Questions?
Do not hesitate to contact the SearchStax Support Desk.