> ## Documentation Index
> Fetch the complete documentation index at: https://docs.mythex.ai/llms.txt
> Use this file to discover all available pages before exploring further.

# Preview and Code

> Use live Preview to test your app and Code mode for the file tree, Monaco editor, and terminal.

# Preview and Code

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

## Preview

Preview shows the app as served from your project sandbox.

Use it to:

* Click through flows
* Check responsive layout
* Validate forms and navigation
* Spot visual bugs before publish

<Tip>
  If Preview is blank or stale, check whether the app process is running (Code → terminal) and ask the agent to start the correct dev server for this project.
</Tip>

### Preview URLs

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

## Code

Code mode is a full developer surface:

* **File tree** — browse project files
* **Monaco editor** — read and edit source
* **Terminal** — interactive shell in the sandbox

Use Code when you want precision, or when you are debugging something the preview alone cannot show.

## Tips

* Prefer asking the agent for structural changes; use the editor for small tweaks
* Keep an eye on terminal errors after dependency installs
* Commit/checkpoint history helps you recover from bad turns

## Related

* [Sandbox](/features/sandbox)
* [GitHub & export](/features/github-and-export)