Preview is one of the most convenient features of Devisto. If you have enough screen real estate, we recommend to always leave the preview open.
If you are in the admin panel of a project, you can open the preview by clicking the preview icon in the upper right corner. A panel will appear on the right hand side of the admin.
The panel acts as a mini-browser inside the admin and will load the website you're currently working on. As you navigate in the site, you will see the URL change just like in a normal browser window. You can also go back, forward, refresh, go to the homepage, or manually enter a URL.
If you have multiple monitors, you can open the preview in its own window, and put the preview on a separate monitor.
The preview will refresh automatically when you save a page, entry or resource, even when it's opened in a separate window or when you save from VS Code (with our VS Code Extension).
You can preview several things in Devisto. The preview will never automatically navigate to an entity when you're navigating in the admin, so when you want to preview something specific, you have to trigger the preview yourself.
Right-click on a page in the page overview and choose Open in Preview to open the page in the preview panel. If it's a dynamic page (linked with a table), the first found entry will be used to generate the URL.
Right-click on an entry and choose Open in Preview to open the entry in the preview panel. This will only work if there exists a dynamic page, linked to this table. For more information, check the documentation about Dynamic Pages.
Right-click on a Livewire Component in the Livewire tree and choose Open in Preview to open the component in the preview panel.
When your component needs input data, you need to specify previewData. For more information, check the Livewire documentation.
Right-click on a mail and choose Open in Preview to open the mail in the preview panel. If the mail has parameters, they will get their default value when previewing the mail.
Initially, the preview is shown in Responsive mode. This means you see the website at 100% and it will react responsively to the width of the preview panel.
When you select one or more devices, the zoom level will change automatically. So even when your screen real estate is limited, you will always see the full picture while developing your website.