Elements are the visual building blocks of your application. Every piece of text, every button, and every pre-built component is an element. Learning how to add, organize, and structure them is the key to creating a beautiful and functional UI.

​
Where to Find Elements

In Saasio, you can add elements to your page from two primary sources in the top navigation bar:

Elements Tab

This palette contains the fundamental building blocks for any UI: Text, Containers, Images, Buttons, Forms, and more. You’ll use these for creating custom layouts and basic content.

UI Libraries Tab

This tab gives you access to a rich collection of pre-built, professionally designed components from popular libraries like Shadcn, Magic UI, and Aceternity UI, etc. Use these to build modern interfaces quickly.

​
Adding Elements to the Canvas

The primary way to build your UI is by dragging and dropping elements onto the central canvas.
1

1. Select an Element or Component

Open either the Elements tab or the UI Libraries tab from the top navigation bar. Find the component you wish to add.
2

2. Drag and Drop onto the Canvas

Click and hold the element, drag it over the central canvas to your desired position, and release it. The new element will appear on your page.
3

3. View the New Element in Layers

After adding an element, look at the Layers panel on the left. You will see your new component listed in the page’s element hierarchy. The Layers panel is essential for understanding the structure of your page.
For faster building, you can use keyboard shortcuts to add common elements directly to your canvas. Press the key combination, and the element will be added instantly.
  • Alt + C : Container
  • Alt + T : Text
  • Alt + I : Image
  • Alt + V : Video
  • Alt + 1 : Heading 1 (H1)
  • Alt + 2 : Heading 2 (H2)
  • Alt + 3 : Heading 3 (H3)
  • Alt + L : Link
  • Alt + F : Form
  • Alt + B : Button
  • Alt + Shift + I : Input
  • Alt + A : Audio

​
The Power of Containers: Grouping & Nesting

The most important element for creating clean, organized layouts is the Container. A container is a special element that acts as a box to hold and group other elements.
Key Concept: To create professional layouts, you should always place related elements inside a Container. For example, you would place a title, a paragraph, and a button together inside one container to create a “hero section”.
To nest an element, simply drag it from the Elements tab and drop it directly on top of a container in the canvas. You can also re-parent elements by dragging them within the Layers panel. Example Hierarchy in the Layers Panel: 
- Container (Hero Section)
  - Text (Title: "Welcome to Saasio")
  - Text (Paragraph: "Build amazing apps...")
  - Button (Call to Action: "Get Started")