Building The UI

Widgets are the UI building blocks of Appsmith. Widgets empower you to visualise, capture and organise data with simple configuration and zero HTML/CSS.

Adding UI Elements

Appsmith has a collection of widgets that can be used to build the UI. Widgets can be dragged from the widget pane and be positioned on the canvas. They can also be resized to fit the data they need to display.

Click to expand

Naming Widgets

Widgets have default names generated for them. You can rename a widget by clicking on its name in the property pane.

Widget names are important when adding logic so name your widgets well!

Editing widget properties

Widget properties can be editing via the property pane which can be toggled next to the delete icon. Widget properties can affect data, style and action to take.

Widget properties don't have to be static! Connect a widget property to an API by typing {{ }} inside the property and binding the property using an API name or Widget name. You can learn more about working with widgets and APIs here