The Preview page lets you interact with your application exactly as your users will experience it. Click the Preview button in the top navigation bar to open it.
From the preview, you can verify that data displays correctly and navigate through your application's pages and workflows. Test forms, buttons, and other interactive elements, or make direct design updates to your application.
The Preview environment is for testing and configuration. Since its database content is separate from what is deployed in production, you can use test data without impacting your production data.
Click any of the following links to skip ahead:
Navigate your application
The Preview page displays a navigation bar at the top with a preview of your application loaded below. You can explore your application from here — test forms and buttons, and view each page. Use the navigation bar's elements to move through your application as you test.
Use the back and forward arrows to move through screens as you explore.
Click the Home button to go back to your application's homepage.
Click Refresh to refresh data in your application preview.
Click Select elements in the preview to make direct design updates to application components in your preview. You can tell Elle to make more specific updates to the selected component.
Click Open in new window to view your application preview in full screen.
Make direct design updates
To directly update a component's design:
Click Select elements in the preview.
Select the part of your application you want to update.
Design controls open in the AI chat window. Use them to adjust Layout details like margins and padding, Colors, and Typography. You can also ask Elle to make updates. Type what you want to change into the prompt box and submit the chat to have Elle make changes for you.