✦

┌──────────────────┐ │ ┌──────────────┐ │ │ │ │ │ │ │ Preview │ │ │ │ │ │ │ └──────────────┘ │ │ ○ ○ ○ │ └──────────────────┘

Live Preview

See your app running — right inside Archon.

▶ ───── │ │ ─────

Preview active WKWebView · Full screen · Auto-refresh Rendering

Live Preview

See your app running in a WKWebView. Go full screen to test the experience before you share it.

WKWebView rendering

The Live Preview uses Apple's WKWebView to render your app's HTML, CSS, and JavaScript output. This is the same rendering engine used by Safari, so what you see in the preview is accurate to how it would look in a browser.

Full CSS support — flexbox, grid, animations, custom properties
JavaScript execution — event handlers, fetch requests, DOM manipulation
Responsive layouts — previews scale to match device dimensions
Local assets — images and fonts bundled with the project are available

Full-screen mode

Tap the full-screen button to expand the preview to fill the entire screen. This is useful for testing how your app looks and feels without the surrounding chrome of the Archon interface.

Portrait and landscape — rotate the device to test responsive behavior
Safe area awareness — the preview respects notch and home indicator insets
Status bar styling — matches the theme-color meta tag if set

How preview updates after builds

When the AI Builder completes a build, the Live Preview automatically refreshes. The flow is:

1. Build completes

The AI finishes generating all files for the current request. The task timeline shows all tasks as completed.

2. Files are assembled

Generated HTML, CSS, and JavaScript files are assembled into a loadable bundle. If it's a Swift project, a web-compatible preview is generated.

3. Preview reloads

WKWebView navigates to the assembled output. The preview updates instantly — no manual refresh needed.

For iterative builds (adding a feature, fixing a bug), only the changed files are updated and the preview does a targeted reload rather than a full page refresh.

Limitations

The Live Preview is a development tool, not a production environment. Some things to be aware of:

⚠️

No native APIs

WKWebView cannot access iOS-native APIs like Camera, HealthKit, or CoreML. These require a real device build.

⚠️

Limited storage

localStorage and cookies work, but data does not persist between preview sessions. No Keychain or Core Data access.

⚠️

Network restrictions

External API calls work, but CORS policies apply. Some third-party scripts may be blocked by WKWebView's content policy.

⚠️

Swift → Web only

For SwiftUI projects, the preview renders a web approximation. It may not match native UIKit behavior exactly.

For full native testing, export your project and open it in Xcode.