Page
- Arrange page elements visually in Edit mode.
- Connect values, events, APIs, and navigation in Plug mode.
- Use Play mode to verify the complete interaction.
Canvas Modes
| Mode | Purpose |
|---|---|
| Edit | Arrange elements, spacing, content, and visual properties. |
| Plug | Connect state, inputs, events, API calls, effects, and navigation. |
| Play | Use the page as a visitor would and verify the full flow. |
Canvas editor with page elements and interaction connections.
Bindings And Actions
A binding connects a visual property to a value. An action connects an event, such as a click or form submit, to Page Script behavior. Keep page-local values on the page and move durable business work into APIs.
- Bind inputs to page-local state.
- Connect buttons and forms to actions.
- Map action values into API request fields.
- Bind API response values to status, lists, modals, or navigation.
Semantic Tables
A canvas Table uses real HTML table structure. The table palette can add, duplicate, move, and remove rows or columns; toggle header and footer sections; bind a selected row to data; select the table, current row, or current column; and style each structural part with the normal visual controls.
Page Script
Page Script is the typed interaction layer behind Plug mode. It represents page state, handlers, derived values, component inputs, and modal callbacks. The editor exposes these as blocks and connections, so normal page work stays visual.
Effects And Navigation
Use a load effect for work that begins when the page opens and a change effect for work triggered by a value update. Navigation actions target known page routes. Modal actions open a bounded interaction and pass typed values or callbacks into that modal.
- Load initial page data through an API.
- Refresh dependent values after a successful action.
- Navigate with the required dynamic route values.
- Close a modal and refresh its owning page when the workflow completes.