Live Preview
See your learning content in real-time as it's created
Live Preview
Impact Learning provides a real-time preview panel that shows your content as it's being generated. Watch your learning experiences come to life instantly without waiting for builds or deployments.
How It Works
As you chat with the AI to create content, the preview panel on the right side of your screen updates automatically:
- Describe your content in the chat
- Watch the preview update in real-time
- Request changes and see them applied instantly
- Switch between views to test different devices
View Modes
Desktop View
The default full-width view shows how your content appears on desktop browsers and laptops. This is ideal for:
- Course platforms with sidebars
- Content with wide layouts
- Multi-column designs
Mobile View
Switch to mobile view to see how your content looks on smartphones. The preview shows:
- Actual mobile dimensions (375 × 667px, simulating iPhone)
- How navigation adapts to smaller screens
- Touch-friendly interface elements
Tip: Always test your content in mobile view if learners will access it on phones.
Preview Controls
The preview toolbar provides quick access to:
| Control | Function |
|---|---|
| Desktop/Mobile toggle | Switch between device views |
| Reload | Refresh the preview manually |
| Fullscreen | Open preview in a new tab |
| Publish | Deploy your content to the web |
Real-Time Updates
The preview automatically refreshes when:
- AI generates new content
- You modify existing content
- Files are created or updated
- Images or audio are generated
You don't need to manually trigger builds — the preview stays in sync with your latest changes.
Troubleshooting
Preview not updating?
If the preview seems stuck:
- Click the Reload button in the preview toolbar
- Check if there are any errors in the chat
- Wait for the AI to finish generating content
Content looks different than expected?
- Switch between desktop and mobile views to see how layouts adapt
- Check if the AI is still generating content (look for the loading indicator)
- Review the chat history for any error messages
Best Practices
- Check mobile view early — Don't wait until the end to test mobile layouts
- Iterate in small steps — Make incremental changes and verify each one
- Use the preview to guide prompts — If something doesn't look right, describe the specific change you want