Skip to main content


Everything in One CODESYS Project

With the CODESYS Visualization add-on, within your project you can create the suitable user interface for your application. In order to visualize this, you link a visualization to your application data.

When creating a visualization and an application, you have the advantage that you can use common functions, for example, as library and source code management or find/replace throughout the project.

For more information, see: "Best Practices, Visualization" document. It is provided as a PDF with the CODESYS installation.


  • Display variant depending on the target platform

    You can run the same visualization on different target platforms. Possible display variants include CODESYS WebVisu, CODESYS TargetVisu, and CODESYS HMI. In the development system itself, there is an "integrated display".

  • Visualization editor

    In the graphic editor, you design your user interface from visualization elements. The visualization elements are provided from libraries in the Visualization ToolBox view. You drag an element to the editor area and adapt it in its Properties view.

  • Referenceable visualizations

    A visualization can be referenced in other visualizations. This allows for the creation of user interfaces with a complex structure. To do this, CODESYS Visualization also provides predefined visualizations, for example for dialogs.

  • Simple design change

    A simple change in the look and feel of a visualization is possible in one location by creating another visualization style.

  • Multi-language capability

    You can use text lists to conveniently provide visualization texts in multiple languages. You can configure a user input element for switching to another language in online mode.

  • User Management

    You can set up a visualization-specific user management for access control up to the level of the single element.

  • Other useful features

    Function block instances of visualizations, array access from the visualization, real-time data logging, extendability of the pool of visualization elements, provision of graphical objects from symbol libraries, calls of PLC functions from the visualization, reusability of visualizations by depositing them in libraries.

Table 1. Overview of the objects in CODESYS Development System which are relevant for the visualization


Object below an application in the device tree or in the POU pool with the programmable visualization screen

A visualization can reference other visualizations so that multiple visualization screens become one user interface with any number of pages at runtime.

Visualization editor and additional views

In this IEC 61131-3-compliant editor, you use the visualization elements to create the desired graphical user interfaces, panels, dialogs, etc. The editor is made up of the following components:

  • Graphical editor to arrange the elements

  • Interface editor: To parameterize the visualization

  • Keyboard Configuration: Configurator for keyboard inputs for online operation

  • Element list: Overview of all used visualization elements and editor for the position of the elements on the Z-axis

The following views are also available:

  • Visualization ToolBox: Provides the available visualization elements

  • Properties: Displays the element properties of the element currently selected in the editor

Visualization element

Finished element from one of the visualization libraries

The elements from the libraries are provided for you in the Visualization ToolBox.

Visualization Profile

Defines which library is integrated with which version

Each project that includes a visualization is based on this kind of profile in the project settings.

Visualization style

Determines the "look & feel" of the elements

The style is set application-wide in the Visualization Manager. Ready-to-use styles are provided and you can also create your own.

Visualization Manager

Configures features such as user management, style, language, input type, etc. for all visualizations of the parent application.

The Visualization Manager object is located below the application in the device tree.

Display variant

A visualization can be displayed in online mode in the following variants, which are created as objects below the Visualization Manager:

  • CODESYS TargetVisu

    Target visualization and remote target visualization (Remote TargetVisu) on PLC devices

  • CODESYS WebVisu

    Web visualization via a web browser


    HMI visualization on devices without an I/O connection

  • Visualization integrated in the development system

Visualization library

Collection of visualization elements that are provided in the Visualization ToolBox view

Symbol library

Collection of images and graphics that you can use in visualizations.

When you insert a visualization object, you can choose which of the installed system libraries should be available in the project.

Visualization Element Repository

Repository to manage the visualization profiles and the visualization element libraries

Visualization Style Repository

Repository to manage visualization styles


Task which is automatically inserted as an object in the task configuration of an application

Requirement: At least one object of a CODESYS WebVisu or CODESYS TargetVisu is configured below the Visualization Manager.

System overview

The user interfaces created in CODESYS can be displayed in different variants, depending on which of the used controllers is supported.


Display variants

  • Visualization integrated in the CODESYS Development System ("diagnosis visualization"):

    The integrated visualization in the development system is ideal for application tests, service or diagnostic purposes, and for commissioning a plant. When a device is connected to the controller, the visualization editor switches and animates the displayed elements. This variant is included in the free CODESYS Development System and can always be used independently of the controller being used.

  • CODESYS WebVisu:

    This variant is a web-based representation of the user interface in a standard browser (PCs, tablets, smartphones). This allows for remote access, remote monitoring, as well as service and diagnostics of a plant over the Internet. A standard web browser communicates via JavaScript (optional with SSL encryption) with the web server in the controller and displays the visualization using HTML5. This technology is supported by almost all browsers and is therefore available on iOS and Android terminals.

  • CODESYS TargetVisu:

    This variant is platform-independent and runs on control systems with an integrated display. The logic application and the user interface run on the same device. The user interface is displayed directly on the controller. This variant is suitable for operating and monitoring machines and plants. An optional extension of the runtime system is required to use CODESYS TargetVisu.


    This variant is used for the PC-based visualization or for the display on dedicated display devices. This allows access to the process data of multiple controllers via the same user interface.

    User interfaces created with CODESYS are displayed on a remote display device. This eliminates the computational load on the controller. Communication with the controller takes place via the data source manager. This variant is ideal for operating and monitoring the machine on site, whereby the values of multiple controllers can also be displayed in one visualization. The display is on one or more operator panels without control functionality and I/O control. In addition to Windows PCs, operating devices with other operating system platforms can also be used.

For more information, see: Configuring and Starting Display Variants