Adding Components
Learn how to add, configure, and arrange components in your ForgeZap applications. Master the component workflow to build applications efficiently.
Component Workflow
Browse the component palette
Find the component you need in the left sidebar, organized by category
Drag to canvas
Click and drag the component from the palette to your desired location on the canvas
Select the component
Click on the component to select it and see its properties in the right sidebar
Configure properties
Use the Properties tab to set content, styling, and behavior
Set up data binding
Use the Data tab to connect the component to data sources
Adjust layout
Use the Layout tab to set position, size, and alignment
Adding Components
From the Component Palette
Component Placement
- • Components are added at default position (100, 100)
- • Use drag and drop to position them precisely
- • Enable snap-to-grid for consistent alignment
- • Use the properties panel for exact coordinates
Configuring Components
Properties Tab
Content Properties
- • Text content and labels
- • Placeholder text
- • Button text and actions
- • Image sources
Style Properties
- • Colors and backgrounds
- • Font sizes and weights
- • Borders and spacing
- • Component variants
Data Tab
Layout Tab
Position
- • X/Y coordinates
- • Z-index for layering
- • Relative positioning
Size
- • Width and height
- • Minimum/maximum sizes
- • Responsive sizing
Component Categories
Form Components
Interactive elements for collecting user input and data.
- • Input - Text input fields
- • Button - Clickable actions
- • Checkbox - Boolean selection
- • Radio - Single choice options
- • Calendar - Date/time picker
Display Components
Visual elements for presenting information and content.
- • Text - Static text content
- • Image - Pictures and graphics
- • Badge - Status indicators
- • Card - Content containers
- • Data Table - Tabular data
Layout Components
Structural elements for organizing and arranging content.
- • Container - Content wrappers
- • Separator - Visual dividers
- • Tabs - Tabbed content
- • Dialog - Modal windows
- • Heading - Title hierarchy
Data Components
Advanced components for data visualization and complex interactions.
- • Chart - Data visualizations
- • Form - Complete form builder
- • Advanced Data Table - Complex tables
Component Selection
Selecting Components
Multi-Selection
- • Hold Ctrl to select multiple components
- • Drag to create a selection box
- • Use Escape to deselect all
- • Multi-selection allows bulk property changes