Canvas

The canvas is the central workspace where you build your page. This guide covers all the ways you can navigate the canvas, select elements, and work efficiently with the tools available.

Canvas Navigation

For large pages that extend beyond the visible area, the builder provides zoom and pan controls to navigate around your design.

Zoom Controls

Adjust the zoom level to see your entire page or focus on specific details:

• Zoom in/out: Hold Ctrl and scroll your mouse wheel up (zoom in) or down (zoom out)
• Fit to canvas: Click the fit-to-canvas button in the toolbar to automatically scale the page to fit the visible area
• Reset zoom: Double-click the zoom percentage in the toolbar to reset to 100%

Pan Behavior

Move around the canvas when zoomed in or working with tall pages:

• Space + drag: Hold the Space key and drag anywhere on the canvas to pan
• Middle-mouse drag: Press and hold the middle mouse button (scroll wheel) and drag to pan
• Scroll: Use the regular scroll gesture to move vertically through the page

Element Selection

Before you can style or edit an element, you need to select it. The builder supports several selection methods for different scenarios.

Single Selection

Click any element on the canvas to select it. A blue outline appears around the selected element, and the Inspector panel opens automatically to show styling options.

Multi-Selection

Select multiple elements at once to move, delete, or duplicate them together:

• Shift + click: Hold Shift and click additional elements to add them to your selection
• Drag-select box: Click on an empty area of the canvas and drag to create a selection box. All elements within the box are selected when you release

Deselecting

Press Escape or click on an empty area of the canvas to deselect all elements. The Inspector panel collapses when nothing is selected.

Undo and Redo

Every change you make in the builder is tracked, allowing you to step backward and forward through your editing history.

Using Undo and Redo

• Toolbar buttons: Click the undo (arrow left) or redo (arrow right) buttons in the top toolbar
• Keyboard shortcuts:
  • Ctrl+Z to undo the last action
  • Ctrl+Shift+Z to redo an undone action

Responsive Preview

Preview how your page looks on different screen sizes without leaving the builder. The responsive preview adjusts the canvas width to simulate mobile, tablet, and desktop viewports.

Breakpoint Switcher

The toolbar includes three breakpoint buttons representing different device sizes:

Click a breakpoint button to switch the preview. The canvas resizes to match the container width defined in Settings → Global Styles.

Responsive Classes

When you switch breakpoints, the builder shows how responsive classes apply to each element. For example, an element with text-sm md:text-base lg:text-lg will display at different text sizes depending on the active breakpoint.

Structure Panel

The Structure panel shows your page hierarchy as a tree, making it easy to navigate complex layouts with deeply nested elements.

Opening the Structure Panel

• Toolbar button: Click the Structure button (tree icon) in the top toolbar
• Sidebar tab: Click the Structure tab in the left sidebar

Using the Structure Tree

The tree displays all elements in your page with their hierarchy intact:

• Click an element name to select it on the canvas
• Drag elements within the tree to reorder them or move them to different parent containers
• Expand/collapse parent elements by clicking the arrow icon next to their name

Copy, Paste, and Duplicate

Copy existing elements to quickly build repetitive layouts without recreating elements from scratch.

Copy and Paste

• Copy: Select an element and press Ctrl+C
• Paste: Press Ctrl+V to insert the copied element

When you paste, the new element appears as a sibling after the currently selected element. If no element is selected, it pastes at the end of the page.

Duplicate in Place

For quick duplication without moving to the clipboard:

• Duplicate: Select an element and press Ctrl+D

The duplicate appears immediately after the original, ready for modification.

Drag and Drop

The builder uses an intuitive drag-and-drop system for adding and rearranging elements.

Adding Elements

1. Open the Elements panel from the sidebar (or press E)
2. Find the element you want to add by browsing categories or using search
3. Drag the element from the panel onto the canvas
4. Position it using the visual drop zone indicators (blue lines show where the element will land)
5. Release to place the element

Reordering Elements

Move elements around your page by dragging them to new positions:

• Drag an element's drag handle (grip icon) or hold and drag the element itself
• Blue indicator lines show exactly where the element will drop
• Drag into container elements to nest them inside
• The parent container highlights when you can drop inside it

Context Menus

Right-click any element to access quick actions without navigating through panels or memorizing keyboard shortcuts.

Available Actions

The context menu provides these actions for the clicked element:

Next Steps

Now that you understand how to navigate and work with the canvas, explore these related topics:

• Inspector - Learn about all the style controls available in the Inspector panel
• Keyboard Shortcuts - Complete reference of all keyboard shortcuts for faster editing
• Elements - Explore all the elements you can add to your pages