Shaper provides a set of basic UI building blocks – we call them “shapes” – that you can add to your canvas to construct interfaces. These include text blocks, images, buttons, input fields, containers, and more. Adding an element is as simple as clicking the Add button (the “+” icon) and selecting the shape you need, or dragging it from the components panel onto the canvas.
  • Text: Insert headings, paragraphs, or labels. You can double-click to edit the text inline.
  • Image: Upload images or choose from assets, then drag to position or resize via the corner handles.
  • Button: Add call-to-action buttons which come with default styling that you can customize in the property panel.
  • Container: Use containers (also known as layout containers or div blocks) to group other elements. Containers are essential for structuring your layout and applying background colors or section spacing.
Once added, you can arrange and align elements by dragging them on the canvas or by using smart guides and alignment tools. As you move elements, purple guides may appear to help you snap to center or equal spacing relative to other elements (just like in popular design tools). You can also organize elements hierarchically in the Layer Tree on the left side: drag layers up or down to reorder them, or nest elements inside containers for proper structure. This layer list gives you a clean overview of your page’s structure, which directly corresponds to the DOM structure in code. (Screenshot of adding a button and an image to the canvas, and arranging them within a container goes here.)
Tip: To precisely position an element, select it and use your arrow keys for fine-tuned nudging. Holding Shift while pressing arrows moves the element in larger increments. This is useful for pixel-perfect adjustments.