Canvas preview

When you work on a document that has a page address, Strife shows a live preview of the page next to the editor, so you see your edits as you make them. A document without an address shows only the editor panel.

The preview shows the page in several viewports side by side, one per screen width. They come from your team's settings; a team without settings of its own gets Desktop (1366 px), Tablet (860 px) and Mobile (400 px).

Drag a viewport by its header to arrange the viewports the way that suits your work. Strife remembers where you put them, and your zoom level, in this browser for each team.

To click a link or a button inside the page, hold Alt (Option on a Mac) while you click.

Live preview in the new interface

When you open a document that has a page address, the preview appears beside the editor, 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, or Desktop (1440 px) if you have none. 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 Zoom to 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, the arrow keys pan (hold Shift for bigger steps), and H and V switch between the hand and pointer tools. Hold Space to pan temporarily. While a document is open, Command (Ctrl on Windows) with + or − zooms, with 0 goes to 100 %, with 1 fits all previews and with 2 fills the view. 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.