Aller au contenu principal

Live Preview

See your app running in real-time as the AI generates code.

WebApp Preview​

How It Works​

  • Instant Rendering: Code is rendered in an iframe as it's generated
  • Hot Reload: Changes appear immediately without refresh
  • Isolated Environment: Runs in a sandboxed iframe for security

Preview Features​

  • Full HTML/CSS/JavaScript execution
  • React component rendering
  • Responsive design testing
  • Console output (errors, logs)
  • Network requests (with CORS handling)

Preview Controls​

  • Refresh: Reload the preview
  • Open in New Tab: View fullscreen
  • Responsive Toggle: Test mobile/tablet/desktop views
  • Console: View JavaScript errors and logs

Mobile App Preview​

Expo Go Integration​

Mobile apps use Expo Go for live preview on real devices.

Setup​

  1. Install Expo Go on your iOS/Android device
  2. Generate your app in Prompt To App
  3. Scan the QR code with Expo Go

Features​

  • Real Device Testing: Run on actual iOS/Android hardware
  • Hot Reload: Changes sync instantly to your device
  • Native APIs: Camera, location, notifications work
  • Debugging: Shake device to open dev menu

QR Code​

┌─────────────────────┐
│                     │
│   [QR CODE HERE]    │
│                     │
└─────────────────────┘

Scan with Expo Go app

Snack Preview (Web)​

For quick testing without a device:

  • Web Preview: Runs in browser (limited native features)
  • iOS Simulator: Requires Expo account
  • Android Emulator: Requires Expo account

Extension Preview​

Chrome DevTools Integration​

Extensions preview in a simulated Chrome environment.

Features​

  • Popup Preview: See your extension popup
  • Content Script Testing: Test on sample pages
  • Background Script Logs: View service worker output
  • Storage Inspector: Check chrome.storage data

Preview Modes​

  1. Popup: Extension icon click simulation
  2. Content Script: Injected into test page
  3. Options Page: Extension settings page
  4. DevTools Panel: Custom DevTools tab

Preview Limitations​

WebApp​

  • ✅ Full HTML/CSS/JS support
  • ✅ React, Vue, Svelte rendering
  • ✅ API calls (with CORS)
  • ❌ Server-side code (Node.js)
  • ❌ File system access
  • ❌ Native modules

Mobile​

  • ✅ React Native components
  • ✅ Expo SDK (camera, location, etc.)
  • ✅ Navigation (React Navigation)
  • ❌ Custom native modules
  • ❌ iOS/Android specific code (without Expo)
  • ❌ Background tasks (limited)

Extension​

  • ✅ Popup, content scripts, background
  • ✅ Chrome APIs (storage, tabs, etc.)
  • ✅ Manifest V3 features
  • ❌ Real browser extension installation
  • ❌ Cross-origin requests (without permissions)
  • ❌ Native messaging

Troubleshooting​

WebApp Preview Not Loading​

  1. Check browser console for errors
  2. Verify no syntax errors in generated code
  3. Try refreshing the preview
  4. Check for CORS issues with external APIs

Mobile Preview Not Connecting​

  1. Ensure device and computer are on same network
  2. Check Expo Go app is up to date
  3. Verify QR code is scanning correctly
  4. Try restarting Expo Go app

Extension Preview Issues​

  1. Check manifest.json is valid
  2. Verify permissions are correct
  3. Look for errors in background script logs
  4. Test in actual Chrome extension (export and load)

Best Practices​

Testing Workflow​

  1. Generate Code: Let AI create your app
  2. Preview Immediately: Check basic functionality
  3. Iterate: Ask AI to fix issues you see
  4. Test Thoroughly: Try all features in preview
  5. Export: Download when satisfied

Responsive Testing​

1. Start with desktop view (default)
2. Toggle to tablet (768px)
3. Toggle to mobile (375px)
4. Test all breakpoints
5. Ask AI to fix responsive issues

Performance Testing​

  • Monitor console for errors
  • Check network tab for slow requests
  • Test on slower devices (mobile)
  • Verify animations are smooth

Advanced Features​

Custom Preview Settings​

Some projects support custom preview configuration:

{
  "preview": {
    "port": 3000,
    "host": "localhost",
    "https": false,
    "cors": true
  }
}

Preview Debugging​

Enable debug mode to see detailed logs:

  1. Open browser DevTools
  2. Go to Console tab
  3. Filter for "preview:" logs
  4. See render events, errors, warnings