Menu Icon

Using Components

Visually build your web apps with all the basic components you would see in most apps.

Components consist of basic items one would find in almost all apps. In that sense, they are like the bricks you use when building a house. You can arrange them on the page as you see fit, connect them to data sources, and define how they should behave when a user interacts with them.

These are some examples of commonly used components

  • Lists - Show multiple items to your users in a customized way, whether it's a list of products, clients, or cars.
  • Images - Place pictures or other static visual components in your page
  • Forms - Provide an easy and flexible way to collect input from your users.
  • Tables - Show lots of information that you want displayed in a spreadsheet-like way
  • Graphics - Visually summarize data for your users
  • Modals - Show temporary pop-up windows or dialog boxes to your users

Adding and editing components

To add a component on your page you can click on the "+" icon at the top-left side of the editor.

You can drag and drop your desired component on the page. Components can be added before, after, or within another component (depending on their properties). When you add components to the page, they will also appear in the component navigation menu on the left side of the editor.

You can arrange the components visually or arrange them by dragging them in the component menu. In order to edit or delete the component, click on the component on the page and pick an action from the menu under the grey ellipsis icon.

Likewise, you can edit or delete the component from the navigation menu on the leftside of the editor by clicking on the component on the menu and then accessing the same options from the ellipsis icon at the end.

Component Properties

When you click on a component you can change its properties from the panels on the rightside of the editor. The properties and options for each type of component are different.

The first panel consists of miscellaneous settings for the component. For a card component, for example, the header text can be set from the settings panel.

The second panel is the detailed style panel. Here you can find detailed options for styling your component.

The third panel is the actions panel. Here you can define actions and behaviors triggered by the component or dynamically change its properties based on triggers.

The last one is the data source panel. You can use it to connect data to your components. It is only available if the component supports data sources.