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 while adding logic, so name your widgets well!

Editing widget properties

Widget properties can be edited via the property pane which is opened using top-right icon (Edit Widget Properties). Widget properties can affect the widget data, styling and actions.

Widget properties don't have to be static! To make it dynamic, type {{ }} inside the widget property and bind it to an API/Query/Widget. You can learn more about working with widgets and APIs here