> For the complete documentation index, see [llms.txt](https://docs.cloudio.io/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.cloudio.io/creating-pages/working-with-pages/working-with-page-components.md).

# 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.

![](/files/-MAesFr8_K93e71h_mfI)

 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.

![](/files/-MAesNacl_Gh9OrkDdC2)

  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*** ](/creating-pages/working-with-pages/working-with-page-components/understanding-the-components-panel.md)section.

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

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