State Inspector
The State Inspector is a developer tool that shows all resolved token values and the current app state — invaluable for debugging data binding expressions.
Opening the State Inspector
- Press Ctrl+I in the builder
- Click the bug icon in the toolbar → State Inspector
- Available only in the builder — not in the published app runtime
The State Inspector opens as a resizable panel at the bottom of the canvas (or as a floating overlay).
What the State Inspector Shows
Variables
All app variables with their current resolved values. Editable inline — change a variable value to see how the canvas updates reactively.
Route Params
Current route.* token values. In the builder, you can seed route params with test values (e.g., set route.id = "123" to test a detail page).
Context
The current context.* values: userId, tenantId, name, roles. Reflects your actual authenticated session.
Token Resolution Log
A log of every {{ }} expression resolved on the current page — shows the expression, its resolved value, and any resolution errors.
Seeding Test Values
The State Inspector allows you to manually set variable and route param values for testing purposes. This is especially useful for testing detail pages (which require a route.id) without navigating to them via a grid row click:
// In the State Inspector, seed test route params:
route.id = "lead-456"
route.status = "active"
// Now the canvas renders as if the URL was /leads/lead-456?status=active
// Widgets using {{ route.id }} will show "lead-456"
// DataGrid will fetch data for this specific id
Token Resolution Log
The resolution log shows every token evaluated during the last render cycle:
| Column | Description |
|---|---|
| Expression | The raw token expression as written in the config |
| Resolved Value | The actual value after resolution |
| Source | Where the value came from (variable, route, context, service) |
| Widget | Which widget used this token |
| Status | OK (green), Pending (yellow for async), Error (red) |
If a widget shows a binding error (red border on canvas), open the State Inspector and check the Token Resolution Log. Errors include "undefined variable", "service call failed", and "type mismatch" — each with a tooltip explaining the root cause and suggested fix.