---
title: "Web Vision | Designer | N3uron KB V1.22"
slug: "web-vision-designer"
description: "Learn how to access and use the N3uron Web Vision Designer, including its interface areas, design tools, properties, and key shortcuts."
updated: 2026-10-08T08:14:54Z
published: 2026-10-08T08:15:09Z
canonical: "docs.n3uron.com/web-vision-designer"
---

> ## Documentation Index
> Fetch the complete documentation index at: https://docs.n3uron.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Designer

Designer can be launched from the **Web Vision** configuration page in the WebUI, as shown in the below image. Alternatively, the designer can be launched directly from the web browser by adding **/designer** to the **Web Vision** URL. For instance, **https://localhost:8444/designer**.

![](https://cdn.document360.io/54093ab5-6b22-4542-a265-04377931f11a/Images/Documentation/webvision_open01.png)

The Designer includes the following areas:

| **Section** | **Description** |
| --- | --- |
| **Navigation** | 1. **Project tree** | Displays the templates in the project. This includes visual templates, such as **Containers** and **Components**, which can be reused to build customized screens; and **Functions** and **Datasets**, which allow application of logic and data structures to be reused across multiple views. |
| 1. **Properties tree** | Displays the properties of the selected element. Each property can be configured using expressions or literals on the **Value** column, and the result of this expression is shown on **Output** column, if expanded. |
| 1. **Help tool** | When a property is selected, the **Help** panel becomes available at the bottom of the navigation area. Expand this panel to view additional information, descriptions, and usage details for the selected property. |
| **Working space** | Shows the UI view of the selected template, if any is available, and allows users to build and edit the visual interface of the project. |
| **Help bar** | Contains quick access to the main design tools and frequently used actions in the Designer UI. |
| 1. Burger Menu |
| 1. Save/Discard changes |
| 1. Opened elements tabs |
| 1. Snap grid |
| 1. Preview mode |

![](https://cdn.document360.io/54093ab5-6b22-4542-a265-04377931f11a/Images/Documentation/012204_webvision_designer_01.png)

## **Key shortcuts**

The following shortcut keys can be used when working in the designer:

| **Shortcut** | **Description** |
| --- | --- |
| **Ctrl + S** | Saves the current module status, applying all changes made during the session. |
| **Ctrl + X** | Cuts the selected property value, element, or template. Elements and templates remain available until they are pasted, while property values are removed immediately when cut. |
| **Ctrl + C** | Copies the selected property value, element, or template. |
| **Ctrl + D** | Duplicates the selected element or template. |
| **Ctrl + V** | Pastes the property value, element, or template stored in the clipboard into the selected destination. Copied elements can be pasted multiple times, while cut elements are removed from the clipboard after being pasted. |
| **Ctrl + Drag** | Duplicates the dragged element or template, creating a new instance in the destination. |

[Web Vision Full Product Details](https://n3uron.com/iiot-platform-modules/web-vision/)