---
sourceDocument: Yokohama Build or modify applications
sourceDocumentLink: https://servicenow-prod.fluidtopics.net/r/yokohama/application-development

 Release :

    - yokohama

ft:locale :

    - en-US

ft:publication_title :

    - Yokohama Build or modify applications

ft:clusterId :

    - cadev

bundleId :

    - cadev

workflow :

    - Development, Data, and Analytics


---

# Learn how to view and test your UI Builder experience

# Learn how to view and test your UI Builder experience {#ariaid-title1}

* Release version: Yokohama
* 
* Updated January 30, 2025
* 
* ![](https://www.servicenow.com/docs/portal-asset/ico-clock) 1 minute to read

Preview your experience in UI Builder to see how it looks and functions while building an experience. Previewing helps ensure that your experience works as expected, that the data resources are available, and that the layouts are set up
correctly.

## Test your page {#preview-page-ui-builder__section_fxm_cl2_qyb}

You can test your page as the developer or see it as it would appear to an end user. Previewing doesn't require saving first.  
Note:  
Previewing inactive variants and page collections (sub pages) isn't currently supported.

You can test various aspects of your page.

* Test the variant that you're currently working on, including modals, viewports, and dynamic data by selecting the Preview button, which opens an overlay.

* Test with different data by changing the test values and selecting Apply. For more information, see [Test values in a page](https://servicenow-prod.fluidtopics.net/4MV~wHeiBgzw~DS9oT5mYw "Add test values to your URL as a way to bring test data into a page.").

* See what the variant looks like at different screen widths by selecting a form factor icon. For example, view the variant at tablet or mobile size. For more information about creating pages for
  different form factors, see [Responsive authoring](https://servicenow-prod.fluidtopics.net/kNWXU93MS5BvFGh0wpY8SA "Use responsive authoring to create UI Builder pages that adjust smoothly to different form factors (sizes), such as desktop, tablet, and mobile.").

  ![Preview pane with black arrow pointing to form factor icons.]()

{#preview-page-ui-builder__ul_a3c_qk2_qyb}  
Note:  
If you edit the test values or the form factor when previewing, the new test values or form factor are retained when you view the page variant in the editor. For example, if you changed the form factor to mobile while previewing, the page variant is displayed in the editor at the mobile form factor. You can always change to another size by selecting a form factor icon.

When you have finished testing, select the X in the upper right to close the overlay.

## Test your page as an end user {#preview-page-ui-builder__section_srj_kl2_qyb}

Test which variant users see by opening the URL path. Select the arrow next to the Preview button and in the drop-down list select Open URL path. UI Builder checks the audience, conditions, and condition order, and then opens the appropriate variant in a new browser tab. When you have finished testing, close the tab.