Modelling Runtime Preview
The Modelling Runtime Preview bridges two core areas of Mockomat — the visual data modelling board and the API runtime — into a single, connected workflow. Instead of switching between separate pages to model your data, configure views, and preview results, you can launch a live runtime preview directly from any table.
What It Does
When you click the play button on a table card header (on the modelling board) or in a table row (on the records page), a preview panel opens that combines three things in one place:
- View Configuration — configure how the table's data is presented (columns, sorting, pagination, detail relations)
- Live Data Preview — see real query results as they would appear to API consumers
- Relation Detail View — click a row to inspect related records in a detail sidebar
This gives you an instant feedback loop: model your data, see it live, and adjust — all without leaving the modelling workspace.
Runtime preview panel with view configuration, data table, and relation detail.
How to Open the Preview
There are two entry points:
From the Modelling Board
Every table card on the visual board has a play button in its header area. Clicking it opens the runtime preview for that table.
- If a view already exists for the table, the preview opens in edit mode with all existing configuration loaded.
- If no view exists, the preview opens with default settings and a Create button to save it as a new view record.
Play button on a table card header opens the runtime preview.
From the Records Page
On the modelling records page, each table row has a play button in its action column. This works the same way — opening the runtime preview for that table.
Panel Layout
The preview panel uses a responsive multi-column layout:
Two-Column Layout (No Detail Relations)
| Left | Center |
|---|---|
| View Configuration | Data Preview |
Three-Column Layout (With Detail Relations)
| Left | Center | Right |
|---|---|---|
| View Configuration | Data Preview | Relation Detail |
The right column appears only when detail relations are configured for the view and a row is selected. If no detail relations exist, the panel uses the simpler two-column layout.
View Configuration (Left Column)
The left column provides the same view settings you would configure on the Views page, pre-filled with the selected table:
- Table — pre-selected and locked to the table you launched from
- Column Overrides — visibility, label, width, alignment, sort/search/filter toggles
- Pagination Defaults — page size, default sort field, sort direction
- Detail Relations — which related tables to show in the detail view, and how (record preview vs. sub-table)
- API Binding — query name and single query name
Changes to the configuration update the data preview in real time.
Data Preview (Center Column)
The center column shows a live data table — the same view you see in the runtime preview page. It reflects:
- The current column configuration (visible fields, order, labels)
- Pagination and sorting defaults
- Search and filter capabilities based on attribute flags
This is the actual mock API output, rendered as a table. What you see here is exactly what API consumers receive from the POST /mock/{slug}/graphql endpoint.
Relation Detail (Right Column)
When you click a row in the data preview, the right column shows the detail view for that record:
- Record Preview (n:1 relations) — displayed as compact preview cards showing the related parent record
- Sub-Table (1:n relations) — displayed as paginated tables showing related child records
This column only appears when detail relations are configured and enabled. If no relations are set up, the panel stays in two-column mode.
Row click reveals related records in the detail column.
Creating vs. Editing a View
The preview panel adapts based on whether a view already exists for the table:
| Scenario | Behavior |
|---|---|
| No view exists | Opens with default settings. A "Create" button lets you save the configuration as a new view record. |
| View exists | Opens in edit mode with all existing settings loaded. Changes can be saved immediately. |
This means you never need to leave the modelling board to create or adjust views — the preview panel handles both creation and editing.
Cross-Navigation
The runtime preview creates a direct connection between modelling and runtime:
From Modelling to Runtime
The preview panel includes a "Show in Runtime" link that navigates to the dedicated runtime view page. This is useful when you want the full runtime experience with the complete toolbar and workspace controls.
From Runtime to Modelling
The runtime view toolbar includes a "Go to Board" shortcut that navigates back to the modelling board and centers the viewport on the related table. This makes it easy to jump between runtime preview and visual modelling without losing context.
Cross-navigation links between modelling board and runtime view.
When to Use This Feature
| Use Case | Recommended Approach |
|---|---|
| Quick data check while modelling | Use the play button for instant preview |
| Configure a new view for a table | Use the play button — it handles view creation |
| Adjust column settings | Use the play button — edit mode with live preview |
| Deep runtime exploration | Start with the play button, then click "Show in Runtime" |
| Fix a field issue spotted in runtime | Click "Go to Board" in the runtime toolbar |
Summary
The Modelling Runtime Preview eliminates the disconnect between designing your data model and seeing it in action. By bringing view configuration, live data preview, and relation detail into a single panel accessible from the modelling board, you get an instant feedback loop that accelerates your workflow.