> From the [Strife user guide](https://strife.app/docs/user-guide/canvas-and-preview/canvas-preview). Every page is listed in [llms.txt](https://strife.app/docs/llms.txt).

# Canvas preview

One of the key features of Strife, our SaaS software, is the live preview functionality. When working on a document with a URL, Strife automatically generates a real-time preview of the document, helping you visualize your edits as you make them. However, if the document does not have a URL, only the editor panel will be displayed.

You can also customize the preview to display your page at various resolutions, ensuring adaptability across different devices and screens. Please note that, currently, Strife supports previewing only one page at a time in different resolutions. In the near future, we plan to enhance this functionality, allowing editors to preview multiple pages simultaneously. This will be particularly useful when the same content is published across multiple pages or when one website shares content with another. To enable this feature, all connected sources must utilize Strife.

Maximize the efficiency of the Canvas Preview feature in our SaaS software by rearranging the various viewports to suit your specific tasks better. As you customize the layout, Strife automatically saves your preferred settings to your personal account, ensuring a tailored user experience without any impact on other users.

[Rearranging viewports in Canvas](https://strife.b-cdn.net/Documentation/Rearranging%20viewports.mp4)

## Live preview in the new interface

Open a document and select **Live preview** in the top bar. Your editor stays beside the preview, and changes appear as you type without waiting for a save. The document needs a page URL and a configured website that supports Strife live preview.

Use the **+** in a viewport's header to add **Tablet (810 px)**, **Phone (390 px)** or a **Custom…** width beside it. Click a viewport's name or width to edit it or remove it. Height follows the full page automatically as its content changes. Each viewport runs a separate preview; fewer viewports use less memory. Your layout is remembered in this browser for your account and team.

- Drag the canvas to pan, or drag the empty space in a viewport's header to move it.
- Scroll to pan. Pinch or use Ctrl/Command + scroll to zoom around the pointer.
- Use the hand tool to navigate and the pointer tool to interact with the website.
- Use **Fit** to show all previews. If you move away from them, **Back to content** brings them into view.
- The toolbar floats at the bottom of the canvas. Its language selector switches both the preview and the editor's content language.

- If the website runs Strife's accessibility audit, an accessibility button at the end of the toolbar shows how many rules the page fails. Click it to open the list: filter by severity, expand a rule to read what is wrong and open the guideline, hover a failing element to see it outlined in the preview, and click one to open the field it comes from. The audit runs again a moment after each edit, or right away with the panel's rerun button.

When the canvas has keyboard focus, arrow keys pan, `+`/`−` zoom, `0` fits all previews, `1` returns to 100%, and `H`/`V` switch tools. Hold Space to pan temporarily. **Reload** reconnects the previews.

If you follow a link inside a preview, it leaves this document's page and stops receiving your edits. The canvas tells you, and **Reload** brings it back. If a preview never connects, the website either does not allow being embedded or is not set up for live preview — reloading will not change that.

While editing a slug, the preview keeps loading the published address so the page remains reachable. The edited content still updates live.