Start and create

Use frames, bindings, images, and web embeds

Organize related elements, connect arrows, crop images, and place external web content in Excalidraw.

Use frames and connected elements when a diagram needs structure beyond loose shapes. This guide covers four distinct objects: frames for grouping content, bindings for relationships, images for visual references, and Web Embed for external content.

Before you begin

Start with an open Excalidraw canvas and a few elements. Keep a local copy before inserting important images or external content. For a web embed, use a URL you are allowed to display and avoid placing private information in a shared scene.

Steps

Create a frame

Select More tools, then choose Frame tool. Drag around the elements that belong together. A frame acts as a container-like element, giving the selected content a visual boundary and an organizational context.

Connect an arrow to a shape

Select Arrow and drag an endpoint onto a shape inside or at its boundary. Excalidraw records the relationship as a binding when the endpoint is placed on the bindable element. Move the shape to verify that the arrow remains associated with it.

Insert an image

Choose Insert image, then select an image file using the file picker. The image becomes an element in the scene. Select it and resize it with the image handles when it needs to fit inside a frame or beside other content.

Crop an image

Double-click the image, or use the crop command shown for the selected image, to enter the crop editor. Adjust the visible region, then click outside the image or use the crop editor's finish command. The image remains on the canvas with the new visible region.

Add a web embed

Select More tools, then choose Web Embed. Click-drag on the canvas to create the embed area and provide the external URL when prompted. The scene contains an embeddable element whose content is resolved from that URL.

Verify the result

Confirm that the frame surrounds the intended content, the arrow follows its bound shape, the image shows the chosen crop, and the web embed occupies the area you created. Select each object independently to confirm that the frame, image, and embed are separate elements.

✅The advanced canvas is ready when its contents remain organized during movement and each external or binary object has an intentional boundary and position.

Common problems and limits

Next, save and recover your drawing so the structured scene is portable.