# 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](/files/RE29QEiPkeRfrCcoQ9Bk)

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="/files/XL4nLodloMTIJPQRuVWI" 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](/files/tLzbKcz4Uo65Z4xeptNZ)

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

<div align="left"><img src="/files/vcvMlOoG73tdPLOjSwNw" alt=""></div>

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

![Preview Mode](/files/KcaZWeB0g2JS8P34EfCw)

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

<div align="left"><img src="/files/UJFEkxiSQATkadun87dp" alt=""></div>

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

![Debug Mode](/files/j9A58UtpzKaHet3uPDor)


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.adapptio.com/getting-started/editor.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.
