Sign Up

UIB Page State

View and edit UI Builder page state values in real-time for debugging Next Experience pages.

The UIB Page State tool lets you view and edit page-level state values for UI Builder (Next Experience) pages in real-time. When building or debugging custom pages, you can see exactly what state the page holds and change values on the fly to test different scenarios.

UIB Page State showing editable state values for a Next Experience page <!-- Screenshot needed: UIB Page State with a few state entries, showing edit capability -->

Opening UIB Page State

Use the slash command /skuib or open Sidekick and select the UIB Page State tab.

What You Can Do

View Page State

All page-level state values are displayed in a structured list. Each entry shows:

  • State key — The name of the state parameter
  • Current value — The live value, updated in real-time
  • Type — String, number, boolean, object, etc.

Edit State Values

Click on any state value to modify it. Changes are applied immediately to the running page — no reload needed. Components that depend on the state value update reactively.

Monitor State Changes

As you interact with the page (clicking buttons, filling forms, navigating), watch the state values change in real-time. This makes it easy to trace how user actions affect page state.

Use Cases

Testing Component Behavior

When building a custom Next Experience page:

  1. Open UIB Page State
  2. Manually set a state value (e.g., isLoading = true)
  3. Observe how your components react
  4. Set another value (e.g., errorMessage = "Something went wrong")
  5. Verify error states render correctly

Debugging Conditional Logic

When page components show or hide based on state:

  1. Open UIB Page State
  2. Find the controlling state value
  3. Toggle it to verify both conditions
  4. Confirm the expected components appear/disappear

Reproducing Edge Cases

Some bugs only occur with specific state combinations:

  1. Open UIB Page State
  2. Set the exact combination of values that triggers the bug
  3. Debug without needing to navigate through complex workflows to reproduce the state naturally

Tips

  • JSON editing — For object or array values, the editor supports JSON. Make sure your JSON is valid before applying.
  • Undo changes — Reload the page to reset all state values to their defaults.
  • Combine with Client State — Use the Client State Viewer to see the broader state tree, and UIB Page State to manipulate page-level values specifically.