Inspect Next Experience client-side state in real-time using the Sidekick debugging tool.
Last updated: February 19, 2026
The Client State Viewer lets you inspect the client-side state of Next Experience (Polaris) pages. See what data is flowing through the UI framework, how components are connected, and what values are currently set — all in real-time from the Sidekick window.
On UI Builder pages you can also edit page-level state values on the fly, and on Seismic-rendered pages you get a focused, read-only runtime view.
Opening the Client State Viewer
Use the slash command /skclientstate or open Sidekick and select the Client State tab.
What You Can See
The Client State Viewer displays the current client-side state as a navigable tree. This includes:
Page-level state — Values set at the page level in UI Builder
Component properties — Props passed to individual components
Data bindings — Live data flowing from server to client
Client-side variables — State managed by the browser
Each node in the tree shows its current value and updates in real-time as you interact with the ServiceNow page.
Page Runtime Mode
When you're on a UI Builder page or a Seismic-rendered page, Client State automatically focuses on the active page runtime so you don't have to dig through the full macroponent tree to find it.
UI Builder pages — All page-level state values are listed and editable. Click a value to change it; the change is applied to the running page immediately and components that depend on the value update reactively. Object and array values can be edited as JSON.
Seismic pages — The runtime state is shown as a read-only snapshot. You can inspect values and watch them change as you interact with the page, but editing is not supported.
This is the same view that used to be reached via /skuib — that command has been retired in favour of /skclientstate.
Use Cases
Test component behaviour — Set a state value (for example isLoading = true or errorMessage = "Something went wrong") and observe how your components react.
Debug conditional logic — Find the controlling state value and toggle it to verify both branches render correctly.
Reproduce edge cases — Set the exact combination of values that triggers a bug, instead of navigating through a workflow to reach that state naturally.
Verify data resources — Check that REST/GraphQL/Script data resources have populated state with the expected shape and values.
Reload the page to reset all state values to their defaults.
Navigating the State Tree
Expand/collapse — Click on any node to expand or collapse its children
Search — Use the search field to find specific state keys or values
Copy — Click the copy icon on any node to copy its path or value
Use Cases
Debugging a UI Builder Component
When building custom components for Next Experience, use the Client State Viewer to verify that:
Your component receives the expected properties
Data bindings resolve to the correct values
State changes propagate as expected when users interact with the page
Understanding Page Behavior
When a Next Experience page doesn't behave as expected:
Open the Client State Viewer
Navigate to the relevant component state
Compare actual values against expected values
Identify where the data flow breaks down
Inspecting Data Resources
Data resources (REST, GraphQL, Script) populate client state with their results. Use the Client State Viewer to:
Verify that data resources have loaded
Check the response data structure
Identify loading or error states
Tips
Live updates — The state tree updates in real-time. Change a field value on the page and watch it reflect instantly.
Deep paths — Use dot notation in search (e.g., state.data.result) to jump to deeply nested values.
Compare before/after — Open the viewer, note the current state, perform an action, and see what changed.