App Builder Interface

Get familiar with the app builder interface. Understanding the layout and tools will help you work more efficiently and build better applications.

Interface Layout

Component Palette

The left sidebar contains all available components organized by category. Use this to add new components to your application.

Design Canvas

The center area is where you design your application. Drag components here and arrange them to create your user interface.

Properties Panel

The right sidebar shows properties for the selected component. Configure appearance, behavior, and data binding here.

Component Palette

Categories

Form Components

Input, Button, Checkbox, Radio, Calendar

Display Components

Text, Image, Badge, Card, Data Table

Layout Components

Container, Separator, Tabs, Dialog

Data Components

Charts, Advanced Tables, Forms

Search & Filter

Search components by name or description
Filter by category or component type

Design Canvas

Canvas Controls

Viewport Controls

  • • Desktop (1200px+)
  • • Tablet (768px - 1024px)
  • • Mobile (< 768px)

Grid System

  • • Toggle grid visibility
  • • Snap to grid (20px default)
  • • Adjust grid spacing

Component Interaction

Click to select components
Drag to reposition components
Right-click for context menu

Properties Panel

Property Tabs

Properties

Content, styling, and behavior settings

Data

Data binding and field mapping

Layout

Position, size, and alignment

Property Types

Text Properties

Labels, placeholders, content

Style Properties

Colors, sizes, borders, spacing

Behavior Properties

Disabled state, visibility, interactions

Data Properties

Data sources, field mapping, transformations

Mobile Interface

Responsive Design

The app builder interface adapts to different screen sizes. On mobile devices, the sidebar becomes a bottom toolbar with slide-out panels for detailed editing.

Mobile Layout

Bottom Toolbar

Quick access to components, properties, and layers

Slide-out Panels

Full-screen panels for detailed editing