Canvas

The canvas is the central workspace in the Nordcraft editor where you visually build and interact with your application.

Canvas

Live

• Highlighting: In edit mode, hover your cursor over elements to highlight them
• Selection: Click on an element to select it, which highlights it in both the canvas and element tree
• Deselection: Press Escape or click on the background outside the canvas to deselect elements
• Hidden elements: Selecting a hidden element from the element tree makes it visible in the canvas, including any hidden parent elements

You can drag and drop elements around the canvas to reorder or move an element to a different container. When dragging, additional hotkeys are enabled.

• Hold Cmd/Ctrl to force insertion mode
  • Insertion mode is also toggled when you drag outside the element's container. Insertion mode lets you drop elements more precisely, even within sibling elements. Reorder mode is enabled by default, which lets you visually reorder the dragged element between its siblings.
• Hold Option/Alt to duplicate an element on drop rather than moving it

• Panning: Navigate the canvas by scrolling or by holding Space while dragging
• Resizing: Use the three handles on the canvas borders to test your application at different screen sizes

The Nordcraft editor provides several keyboard shortcuts to help you work faster. Head over to the shortcuts page to learn about resizing shortcuts.