Masks

2 min readSeptember 21, 2026

A mask lets you show a component only inside the outline of another one. It is the easiest way to crop a photo into a circle, put an image inside a custom SVG shape, or fill text with a picture.

Masks are available only in the Simple Editor. Templates created in the Advanced Editor or the HTML editor don't support masks. See Template editor for an overview of the Simple Editor.

Select layers

Applying a mask

  1. Add the component you want to clip (for example an image) and, on top of it, the shape that should define the visible area: a rectangle, a circle, an SVG shape or a text.
  2. Select both components at once: hold Shift and click them on the canvas, or Shift-click them in the components list.
  3. In the Inspector click Use top shape as mask.

Masks

The component that is higher in the layer order becomes the mask, and the component below it is clipped to the mask's outline. Everything outside the shape becomes transparent. If the wrong component was used as the mask, remove the mask, use the blue arrows in the components list to change the order, and apply it again.

Once applied, the mask shape is no longer a separate element: it disappears from the canvas and from the components list and is stored inside the clipped component. It keeps exactly the position, size and rotation it had on the canvas, and from now on it moves, scales and rotates together with the clipped component, so you can drag the masked image around as a single element.

Rules and tips

  • Exactly two components must be selected. The artboard can't be part of a mask.
  • Only the outline of the mask matters. Its fill color is not rendered, so you can use any color while designing.
  • Any component can be a mask, but shapes, SVG shapes and text give the most predictable results.
  • The mask is saved with the template and applied every time the template is rendered through the API, so a merge tag that replaces the masked image will still be clipped to the same shape.

Removing a mask

Select the masked component and click Remove mask in the Inspector. The mask shape is put back on the canvas exactly where it was visible, becomes selected, and can be moved, resized or replaced. To adjust a mask, remove it, change the shape, and apply it again.