The problem
Users building mobile + web need to preview at different viewport sizes without leaving the workspace. They also need to toggle between "run the app" and "see the code." All of this should be one click, not a menu dive.
Observed implementations
Anything.com
Icon row in the top header, left of center:
- 👁 Preview
- ` Code
-💻Desktop viewport
-📱Mobile viewport
-⟳` Refresh
Persistent across all project subviews (settings, version history, etc.).
Replit
Tabs inside the preview pane header:
- Preview (rendered app)
- Sub-tabs for specific pages/screens (e.g., Invoice Dashboard, Database)
- Canvas appears as a tab when available — peer to preview, not nested under it.
Different philosophy: Anything's toggles are global (change the view mode); Replit's tabs are content-specific (switch what you're looking at).
Components
| Component | Anything | Replit |
|---|---|---|
| Icon-only toggle buttons | ✓ | ✗ (uses text tabs) |
| Text tabs | ✗ | ✓ |
| Desktop/mobile viewport switches | ✓ explicit icons | ✗ (handled elsewhere) |
| Manual refresh button | ✓ | Typically auto-updating |
Analysis
Anything's icon-only bar is more Wix/Framer-like — visual, button-dense, assumes users want fast mode switches. Replit's tab-based model is more IDE-like — named destinations, assumes users think in terms of "which page am I on."
Neither is wrong; they serve different mental models. Makers browse; developers navigate.
Sources
- !raw/anythingdotcom/Code_Interface.png
- !raw/anythingdotcom/Project_Settings.png
- !raw/replit/Chat_View.png