Skip to main content

​
Preview and Code

The right side of the workspace toggles between Preview and Code.

​
Preview

Preview shows your app running live. Phone-size preview frame

​
While it starts

Opening a project that has been idle wakes its sandbox, which takes a few seconds. The panel says where it has got to — provisioning the sandbox, then waiting for your app’s server — and rotates through things Mythex can do while you wait. The preview panel starting a workspace Use the dots to move between tips, or the pause button to stop them rotating. If you have asked your system for reduced motion they do not rotate at all. Use it to:
  • Click through the real flows
  • Check layout on desktop and a phone-size frame
  • Validate forms and navigation
  • Spot issues before you publish
If Preview is blank or stale, check whether the app is running (Code → terminal) and ask Mythex to start the correct server for this project. You can also click Refresh in the preview toolbar, or use /fix.

​
Preview controls (desktop)

On a laptop, the bar above Preview holds:

​
Phone-size frame

Click the phone icon (Switch to Mobile). Drag the left or right edge of the frame to change width. Drag almost to the panel’s full width, then release, to leave mobile view (same as Switch to Desktop). Native phone apps are still coming soon — this frame is for responsive web layout.

​
Resize chat vs Preview

Drag the vertical divider between chat and Preview. Drag past an edge to close a pane. Show preview (panel icon) restores Preview if you closed it; the message icon restores chat.

​
Using Mythex on a phone

Opening the builder on a phone is different from the phone-size preview of your app.
  • Header: hamburger Menu (sidebar), project name, gear Project settings, Publish
  • Under the header: Chat | Preview | Code — one pane at a time
  • Preview is already full-width. There is no phone-icon toggle, service picker, address bar, back/forward, refresh, or split-drag
  • To check how the app looks at phone size, use a laptop and Switch to Mobile

​
While Preview is starting

You may see Starting your workspace…, Starting your app…, or Getting your app ready…. That is normal while the sandbox wakes.
  • Preview needs credits — upgrade, buy credits (Pro), or wait for the daily grant. See Credits
  • Couldn’t start the workspace — refresh and retry, or contact Support with the project ID

​
Preview URLs

While building, previews are served through Mythex routing (for example project hostnames on *.mythex.ai in production). Local and staging environments may differ.

​
Code

Code mode is there when you want control:
  • File tree — browse project files
  • Editor — read and edit source
  • Terminal — interactive shell in your private workspace
Use Code for precision, debugging, or when a developer joins the project. See Code editor & LSP.

​
Tips

  • Prefer asking Mythex for structural changes; use the editor for small tweaks
  • Watch the terminal after dependency installs
  • Use Restore on a chat checkpoint to recover from a bad turn (see Chat)