Component elements and nodes tree

The inner body of the component, its UI representation - is a nodes tree. It is a form of virtual DOM. Enhanced DOM-nodes tree.

It can include:

• usual dom elements
• other components

Add a new node

To add a new node click on the "plus" button on the left sidebar in the component editor screen.

This will open a panel with available nodes. You can search for a specific node using the input. Not all the components are displayed at the same time, so if you do not see the needed one, search using the input.

To add a node you can

• click on the "plus" button near the node
• drag and drop it to the right place

If you use the "plus" button the node will added inside the node currently selected.

Moving nodes

When you click on the "nodes tree" tab on the left sidebar - you will see the nodes tree inside the current component.

You can drag and drop a node from one place to an other inside the nodes tree on the left sidebar.

When you drop a node it will placed inside the target node is possible. Otherwise it will be placed before or after it, depending on the initial position. If you want to force placing near the target node instead of placing inside, hold shift when you drop the node.

You can drag and drop nodes in the center WYSIWYG area. And also start dragging from the center and drop on the nodes tree in the sidebar. And vice-versa.

Select nodes

It is simple and straightforward. Just click on the node to select it. At this moment you can select only one node at a time.

Copy, cut, delete

You can perform all these modifications to the selected node using an actions menu near the node in the side bar

Or via hot keys:

• Cmd + x / ctrl + x - cut
• Cmd + c / ctrl + c - copy
• Cmd + v / ctrl + v - paste
• Backspace - delete