Canvas features
Drag and drop, insert, duplicate, or delete components to create your email
In the middle of the Visual Editor, you'll see the Canvas. This is where you'll drag/drop, insert, duplicate and delete components. Select them to edit their content and styles.
![A screenshot of the entire Parcel window. In the middle is the canvas of the visual editor. A button component in the middle is selected. A bubble menu appears that lets you style, duplicate or delete the component. The right-hand properties menu shows a list of attributes for the button.](/docs-assets/visual-editor/visual-insert-canvas.png)
To drag/drop, hover over the component then click and drag the handle. Drop the component anywhere you see a weighted line appear.
You can drag/drop any standard or custom component, but not HTML tags. So you can drag <x-paragraph>
anywhere you like, but not <p>
. Consider using standard components in place of HTML tags, like <x-paragraph>
in place of <p>
, so you can utilize all features of the Visual Editor.
Select a component then click the plus icon to add another component.
![A screenshot of the Parcel window. In the center of the window is the visual editor canvas. The component CIO Box is selected. The component is outlined in a thin, dark line. In the middle of the top line is a plus icon.](/docs-assets/visual-editor/visual-canvas-add.png)
To duplicate a component, select it then click the duplicate icon. The new component will appear directly below.
![A screenshot of the Parcel window. A custom component labeled CIO Box is selected. Above the component is a bubble menu with three options. On the left is a pencil icon to edit styles. To the right of that is the duplicate icon. To the right of that is the delete icon.](/docs-assets/visual-editor/visual-canvas-duplicate.png)
To delete a component, select it and click the trash can icon.
![A screenshot of the Parcel window. A custom component labeled CIO Box is selected. Above the component is a bubble menu with three options. On the left is a pencil icon to edit styles. To the right of that is the duplicate icon. To the right of that is the delete icon.](/docs-assets/visual-editor/visual-canvas-delete.png)
This will delete everything within the component tag, not any outer tags like a <div>
. You'll have to switch to the Code Editor in the top left to clean up these tags.