The Saasio Visual Editor is the heart of the platform. It’s an all-in-one workspace where you will design your user interface, manage your app’s data, build workflows, and configure settings. Understanding its layout is the key to building quickly and efficiently.
A complete overview of the Saasio Visual Editor.

The Saasio Visual Editor interface.

The editor is divided into four main areas:

​
Top Navigation Bar: Quick Actions

The top bar is your primary toolkit for building your application. It provides direct access to every major function you’ll need, from designing the UI to deploying your project.

AI Wireframe

Generate entire page layouts and components instantly from a simple text prompt.

UI Libraries

Access pre-built, professional components from Shadcn, Magic UI, and Aceternity UI , etc.

Elements

Add fundamental building blocks like text, containers, images, and forms to your page.

Data

Manage your database tables, create form schemas, and connect to any external API, etc.

Logic

Define the step-by-step workflows and actions that power your application’s interactivity.

Settings

Configure app-level settings such as your custom domain, SEO, and integrations.

Device Previews

Instantly check your design’s responsiveness across desktop, tablet, and mobile screens.

Publish / Modify Your Mvp

Preview, publish, and manage your application’s live deployments with a single click.

​
Left Panel: Project Structure

The left panel is your command center for managing the assets, logic, and overall structure of your application. It contains several powerful tabs for different functions.

Pages

Create new pages, organize them into folders, and navigate between the different screens of your application.

API Routes

Define backend API endpoints to handle server-side logic, interact with your database, or connect to external services.

Layers

View the complete hierarchy of all UI elements on the current page. Select, reorder, and manage elements from this view.

Components

Create your own reusable UI components. Build a component once and use it anywhere across your application to maintain consistency.

States & Assets

Manage your app’s data. Create State variables for storing temporary data and upload Assets like images, videos, and files.

Conditions

Define powerful rules to dynamically change how elements look and behave based on application state or user interaction.

Design System

Let the AI generate a complete design system for your app, including color palettes and typography for both light and dark themes.

Email Templates

Design and manage professional, reusable email templates for transactional emails, notifications, and marketing campaigns.

​
Central Canvas: Your Workspace

The canvas is the large, interactive area in the center of the editor. This is your main building space.
  • Visual Building: Drag and drop elements from the UI Libraries and Elements tabs directly onto the canvas.
  • Direct Manipulation: Click, resize, and rearrange elements to create your desired layout.
  • Live Preview: The canvas provides a real-time preview of what your page will look like.

​
Right Panel: Properties & Styling

The right panel is your contextual toolkit for fine-tuning every element. When you select a component on the canvas, this panel dynamically updates to show all of its available settings. This is where you control how your elements look, feel, and behave across different screen sizes.

Appearance

Adjust visual styles like colors, backgrounds, fonts, borders, and shadows to match your brand.

Layout

Control the element’s size, spacing (padding and margins), and exact positioning on the page.

Settings

Configure element-specific properties, such as the URL for a link or the validation rules for a form input.

Animations

Bring your UI to life with production-grade animations powered by motion.dev (formerly Framer Motion). Customize how elements appear and respond to user interaction.