---
title: Toolbar
description: "## EDITOR TOOLBAR ![](https://www.lostingamestudio.com/wp-content/uploads/2025/03/EditorToolbar-1.png) - **Save** : Save this asset. - **Browse** : Browse to the associated asset and selects it in the most recently used content browser. - **Device Info** : Toggle display of little window that contain some…"
url: "https://www.lostingamestudio.com/documentation/touch-interface-designer/touch-interface-layout-editor/toolbar/"
updated: "2025-12-17"
category: Touch Interface Layout Editor
---

# Toolbar

## EDITOR TOOLBAR

![](https://www.lostingamestudio.com/wp-content/uploads/2025/03/EditorToolbar-1.png)

- **Save** : Save this asset.
- **Browse** : Browse to the associated asset and selects it in the most recently used content browser.
- **Device Info** : Toggle display of little window that contain some useful info about current device profil.
- **Check Overlap** : Toggle check overlap function.

## VIEWPORT TOOLBAR

![](https://www.lostingamestudio.com/wp-content/uploads/2025/03/ViewportToolbar.png)

**From left to right**

- **Selection Mode** : If enabled, selection box should intercept center of component to select.

- **Pivot Mode** : If enabled, pivot handle location is in center of component instead of alignment location

- **Show Dashed Outline** : Draw dashed outline around canvas

![](https://www.lostingamestudio.com/wp-content/uploads/2025/03/CanvasWithOutline.png)
Dashed outline disabled

![](https://www.lostingamestudio.com/wp-content/uploads/2025/03/CanvasWithoutOutline.png)
Dashed outline enabled

- **Toggle Opacity State** : Simulate behavior of active or inactive state of touch interface

![](https://www.lostingamestudio.com/wp-content/uploads/2025/03/ActiveOpacity-1024x506.png)
Active opacity

![](https://www.lostingamestudio.com/wp-content/uploads/2025/03/InactiveOpacity-2-1024x502.png)
Inactive opacity

- **Toggle Constrain on Canvas** : Allows you to constrain the position of component to the edges of the canvas. If a component is outside the canvas when this feature is enabled, then a new position is automatically calculated to fit inside the canvas.

- **Change Orientation** : Change orientation mode of designer.

![](https://www.lostingamestudio.com/wp-content/uploads/2025/03/LandscapeOrientation-1024x965.png)
Landscape

![](https://www.lostingamestudio.com/wp-content/uploads/2025/03/PortraitOrientation-1024x964.png)
Portrait

## VISUALIZATION

The visualization menu allows you to display useful information such as the hit box or the name of component.

![](https://www.lostingamestudio.com/wp-content/uploads/2025/03/Visualization.png)

![](https://www.lostingamestudio.com/wp-content/uploads/2025/03/TouchInterfaceWithoutDebug-1024x592.png)
Without visualization

![](https://www.lostingamestudio.com/wp-content/uploads/2025/03/TouchInterfaceWithDebug-1024x595.png)
With visualization

## SCREEN SIZE

Allow you to change resolution of canvas and see how your touch interface appear in different screen size ratio. If you have enabled Device Mockup in Background settings, so this menu allow you to select device you want to preview your touch interface.

![](https://www.lostingamestudio.com/wp-content/uploads/2025/03/LandscapeOrientation-1024x965.png)
Generic

![](https://www.lostingamestudio.com/wp-content/uploads/2025/03/GalaxyNote20Preview-1024x960.png)
Galaxy Note 20

![](https://www.lostingamestudio.com/wp-content/uploads/2025/03/Iphone13ProPreview-1024x966.png)
iPhone 13 Pro