# Code Visual Editing

To improve code editing efficiency and experience, reduce non-essential duplication of coding effort in development. The developer tool provides a visual panel that allows developers to quickly layout and modify the interface by drag and drop, while the code editor and the visual editing panel will synchronize changes in both directions in real time.

# Operating environment

1.05.2101181 or above Developer Tools

# Turn on the visualization

By clicking the visualization button on the top navigation bar of the developer tools When turned on, you can see the corresponding visualization panel

# Synchronize the visual panel and editor in both directions

When a developer makes setup and actions in the visual panel, the code editor opens the corresponding code file and generates the corresponded code synchronously. Developers can click on the node or outline of the code to select the corresponding visual component.

# Edit custom components

To edit a custom component, select the relevant import file for the custom component in the editor and edit it in the visual panel.

# Drag and drop editing ability

Drag-and-drop editing positions and dimensions for the underlying components are now supported to assist developers in making routine position size adjustments for components.

# Support properties / styles / events modification

By selecting the page node to edit, a developer can edit the properties, styles, and events of the corresponding component. The current editing capabilities of properties and events are relatively basic, and subsequently editing capability such as alignment, toping, and combination will be added.

# Support shortcut keys

Currently supported shortcut key capabilities are as follows:

• Arrow keys↑Move element up
• Arrow keys↓Move the element down
• Arrow keys←Move elements to the left
• Arrow keys→Move element to the right
• Ctrl + zCancel
• Ctrl + shift + zCancel Undo
• Hold downalt, mouse with hover to see the distance between elements and other elements