> For the complete documentation index, see [llms.txt](https://docs.aitheon.com/creators-studio/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.aitheon.com/creators-studio/main-elements/sandboxes.md).

# Sandboxes Page

There are **Sandboxes** and **Repositories** tabs near the Home page in Creators Studio.

On the **Home** page, you may see all of your projects. The main work occurs on the **Sandboxes** page.&#x20;

A sandbox is a virtual environment for your work on an application. To bring your app to the real system you need to [**release**](/creators-studio/release-an-app.md) it.

If there is no running sandbox, you will be prompted to choose one:

![](https://3983587133-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LvAp4NFmv7Cj5kJvKjw%2F-MJg1NNNuc2rKC_83iEo%2F-MJg9KD3iOWa8K5FGb8R%2Fimage.png?alt=media\&token=af7d93b7-f9d2-465c-8392-b8db642acf9e)

After this **Sandboxes** tab will open. Your main work environment will look like this: &#x20;

![](https://3983587133-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LvAp4NFmv7Cj5kJvKjw%2F-MLwR-VvK7I5I-h6ByaM%2F-MLwSC3GmrTIdpPT7gKJ%2Finterface.png?alt=media\&token=fa9c3e5c-7611-4f92-afe0-69939e907282)

It contains:

* Creators Studio tabs **(1)**.
* Sandboxes tab menu **(2)**.
* Main Editor basis **(3)**.
* Apps Editor tool for visual programming **(4)**.

## Sandboxes menu &#x20;

![](https://3983587133-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LvAp4NFmv7Cj5kJvKjw%2F-MLwR-VvK7I5I-h6ByaM%2F-MLwSxuWOFoU_ejSwiuq%2Fsand%20menu.png?alt=media\&token=4f42e5d5-1e4b-44dd-ac9a-dce79baf0b54)

**New Project (1)** opens a new project window.

**Load Project (2)** allows you to choose your existing project and open it in this sandbox (editor).

**Settings** **(3)** allows you to place a request with your app to Marketplace. You need to set up settings for the application.

**Releases** **(4)** allows you to make a release of your app manually.

**Terminate** **(5)** terminates a sandbox. Click it when you have done your work with a project. Also, the sandbox will terminate automatically in 15 minutes when you stop your activities in it.

**IO** **(6)** shows a list of your app projects. Choose a project and in a pop-up window, choose sockets the application node needs. (See more in [**Aitheon Core guide**](https://docs.aitheon.com/aitheon-core/) / **Nodes** and **Input and Output Sockets**).&#x20;

![](https://3983587133-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LvAp4NFmv7Cj5kJvKjw%2F-MJgqOhcCIrki0SralBe%2F-MJgqU1yMPmx_yQVPIUY%2Fsockets.png?alt=media\&token=cf3efeb1-f606-4136-bc83-2c6da0368064)

**Install Component (7)** allows you to add a new component to the palette.

**Quick Release** **(8)** allows making a release of your app in one click. Creators Studio will take the project\`s name for an app and will give a build number automatically.

**Quick Release Status** **(9)** shows your release status: when **In Progress** changes to **Complete** – your app is ready to use.

## Main Editor Menu

For development purposes, Creators Studio uses a common and clear Main Editor.

Here we will overview some basics of the Main Editor interface, useful for codeless application composing.  &#x20;

![](https://3983587133-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LvAp4NFmv7Cj5kJvKjw%2F-MW3sa6jxVkrPm8LoGjw%2F-MW3zroXIJcFCeYptRg1%2Fmain%20editor.png?alt=media\&token=2218316a-7890-4d0b-9d73-b0a95fa5c45e)

On the left sidebar **(1),** there are the following buttons (downward):

* Editor's menu.
* The "**two sheets of paper**" button (highlighted) shows and hides the **EXPLORER** and all the columns on the right – **(2)**, **(4)**, **(5).**
* Search (and replace) button.
* The '**mini mindmap**' button with a number in the blue circle leads to the **Source Control** tab that shows all the changes in your projects and allows you to commit and push the changes to git in order to save the project and work stages.
* Run/debug button.
* Extensions tab.
* **Aitheon Devises** tree. It allows you to [run an AOS application on the device](/creators-studio/deploy-app.md) right from Creators Studio.&#x20;
* Accounts.
* Manage menu.

**OPEN EDITORS** field **(2)** contains a list of all opened files in Creators Studio. They open in browser-like tabs **(3),** and you can manage them the same way.

**WORKSPACE** field **(4)** is basically a folder/file explorer. When you load (or create) a project, it appears here as a folder that you can expand (and collapse) and choose a file you need to edit. In the project FloorDashboard, we chose the **{} floordashboard.graph-app.json** file, and it opens in the editor. For visual (codeless) programming, you need to open this **{}....json** type of files in the main project folder.

**OUTLINE** and **TIMELINE** fields **(5)** are more useful for coding projects. As well as the bottom field **(6)**.

Right-click on a folder **(7)** shows a useful menu:  &#x20;

![](https://3983587133-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LvAp4NFmv7Cj5kJvKjw%2F-MW4E3EiRyA6hxyFV29L%2F-MW4EZwgi_YnmLho69zL%2Fremove%20folder.png?alt=media\&token=1090f7a5-9795-4102-a0da-67476d6dcb28)

You can **Remove Folder from Workspace** **(8)**, for example.

{% hint style="info" %}
It is very important to remove projects from the workplace after finishing with them. Before you did this, all your edits will be available just for you, but not for other users.&#x20;

BUT! Don't forget to save the project properly before you remove its folder from the workspace: [**Commit and Push**](/creators-studio/compose-an-app.md#5-commit-and-push) or [**Release**](/creators-studio/release-an-app.md).
{% endhint %}

Right-click on the  **{}....json** file shows another useful menu. For example, you can open a window with your app\`s user interface view **(9)**, so you may observe the appearance before you release your app. &#x20;

![](https://3983587133-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LvAp4NFmv7Cj5kJvKjw%2F-MW4E3EiRyA6hxyFV29L%2F-MW4FAHrvfDrEyTlHZNL%2Fui%20viewer.png?alt=media\&token=ba2fbd4b-ecc4-4491-b3bc-defc88a3ff99)

## Aitheon Applications Editor&#x20;

Apps Editor made for visual flow programming, which means you can compose an application just by dragging, wiring, and setting up visual components (nodes) on the editor\`s table. A flow represents some logic that follows when a message (data) comes to the app\`s input. The app gives some result – it may be some output message or simply a widget that shows you valuable information about the system that sends data.&#x20;

![](https://3983587133-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LvAp4NFmv7Cj5kJvKjw%2F-MLwYBjpAISjUeio1DL8%2F-MLwdHMQwlbQ_WHCv01A%2Fapp%20builder.png?alt=media\&token=e8bdc162-cc81-4864-90a8-0f4f711e9dbb)

Here we will overview the main features of the Apps Editor tool:

* Header **(1)**.
* Palette **(2)**.
* Workspace **(3)**.
* Sidebar **(4)**.

### Header

In the Header you can see: &#x20;

![](https://3983587133-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LvAp4NFmv7Cj5kJvKjw%2F-MLwdMk_dgmiucIp9msJ%2F-MLwe-g2T7r8SZ1iN3VI%2Fheader.png?alt=media\&token=3d6fc938-c180-4bd3-8ebb-18187d3187cd)

* A project name **(1)**.
* [**Deploy**](/creators-studio/compose-an-app.md#4-deploy) button **(2)** that runs your project and gives a list of deployment options.
* Options menu button **(3)** shows a list of options for the editor.

#### Header / Menu / Subflow

There is the [**Subflow**](/creators-studio/main-elements/flow-components.md#subflow) element among all the interesting menu options.&#x20;

![](https://3983587133-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LvAp4NFmv7Cj5kJvKjw%2F-MLwdMk_dgmiucIp9msJ%2F-MLwfQcWHmgkzG1KaX-J%2Fsubflow.png?alt=media\&token=5b737a88-e2b3-41f1-a072-3e20271553af)

A subflow allows you to fold some flow into one component that you may use in other flows – it will appear on the palette **(1)**.&#x20;

Click the Header\`s menu and choose **Subflows (2)**. You can **Create** a new **Subflow** **(3)** in a new flow tab or instantly transform selected components and connections in one subflow **(4)**.

Double-click a subflow tab to change its name and description. A subflow settings are at the top of the tab **(5)**.

### Palette

Palette is a list of components that you can drag to a workspace and wire to compose an application: &#x20;

![](https://3983587133-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LvAp4NFmv7Cj5kJvKjw%2F-MLwh-9kGsBjvNelkgcZ%2F-MLwiNzHTk4ttp7sdpRB%2Fpalette.png?alt=media\&token=349deac8-71f4-490f-bbe9-a6c57299fe9e)

* To filter nodes (components) **(1),** begin to type a node\`s name.
* Components are stored in categories **(2)** that you can expand and collapse for your convenience.
* Components **(3)** is the main part of the palette – you can drag them from here to the workspace.
* Collapse or expand all the categories with the bottom arrows **(4)**.

### Workspace

**Workplace** is a table where you can drag needed components, wire them, organize them to provide the logic of your app: &#x20;

![](https://3983587133-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LvAp4NFmv7Cj5kJvKjw%2F-MLwh-9kGsBjvNelkgcZ%2F-MLwjHX6NzDxoYlY0le4%2Fworkspace.png?alt=media\&token=1894f2f5-66a2-4baa-85e1-4f3dce78cc45)

* The workspace table **(1)** to place components on.
* Tabs **(2)** for different flows of your app. Work alike tabs in browsers.
* Tabs control buttons **(3)**: **Add a Flow** and a **List of Flows** to choose and switch.
* Table control buttons **(4)**: **Toggle Navigator** (for dragging the table), **Zoom Out**, **Reset Zoom,** and **Zoom In** the table.&#x20;

### Sidebar

Sidebar helps to understand particular components and flows features:&#x20;

![](https://3983587133-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LvAp4NFmv7Cj5kJvKjw%2F-MLwtrMFppQCsKrKeaFp%2F-MLwuJveMypcjjsosc-x%2Fsidebar.png?alt=media\&token=f7e0e6f1-9a25-4b89-b1e8-b5ffcbdb2312)

It consists of **info**, **help**, **debug,** and other tabs **(1)**.

In this pic, you can see the information tab.

#### The info tab&#x20;

* **Flows** information field **(2)**. You can easily find a needed component, change its properties, enable or disable it with one click.
* A component information field **(3)**. When you choose a component on the workspace, its parameters are shown here.

#### The Help tab

![](https://3983587133-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LvAp4NFmv7Cj5kJvKjw%2F-MLwvyNkW_ICyJOVN5Ul%2F-MLwwfsON9Nx-uKOMyQc%2Fhelp.png?alt=media\&token=05524648-7b77-4c00-a125-8cf6b7e34d06)

* **A list of components (1)**. Choose one to see help info.
* Help information about the component **(2)**. About how its properties and how to use it.&#x20;

#### The debug tab

The debug tab allows you to see the result of some flow by using the Debug component in the table: &#x20;

![](https://3983587133-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LvAp4NFmv7Cj5kJvKjw%2F-MLwyHp5C4dSu4B-InhU%2F-MLx-1DwKxBKEojrlr0T%2Fdebug.png?alt=media\&token=03305105-53db-4044-9aad-517b52055cc8)

You may select the source of data **(1)**, clear the log **(2)**. This component and this tab on the sidebar very useful when you want to see what result shows some piece of flow (or entire app) before releasing an app.&#x20;

![](https://3983587133-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LvAp4NFmv7Cj5kJvKjw%2F-MLwyHp5C4dSu4B-InhU%2F-MLx0pBW6DlZcNIo1Asm%2Fdebug%20examp.gif?alt=media\&token=ad6bad93-5450-48a0-bdd5-ab64dbf83668)

In this example, we prepared a **function** that converts seconds of the current time to the conventional form. Then we drag an **inject** component, add topic **Current Time** to the message object (default payload - seconds - will go to our function component converter), add a **debug** component, connect, **Deploy,** and press the inject button.

The debug window shows the topic and current time.&#x20;

So, at any step of a flow, we can examine the current message output.&#x20;

Explore more at the [**Debug**](/creators-studio/standard-components.md#debug) component chapter.
