Client State Viewer

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:

1. Your component receives the expected properties
2. Data bindings resolve to the correct values
3. State changes propagate as expected when users interact with the page

Understanding Page Behavior

When a Next Experience page doesn't behave as expected:

1. Open the Client State Viewer
2. Navigate to the relevant component state
3. Compare actual values against expected values
4. 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:

1. Verify that data resources have loaded
2. Check the response data structure
3. 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.

Related

• Sidekick Overview — All five debugging tools