Sign Up

Client State Viewer

Inspect Next Experience client-side state in real-time using the Sidekick debugging tool.

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.

Client State Viewer showing the state tree for a Next Experience page <!-- Screenshot needed: Client State Viewer with expanded state tree -->

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.

  • 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.