# Studio

Airkit Studio is the interface in which your Airkit apps can be created and edited. This article goes over the basic structure of the Studio, as well as the placement and functionality of some important buttons located at the top and leftmost side of the interface.

![](https://4185914948-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FSItjRhbHaLQ4ar3DUljt%2Fuploads%2Fgit-blob-bd18738bf799e97ba9368d34318973a9b8698a1e%2Fstudio-v181-0.png?alt=media)

## General Structure

### [Builder Bar](builder-bar)

The Builder Bar provides a way to toggle between Airkit's many Builders, the interfaces that allow you to construct and edit different components of your apps.

**Example**: When you first create a new Airkit app, you're taken to the [Journey Builder](builder-bar/journey-builder) by default. The Journey Builder provides a big-picture view of how the component pieces of your application fit together; it is a particularly good place to start if you want to lay a foundation for you app using [Kitcloud](https://github.com/airkit/airkit-docs/blob/master/docs/v18-1/kitcloud.md) templates. Once you've laid out the big-picture structure of your app, you want to make a small tweak to the UI. This (along with all other specific user interactions) is the domain of the [Web Flows Builder](builder-bar/web-flows-builder) – the bird's-eye view of Journey Builder does not lend itself to detailed editing – so you click on the Web Flows Builder icon within the Builder Bar and move to the Web Flows Builder.

### Tree

The Tree, if applicable, is where you'll find an expandable and collapsible breakdown of the components examinable within the Builder. The Tree is a part of the Builder: different Trees belong to different Builders, and you can remind yourself which Builder you're working in at any given time by looking at which Builder icon is highlighted in pink on the Builder Bar.

Not all Builders have a Tree; the [Settings](builder-bar/settings) and [Media Library](builder-bar/media-library), for instance, do not have Trees because their components do not nest.

**Example:** In the [Web Flows Builder](builder-bar/web-flows-builder), **Navigator** tab within the Tree contains three main sections: **Web Flows**, **Page Layouts**, and **Custom Controls**. You want to make a small tweak to the UI of one of your web pages, so you expand the _Web Flow_ section. This provides a list of the [Web Flows](web-flows) that make up your web application, and you can expand each Web Flow to access particular Web Pages. From there, you can inspect individual [Web Controls](../web-controls/web-controls-overview). Still working within the Tree, you click on the specific Web Control you want to edit; all editable properties of that Web Control appear in the Inspector (see below).

### Stage

The Stage displays a visual representation of the aspect of the app you're modifying, allowing you to see the results of your changes in real time. Exactly what is displayed in the Stage varies from Builder to Builder, to better communicate the type of modifications each Builder facilitates.

**Example:** As you use the [Web Flows Builder](builder-bar/web-flows-builder) to edit the UI of your web app, the Stage showcases what those changes will look like to the end user. You can also click on a [Web Control](../web-controls/web-controls-overview) as it's displayed in the Stage in order to open up the interface to make edits to it in the Inspector (see below). To change the color of a particular [Button](../web-controls/button-web-control), you click on said Button as it appears in the Stage, then make your desired stylistic changes. You can see the changes as you make them, so if you find your initial changes clash with the UI of the broader Web Page, you can iterate until you find a look you love.

### Inspector

The Inspector is where you can examine and modify individual elements pertinent to a Builder. Like the Tree, the Inspector is a part of the Builder: different Inspectors belong to different Builders, and you can remind yourself which Builder you're working in at any given time by looking at which Builder icon is highlighted in pink on the Builder Bar. However, unlike the Tree, the display in the Inspector does not remain consistent as long as you are working within the same Builder; the information within the inspector – and even the format through which that information is presented – varies depending on what element is being inspected.

Not all Builders have an Inspector; the [Settings](builder-bar/settings) and [Media Library](builder-bar/media-library), for instance, do not have Inspectors because all relevant information is displayed and editable within the Stage.

**Example:** You're using the Inspector to examine a particular [Button](../web-controls/button-web-control). To make a stylistic change to the Button, you go to the **General** tab and expand the contents under **Style**. You want to change the background color of the button, so you expand the contents under **Background**. The dropdown menu that appears allows you to to modify the color of the button, or even use a picture to fill in the button's background.

### [Variable Tree](variable-tree)

The **Variable Tree** provides a way to manage all **Variables** available within your **Journey**. It allows builders to toggle between Variables, add new ones, delete the ones that are no longer needed and test them with sample data.

### Errors Panel

The Errors Panel provides a way to identify an apps's errors, warnings and information. From of the displays errors or warnings, you can jump to the location where the coflict is within your app.

## Key Buttons in the Studio

While there are many different buttons associated with the different Builders, as well as their Trees and Inspectors, there are a few buttons in the Studio that will always be available to you. These are located at the top of the Studio interface, as well as in the Builder Bar.

### Builders in the Builder Bar

No matter what Builder you're working within, you'll aways have access to the same Builder Bar, which is what allows you to toggle between different Builders while working on your app. For a more detailed discussion on what each Builder is, check out [documentation on the Builder Bar](builder-bar).

### [App Preview](app-preview)

The App Preview button allows you to run and test your Airkit apps without needing to publish them. By emulating a user's [Journey](../concepts/journeys) through your app, you can check to make sure everything functions as intended.&#x20;

### Return to Console

This button takes you back to the [Console](../console/console), where, among other things, you can access every application you have saved within your [Organization](../administration/airkit-organizations).

### Publish

Click on the Publish Button when you want to [publish your app](../building-apps/publishing/publishing-your-application).

### Profile Selection

This dropdown menu allows you to toggle between different profiles that can be used for deployment. Different profiles can be associated with different resources (configured in [Settings](builder-bar/settings)) as well as different [Datastores](../data-and-integrations/airdata/datastores), allowing you to test your application in separate sandbox environments. For more, see [Profiles and Deployment Settings](../building-apps/publishing/profiles-and-deployment-settings).

### Save

Save your work frequently, so you don't have to worry about losing progress by accident! In lieu of clicking the **Save** button, the usual keyboard shortcuts also work: CMD + S or CTRL + S will save your work equally well.

### Undo

Airkit's **Undo** button functions like every other Undo button: if you make a change you don't want to keep, press the **Undo** button to undo the last thing you did.

### Redo

Airkit's **Redo** button functions like every other Redo button: if you pressed the Undo button and don't like the results, use the **Redo** button to redo what you undid.
