# The interface of PandaSuite Studio

> Discover PandaSuite Studio, a visual editor to design interfaces, add interactive features, and customize user workflows effortlessly. Learn about its components like the header, navigation, objects, properties, and project management.

https://docs.pandasuite.com/getting-started/the-interface-of-pandasuite-studio/

**Welcome to PandaSuite Studio! This visual editor allows you to create your interface, add interactive features with components and customize user workflow very easily.**

[Video: Introduction to PandaSuite Studio](https://www.youtube.com/embed/XKrTPgFUHg8?&hl=en&cc_lang_pref=en&cc_load_policy=1)

[Image: PandaSuite Studio with red badges 1 to 8 on the demo app: header, screens, creation area, objects, properties, breadcrumb, project, publishing]

1. **The header:** easily access the main actions to insert content: add a text block, an image, a vector shape, a component or a data source, and manage your files. Customize workspace settings from the zoom menu (zoom, grid, tabs etc.).
2. **Navigation:** your application is composed of screens. Create screens, select the one you want to work on. Click the selected screen again to see its states.
3. **The creation area:** this is the visible area where you create the interface of your application. You can place objects out of the screen, especially to create transitions and animations.
4. **Objects:** find all objects, graphic or not, that are available at this level. Graphic objects (text, image, pop-up...) are at the top of the list and isolated from system objects (Beacon sensor..) by a separator. Their order in the list indicates their position in terms of depth: those at the top of the list are located above the bottom objects.
5. **The properties / actions:** get access to the properties of the selected object and add an action.
6. **The breadcrumb:** it lets you know what level you are at (screen, state, component). To go to a higher level, click on it in the breadcrumb.
7. **The project:** click the house icon to reach the project level. There you find the screens, [the foregrounds and backgrounds](https://docs.pandasuite.com/essentials/project-properties/foreground-and-background/) that create global elements, the project properties, and the components, data sources and actions of the whole project.
8. **Preview, share and publish:** click **Preview** ▶ to see the web version of your application, or the arrow next to it to [test the project on your phone](https://docs.pandasuite.com/essentials/project-management/test-and-preview-your-project/#open-the-project-from-studio) with a QR code. **Share** gives the [sharing link](https://docs.pandasuite.com/essentials/project-management/sharing-link/) of your project, its QR code, and its embed code. **Publish** shows what [moving to production](https://docs.pandasuite.com/essentials/content-management/move-your-project-to-production/#publish-from-pandasuite-studio) would update, layout by layout, and the apps the project is in. Remember to save your project regularly: there is no automatic backup.
