App Studio
State Inspector for Data Binding
The State Inspector is the primary debugging tool for data binding — it shows all resolved token values, variable states, and binding errors in real time.
Opening the State Inspector
- Press Ctrl+I in the builder
- Click the bug icon in the toolbar → State Inspector
- Developer mode only — not visible in published apps
Variables Panel
The Variables panel shows all declared app variables with their current values. You can edit values directly for testing:
// State Inspector Variables panel shows:
searchTerm: "" → editable → type "smith" → DataGrid re-fetches
selectedStatus: "all" → change to "active" → see filtered results
currentPage: 1 → change to 3 → pagination updates
showFilters: false → toggle to true → filter panel shows
selectedLeadId: null → set to "lead-123" → detail panels update
Route Params Panel
Shows current route.* values. You can seed test values for pages that require route params — without needing to navigate to them from a DataGrid row click:
// Testing a detail page in the builder:
// Instead of clicking a DataGrid row, set in State Inspector:
route.id = "lead-456"
// Canvas immediately re-renders the detail page for lead-456
// DataGrid loads activities for lead-456
// Form widget pre-fills with lead-456 data
Token Resolution Log
The Resolution Log records every {{ }} expression evaluated in the last render cycle:
| Column | Description |
|---|---|
| Expression | The raw token string as written in config |
| Resolved | The actual value after evaluation |
| Widget | Widget ID that used this token |
| Property | Which config property contained the token |
| Status | OK (green) | Pending (yellow) | Error (red) |
Common Binding Errors in the Inspector
| Error | Cause | Fix |
|---|---|---|
| Undefined variable | Token references a variable not declared in app config | Declare the variable in the App root Variables tab |
| Route param missing | AppPage does not declare the param in its route pattern | Add :paramName to the AppPage route |
| Service call failed | AIExtension.Service method returned an error | Check the method name; verify service layer has the method |
| Type mismatch | Token resolved to wrong type for the property | Add type coercion in the token: {{ Number(variables.count) }} |
| Circular dependency | Widget A binds to Widget B which binds back to Widget A | Break the cycle — use a variable as intermediary |