UIB Page State
View and edit UI Builder page state values in real-time for debugging Next Experience pages.
Last updated: February 19, 2026
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.
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:
- Open UIB Page State
- Manually set a state value (e.g.,
isLoading = true) - Observe how your components react
- Set another value (e.g.,
errorMessage = "Something went wrong") - Verify error states render correctly
Debugging Conditional Logic
When page components show or hide based on state:
- Open UIB Page State
- Find the controlling state value
- Toggle it to verify both conditions
- Confirm the expected components appear/disappear
Reproducing Edge Cases
Some bugs only occur with specific state combinations:
- Open UIB Page State
- Set the exact combination of values that triggers the bug
- 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.
Related
- Sidekick Overview — All five debugging tools
- Client State Viewer — Inspect the full client state tree