The canvas

The main canvas lets you view the page or component you are currently editing.
When en "Edit mode" the canvas lets you highlight different elements by holding your cursor over them like the "div" element in the example above.
⁠
⁠You can also select elements by clicking on them. Selected elements will be shown like the "h1" element above.

You can deselect the current element by pressing Escape or by clicking on the background outside the canvas

The canvas has three handles that lets you resize you application. This is useful for testing that your app will work on different screen sizes.
⁠
⁠You can pan the canvas by scrolling or by holding down space while dragging.

⁠You can zoom in and out on the canvas by holding down ⌘ or CTRL while scrolling, or by pinching if you are using a track pad.

Navigation

• Double clicking a component in the canvas will take you to that component in the editor
• ⌘ or CTRL + click will select the first text element of an element
• All links will open in a new tab to ensure the canvas is in sync with the editor. If you want to ensure that links work as expected, consider previewing your page/component in a new tab

Styling

• Selecting a hidden element from the element tree will ensure that the element becomes visible in the canvas. This also applies if any of the selected element's parent elements are hidden (they will all become visible)
• Selecting a style variable in the element panel will ensure that the selected style variable is applied within the canvas. This makes it easier to see the style changes that you're working on