Component Builder Overview
Overview
The Component Builder is where you assemble Dynamic Components — drag elements from the library, wire them to data, and define how they react to user actions. Everything is visual: no code, no XML, no metadata files. If you've used a page builder like Webflow or Figma, the layout will feel familiar, just with Salesforce data flowing through it.
Your work here produces a deployable component you can place on any Lightning Page or Experience Site.
Anatomy of the Builder
Four areas split the screen. Each has a distinct job.
Canvas (center)
The visual workspace where you assemble and arrange components.
Left Panel (left)
Your toolkit — components, resources, interactions, styles, structure.
Properties Panel (right)
Context-sensitive settings for whatever is selected on the canvas.
Top Bar (top)
Save, Preview, Undo/Redo, and global Settings for the component.
Canvas
The canvas is the central area where you drop components and arrange them into a layout. Drag from the Component Library on the left and drop anywhere on the canvas. Drop one component inside another to nest them — the same way you'd nest a Button inside a Card.
Layout components give the canvas its structure: Cards, Columns, Containers, and Tabbed Containers hold other components and define how they are positioned relative to one another. See Layout Components for the full set.
{% hint style="info" %} Use the Component Structure Panel (in the Left Panel) when nesting gets deep. The tree view makes it much easier to select the exact component you want than it is to click through layers on the canvas. {% endhint %}
Left Panel
The Left Panel is your toolkit. Five tabs sit along the edge — switch between them depending on what you're doing.
Component Library
The catalog of every Avonni component, organized by category (Data, Display, Input, Layout). Drag any component onto the canvas to add it.
A second tab — Fields — appears once you've set the Target Object API Name in Settings. Every field on that object shows up there, and dragging a field onto a component binds it to data in one move. Faster than configuring Data Mappings manually for each field.
→ Browse the Component Library
Resources Panel
Where you create the data and logic that drive the component. Five resource types live here:
Variable
Values that change at runtime — user input, selections, computed state.
Constant
Fixed values that never change — labels, configuration flags.
Formula
A value computed from other resources — totals, conditions, formatted strings.
Query
Records fetched from a single Salesforce object.
Nested Query
Records fetched together with their related child records.
→ Resources Overview — when to use which
Interactions Panel
A single place to view and manage every interaction configured across the component. Each interaction connects an event (On Click, On Load, On Row Select) to one or more actions (Execute Flow, Set Variable, Navigate to Record).
Style Panel
Reusable named styles you apply across multiple components for visual consistency. Define a style once, apply it everywhere, change it in one place to update every instance.
Component Structure Panel
A hierarchical tree of every component on the canvas. Critical when layouts get nested — easier to click a row in the tree than to find the right element buried in the canvas.
Properties Panel
The right-side panel changes based on what's selected on the canvas. Click a Button and you see Button settings. Click a Data Table to see the Data Table settings.
Most pages in this documentation describe the contents of this panel, organized by component. Settings are grouped into sections — typically:
Data Source
Where the component pulls its data from (Query, Variable, Manual).
Data Mappings
How Salesforce fields map to the component's fields or columns.
General Settings
Labels, sizes, layout options.
Display / Behavior
Visual options, conditional visibility, formatting.
Interactions
Event-to-action wiring (also accessible from the Left Panel).
→ Data Sources Overview — how Data Source and Data Mappings work together
Top Bar
Settings (gear icon ⚙️)
Top-left
Component-wide settings — most importantly the Target Object API Name that drives the Fields tab and record context.
Undo / Redo
Top-left
Step backward or forward through recent canvas changes.
Preview
Top-right
Opens a live preview of the component as end users will experience it.
Save
Top-right
Saves the component. Save is not Deploy — see the warning below.
Save vs. Activate
Save persists your work inside the Component Builder. To make the component available on a Lightning Page or Experience Site, you also need to Activate it from the component list view
→ Settings & Target Object — what each global setting controls
→ Publishing a Component — pushing your work live.
Where to go next
Build your first Dynamic Component in under 10 minutes.
Variables, Constants, Formulas, Queries — when to use which.
How components connect to Salesforce data and your own variables.
Make components react to user actions and trigger Salesforce work.
Last updated
Was this helpful?