# Working with page components

## Adding components to a page

1. In the **Navigation menu**, under the **Developer** role, in the **Developer** group, click **Pages**. The list of all existing pages is displayed.
2. To open the page canvas, under the **URL** column, click the URL of the required page. The page canvas is displayed.

![](https://1117313960-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LzMJAXNyRSI4WE3Jt4z%2F-MAerhCfs5O-9bIlCx3W%2F-MAesFr8_K93e71h_mfI%2FPage_canvas.png?alt=media\&token=1d9079e7-29dc-4ac7-98b7-45faf2dc5503)

 3\. To design the user interface, on the menu bar, click the **Enable Developer mode** icon.

 4\. To open the components panel, click. You can view that the page is already added under the **Tree** tab.

 5\. To add components, right click on the parent component. The lit of all existing child components is displayed.

![](https://1117313960-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LzMJAXNyRSI4WE3Jt4z%2F-MAerhCfs5O-9bIlCx3W%2F-MAesNacl_Gh9OrkDdC2%2FList_of_components.png?alt=media\&token=237ca72d-186e-4c58-9e4b-7e0822d2054a)

  6\. Search and click on the required component.

{% hint style="info" %}
To understand the different tabs in the components panel, refer to the [***Understanding the components panel*** ](https://docs.cloudio.io/creating-pages/working-with-pages/working-with-page-components/understanding-the-components-panel)section.

To view the list of components, refer to the [***Understanding the components of a page***](https://docs.cloudio.io/creating-pages/working-with-pages/working-with-page-components/understanding-the-components-of-a-page) section.

To view the standard properties of a component, refer to [***Understanding the standard properties of components***](https://docs.cloudio.io/creating-pages/working-with-pages/working-with-page-components/understanding-the-standard-properties-of-components) section.
{% endhint %}