Saasio Elements: A Walkthrough of Your SaaS Building Blocks

Creating a SaaS has never been easier, thanks to Saasio Elements, the native components designed to streamline your development process. With an intuitive drag-and-drop interface and efficient keyboard shortcuts, you can quickly assemble your application while maintaining a fully responsive and customizable design. Whether it’s a text block, button, or interactive form, every element is built for flexibility and ease of use.

Native Elements Overview

Saasio includes a robust set of native elements, each serving a specific purpose to help you create dynamic, user-friendly interfaces. Here’s a walkthrough of the core elements:

List of Native Elements

Container: A versatile element for grouping and structuring content.

Text: Add paragraphs or other textual content seamlessly.

Headings (H1, H2, H3): Organize your content with structured headings for better readability and SEO.

Image: Display pictures to enhance your app’s visuals.

Video: Embed engaging videos directly into your design.

Link: Add hyperlinks to connect users to additional resources.

Form: Build interactive forms for data collection or user interaction.

Input: Add text fields, dropdowns, and other input elements.

Button: Create clickable buttons for navigation or actions.

Repeating Group: Display lists of dynamic data like user comments or product catalogs.

Audio: Embed audio files for podcasts, music, or sound effects.

How to Use Saasio Elements

To use these elements, simply drag and drop them into the editor. Saasio’s intuitive interface allows you to place components precisely where you want them, ensuring a smooth design experience.

Alternatively, take advantage of keyboard shortcuts for faster workflows:

Note: Use the numbers at the top of your keyboard (above the letter keys), not the number pad.

Customizing Elements

Each element has its own set of properties, which you can access in the right sidebar under the Custom Tab. Customize styles, animations, and functionality on a per-device basis. Saasio makes it simple to design responsive layouts by letting you toggle between mobile, tablet, and desktop views. Properties set for larger devices automatically override those for smaller devices, making adjustments intuitive and efficient.

Deleting Elements Safely

To delete an element, simply hover over it and press the Delete key. This ensures that you only remove the element you intend to, minimizing accidental deletions.

Advanced Features for UI Libraries

In addition to native elements, Saasio supports advanced components from integrated UI libraries like Shadcn UI, Magic UI, and Aceternity UI. These elements function similarly to native components—drag and drop them into your project.

Performance Tips:

Some UI library elements include animations that may be CPU-intensive. To maintain high performance:

Building a Responsive Design

Saasio makes responsive design effortless. You can switch between device views (mobile, tablet, desktop) directly in the editor. Adjust properties for each device independently to fine-tune the appearance and behavior of your SaaS application. For example:

The platform ensures that each bigger device overrides the properties of smaller ones, maintaining consistency across devices.

Saasio Elements give you everything you need to bring your ideas to life, whether it’s a simple landing page or a complex SaaS application. With drag-and-drop ease, keyboard shortcuts, and responsive design capabilities, you can build faster and smarter.