Overview
ChatAndBuild’s live preview system allows you to see your applications running in real-time as you develop. Whether you’re building a React app, a static website, or a full-stack application, the preview updates automatically as you make changes.Preview Features
Hot Reload
Automatic refresh when you save files, showing changes instantly without manual refresh.
Copy URL and Share
Share your projects with team members and clients
Mobile Preview
Responsive preview with device simulation for mobile and tablet testing.
Screenshot capture
Take screenshots of your application for documentation and sharing
Getting Started
Opening Preview
- The preview opens automatically when you build your app
- Alternatively, you can click “Build My App Preview” in the top-right corner of the Preview section.
Main Preview Window
The preview window includes:- Address bar: Shows current URL which you can copy and share with your friends
- Refresh button: Manual refresh if needed
- Device selector: Switch between desktop, tablet, and mobile views
- Zoom controls: Adjust preview scale
- Full screen: Open preview in full browser windowDeveloper Tools
Live Reload Features
Automatic Refresh
The preview automatically refreshes when you:- Save HTML files: Instant page reload
- Update CSS: Live style injection without reload
- Modify JavaScript: Hot module replacement when supported
- Change configuration: Restart development server
Tips
Development Workflow
- Start with preview: Open preview before making changes
- Make small changes: Test incrementally for faster feedback
- Monitor console: Watch for errors and warnings
- Test responsiveness: Check different screen sizes
- Use browser tools: Leverage built-in debugging features
Troubleshooting
Common Issues
Preview Not Loading
Preview Not Loading
Changes Not Reflecting
Changes Not Reflecting
Symptoms: Code changes don’t appear in previewSolutions:
- Check if hot reload is enabled
- Look for compilation errors in terminal
- Hard refresh the preview (Ctrl+Shift+R) or by clicking “Build My App Preview”
Need help setting up your development environment? Check out our Code Editor and Terminal guides.