# Preview, network, and console controls
Navigate your app as you build, check screen sizes, investigate requests and errors, and understand when a test sends a real request.
Source: https://docs.rumata.dev/guides/controls-preview
Reviewed: 2026-09-06
## Before you start
- Open the named screen in Rumata. Available controls may depend on your account, permissions, and resource state.
## Preview navigation and layout
Preview shows your app as you build it. Interacting with the app can still call real backend services; preview is not a simulation of those services.
| Control | What it does |
| --- | --- |
| Preview Mode / System Explorer | Switch between the app preview and the factory’s resources. |
| Expand / restore window icon | Give the work area more space or restore the normal layout. |
| Back / Forward | Navigate the preview’s browsing history. The buttons can remain enabled even without a previous or next entry. |
| Refresh | Reload the preview page. |
| Enter URL path / Enter | Type a route such as /settings and press Enter to navigate there in the preview. |
| Split | Toggle a split layout so you can inspect the preview alongside its diagnostics. |
| Preview / Network / Console icons | Show the page, its recorded requests, or its logs. The network activity dot indicates recent or pending requests. |
| Device menu → Full / Mobile / Tablet / Desktop / Large Desktop | Choose the preview viewport. This helps check layout at different sizes; it does not replace testing on a physical device. |
| Deploy / Deployed / Failed status button | Open the publishing flow, with a paid-AI review when needed. The final [Deploy](https://docs.rumata.dev/guides/controls-frontend#deploy) action is in the deployment dialog. |
Reference capture from the separate Sabai Talk Thai application (September 8, 2026). Try a real customer task in [Preview](https://docs.rumata.dev/guides/controls-preview#navigation). Here the learner listens and chooses an answer; no answer was submitted for this capture.
Reference capture from the separate Sabai Talk Thai application (September 8, 2026). Open the size selector, then choose [Mobile](https://docs.rumata.dev/guides/controls-preview#navigation) to check the narrow layout.
Reference capture from the separate Sabai Talk Thai application (September 8, 2026). Check that text and controls remain usable at the selected width. Return to [Full](https://docs.rumata.dev/guides/controls-preview#navigation) when you finish.
## Loading screens and project conflicts
The preview may be starting, temporarily reserved by an agent, or connected to a different project. Read the displayed state before restarting anything.
| Control | What it does |
| --- | --- |
| Explore ideas / Click to explore / quill illustration | Show workspace suggestions while the preview loads. This does not send a prompt or change the loading process. |
| Suggestion dots / suggestion title chips | Choose a suggestion card. Cards also rotate automatically. |
| Back to loading | Return to the loading illustration. |
| Ready to Switch Projects? → Start This Preview | Replace the other project’s active preview with this one. Finish work depending on the other preview before switching. |
| Switch & Start VS Code | Confirm the project switch and start this project’s development editor. |
During startup, Rumata prepares the workspace before the preview becomes usable. Wait for the chat and preview to connect.
## Network requests
[Network](https://docs.rumata.dev/guides/controls-preview#network) shows the requests your app sends and the responses it receives. Use it to investigate an empty or slow screen, or an error.
| Control | What it does |
| --- | --- |
| all / success / error / pending | Filter the recorded request list by outcome. |
| Trash icon | Clear the displayed network log. It does not undo requests already sent. |
| Request row | Open its URL, method, status, time, duration, payload, headers, and available response body. |
| Truncated URL hover | Reveal the full address when it does not fit in the row. |
| Copy beside payload, headers, or response | Copy that section’s formatted content. Review credentials and personal data before sharing a copied log. |
| Test Workflow | Open a test dialog for the workflow matching this request’s method and path. Opening it does not resend the request. |
## Test a workflow from a captured request
The test form starts with captured request data. [Send](https://docs.rumata.dev/guides/controls-preview#replay) is a real execution and can repeat writes, messages, or other effects.
| Control | What it does |
| --- | --- |
| From Network Request / From Schema / Mixed Sources | Read where the form’s values came from. Editing a captured request changes its source indicator. |
| Reset to Schema | Replace request values with the workflow schema’s defaults when a schema exists. This loses your pending test edits. |
| HTTP method / URL | Set the action and destination for an edited request. |
| Params → path values | Fill every route placeholder before sending. Missing path values disable [Send](https://docs.rumata.dev/guides/controls-preview#replay). |
| Add Parameter / Add Header | Add a name/value row. Its checkbox includes or excludes it without deleting it; X removes the row. |
| Body | Edit the request JSON. GET disables the [Body](https://docs.rumata.dev/guides/controls-preview#replay) tab. |
| Send | [Send](https://docs.rumata.dev/guides/controls-preview#replay) the test. An unchanged captured request is replayed through the connected preview; an edited request is sent using the form values. |
| Response Body / Headers | Inspect the returned content and headers, alongside its HTTP status and response time. |
| Open in System Explorer | Close the test dialog and open the matching workflow editor. |
| Close / corner X | Dismiss the test dialog. |
## Console and runtime errors
The console contains messages from your app as you build it. It is a log viewer; the code editor’s terminal is a separate tool for running commands.
| Control | What it does |
| --- | --- |
| All / Errors / Warnings / Logs | Filter console messages by level. |
| Filter… | Search the console text. |
| Clear console | Remove currently displayed logs. It does not fix the underlying error. |
| Runtime Error → X | Dismiss the error overlay so you can inspect the page. |
| Copy Log | Copy the runtime error text. |
| Check the console tab for more details | Open the console. |
| Fix This Error | Send the error to Rumata’s build assistant to request a fix. This starts assistant work and can consume AI credits. |
## Related guides
- [Code and development machines](https://docs.rumata.dev/guides/development)
- [Frontend publishing and traffic controls](https://docs.rumata.dev/guides/controls-frontend)
- [Workflow run and performance controls](https://docs.rumata.dev/guides/controls-workflow-runs)