App Builder

The visual app builder is the heart of ForgeZap. Learn how to use the drag-and-drop interface to create powerful applications without writing code.

Visual Development

The app builder provides a WYSIWYG (What You See Is What You Get) interface where you can design, configure, and test your applications in real-time.

Key Features

Component Palette

15+ pre-built components organized by category for easy discovery and use.

Drag & Drop

Intuitive drag-and-drop interface for adding and positioning components.

Grid System

Snap-to-grid functionality for precise component alignment and layout.

Property Panel

Context-aware property editing for configuring component behavior and appearance.

Undo/Redo

Full history management with keyboard shortcuts for easy experimentation.

Auto-save

Automatic saving with visual indicators to prevent data loss.

Interface Overview

Left Sidebar

• Component palette
• Search components
• Category filters

Center Canvas

• Visual design area
• Component placement
• Grid and alignment

Right Sidebar

• Properties panel
• Data binding
• Component settings

Getting Started with the Builder

1. Adding Components

Components are added by dragging them from the palette to your canvas.

• Browse categories in the component palette
• Drag components to your desired location
• Components are positioned at default coordinates (100, 100)
• Use the search bar to find specific components quickly

2. Configuring Properties

Select any component to edit its properties in the right sidebar.

• Click on a component to select it
• Properties panel shows available options
• Changes are applied in real-time
• Use the data tab for data binding

3. Arranging Components

Position and align components using the grid system and alignment tools.

• Enable snap-to-grid for precise alignment
• Use the grid toggle to show/hide alignment guides
• Drag components to reposition them
• Adjust z-index for layering components

Learn More

Interface Walkthrough

Detailed guide to the app builder interface and panels

Canvas & Viewports

Working with the design canvas and responsive viewports

Best Practices

Start Simple

Begin with basic components and gradually add complexity. This makes it easier to debug issues and understand how components work together.

Use the Grid

Enable snap-to-grid for consistent spacing and alignment. This creates a more professional and organized layout.

Test Frequently

Use the preview mode regularly to see how your app looks and behaves. This helps catch issues early in the development process.