Navigate to reactivesearch-manifest.json file.

Add "hello-world" page key under the "pages" JSON object

You may create a new directory - "pages" under "src" to house new pages.

Create a new page "HelloWorld.js" under "src > pages" directory

Import HelloWorld.js from src/pages/ in App.js

import HelloWorld from './pages/HelloWorld';

Add a new route '/hello-world' to "App.js" that renders "HelloWorld.js"

Navigate to generated codesandbox link/ deployed link and navigate to '/hello-world' route

Confirm the presence of the newly added page. 🎉

Adding components(search, facets and results) to HelloWorld.js page  

Navigate to the "UI components" tab, and select 'hello-world' from page route selector

Finish configuring facets, results settings, search settings, etc, and save the settings

Navigate to preferences constants to confirm the page settings for '/hello-world' route

The idea is to use the preferences constant from constants.js and render a ReactiveSearch UI using the preferences.

I have done the hard part 😎 for you, copy the snippet and replace the content of "HelloWorld.js"

At this point, the '/hello-world' route should have a search UI render as below.

Netlify

Codesandbox

Hotjar

Loom

Appbase

For a UI builder that’s created from the dashboard, how to add a new page and have it show up in the UI builder

Add a new route to a Search UI