Core Features
Canvas Interface

Canvas Interface

The canvas is your infinite workspace where components, pages, and complex designs come to life.

MagicPath canvas interface
The infinite canvas workspace with drag, zoom, and navigation

Navigation

  • •Create: Double click anywhere in the canvas to create a new component frame
  • •Pan: Click and drag on empty space to move around
  • •Zoom: Use scroll wheel or pinch to zoom in/out
  • •Select: Click on a component to select it

Canvas Toolbar

The main toolbar at the bottom of your canvas gives you quick access to essential tools for creating and manipulating your designs.

Canvas main toolbar
The main canvas toolbar with all available tools
  • •Select: Choose and interact with components on your canvas
  • •Add new component frame: Create a new component or design element
  • •Pan: Move around the canvas to explore different areas
  • •: Access Sketchpad for freehand drawing and wireframing

Component Actions

Each component appears as a card on the canvas with a powerful toolbar of actions:

Component action toolbar
The component toolbar with all available actions
  • •Breakpoint selector: The button to the left of the toolbar lets you switch between different breakpoints (Mobile, Tablet, Desktop) to preview your design at different screen sizes
  • •Drag: Click and drag from the toolbar to reposition
  • •Resize: Adjust the component size using corner handles
  • •: Generate alternative variations of that design/component based on style or other requests
  • •: Create connected sequences of screens for user journeys
  • •: Open the component/design in a new tab with a shareable preview link
  • •More actions: Click the three-dot menu to access additional options like duplicate, export as screenshot, rename, delete, and more

Images on Canvas

Now you can drag images into any project, use them for inspiration, or as visual references when creating new components.

Images on the canvas
Drag images to your canvas and turn them into code
  • •Drag and drop: Simply drag any image from your computer onto the canvas
  • •Turn images into code: Select an image and click "Add to chat" to use it as a reference for generating new components
  • •Mix images: Select multiple images and click "Mix" to combine them and explore new styles
  • •Visual references: Keep inspiration images alongside your components for easy reference while designing
  • •: Use the @ mention system to reference images from your canvas directly in chat conversations
Next AI Agent