# Editor

The graphics user interface represents the visual output of a whole application, and it's mainly used for designing and connecting existing actions and data structures. The design of applications is composed of canvas drag and drop work-field by many different components placed in views, which are used as standalone pages or as subelements of other views.

![Nonmenclature of Canvas GUI panels](https://4190342052-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MjiITn8B0C9eJvihABh%2Fuploads%2F2EJ27NVm00k11rNtE8y1%2Fimage.png?alt=media\&token=3f541369-2b6e-4cbf-b250-084da73243e9)

All existing or new elements, like actions, integrations, or views, are placed in a directory structure with the possibility of sorting out files, renaming, moving, or deleting them. If desired, there is also an option to make other sub-directories by choosing it from Create a new menu.

### Canvas GUI Editor <a href="#ckc9vuiv64nj" id="ckc9vuiv64nj"></a>

Canvas graphical user interface editor shows us the content of personal views, with the option for switching between design, preview or debug mode.

### Design Mode <a href="#i3enk7nstw48" id="i3enk7nstw48"></a>

<div align="left"><img src="https://4190342052-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MjiITn8B0C9eJvihABh%2Fuploads%2FEeDO14vF069eqofvJ8h4%2F2?alt=media" alt=""></div>

The Design Mode represents the output layout composed of a single components. You can drag and drop elements, define their parameters, and bond them with existing actions.

![Design Mode](https://4190342052-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MjiITn8B0C9eJvihABh%2Fuploads%2FlRpdry92ksO033h4ojv6%2F3?alt=media)

### Preview Mode <a href="#u2sseqy7fzx" id="u2sseqy7fzx"></a>

<div align="left"><img src="https://4190342052-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MjiITn8B0C9eJvihABh%2Fuploads%2FjDQHQhdBuPFaY5bfmorh%2F4?alt=media" alt=""></div>

Preview Mode shows views represented by a web browser without deploying them.&#x20;

![Preview Mode](https://4190342052-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MjiITn8B0C9eJvihABh%2Fuploads%2FYmpPX2qm2TFA1dzxMrFM%2F5?alt=media)

### Debug Mode <a href="#qnmmhp9r20u0" id="qnmmhp9r20u0"></a>

<div align="left"><img src="https://4190342052-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MjiITn8B0C9eJvihABh%2Fuploads%2FEX4CFzoIrYQBm604KgQq%2F6?alt=media" alt=""></div>

The Debug Mode is read-only, showing a complete blueprint traceable case of the actual view.

![Debug Mode](https://4190342052-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MjiITn8B0C9eJvihABh%2Fuploads%2FEFEa2zuYQcSDtfWc641z%2F7?alt=media)