Preview and test your app in Lovable
The preview in Lovable shows your app running live as you build it, letting you test how it looks and works on different devices. You can also share a special link for others to see your progress without needing a Lovable account.
Anyone building an app in Lovable needs this to see their changes immediately and ensure everything works correctly before sharing it with the world.
Do this, in order
- 1
Look at the right side of your Lovable editor to see your app running live.
This 'preview' updates automatically as you make changes, so you can instantly see how your app looks and behaves.
- 2
Click the device toggle above the preview to switch between 'Desktop view', 'Tablet view', and 'Mobile view'.
This helps you check that your app looks good and works well on different screen sizes, not just on your computer.
- 3
Click around your app in the preview, fill out forms, and try all the actions your users would.
This lets you test entire user journeys, like signing up or checking out, to make sure they work perfectly before anyone else sees them.
- 4
If the preview isn't loading or looks wrong, click 'Refresh' above the preview, or hold 'Shift' and click 'Refresh' to restart it.
This often fixes temporary issues and gets your live preview working again.
- 5
To let someone else see your app without giving them access to your project, click 'Share' in the top right corner and create a 'Share preview' link.
This generates a special web address they can open to view your current work, gather feedback, or show progress to clients or teammates.
Paste this into your project
Lovable, I need to test my app. Can you make sure the sign-up flow works correctly on both mobile and desktop views in the preview? Also, generate a shareable preview link for me to send to a client, allowing them to view the current progress without editing anything.
Words decoded
- Preview
- A live, interactive version of your app that runs inside the Lovable editor, showing your most recent changes as you build.
- Staging environment
- A private testing area that mirrors your live app, where you can try out new features and changes without affecting what real users see.
- Backend
- The 'behind-the-scenes' part of your app that handles data storage, calculations, and other operations that users don't directly see.
- Draft
- A separate, temporary version of your project where you can experiment with ideas without changing your main app.
- Favicon
- The small icon that appears in a web browser's tab or bookmark list, representing your website.
- Preview environment
- The temporary cloud space where your app's live preview runs, allowing you to interact with it as you build.
Where people get stuck
- Don't assume the preview is the same as your published app; the preview always shows your latest work, while the published app is a fixed version until you update it.
- Forgetting to test your app on different screen sizes (mobile, tablet, desktop) can lead to a poor experience for some users.
- Not refreshing the preview when it looks wrong can prevent you from seeing the correct, updated version of your app.
- Sharing your main project URL instead of a 'Share preview' link can give unintended access to your project editor or require others to log in.
The short version, steps, decoder and prompt on this page are written automatically from Lovable's own documentation and can lag or misread it. The official page is always the authority.