WinCC Unified and React: Synergies for Modern HMI Development

After more than ten years in industrial automation with Siemens WinCC and TIA Portal, I've observed a fundamental shift: The classic WinCC Basic and Comfort Panels are being replaced by WinCC Unified - Siemens' modern SCADA/HMI platform. This fundamentally changes how we engineer HMI interfaces.

The core of this change: WinCC Unified is based on the Google V8 JavaScript Engine - the same engine that powers Chrome and Node.js. Those familiar with React, TypeScript, or modern JavaScript suddenly find familiar concepts in the industrial HMI world.

In this article, I'll show the concrete technical synergies between web development and WinCC Unified - based on official Siemens documentation and practical experience.

1.WinCC Unified: Technical Foundations

1.1.The V8 Engine at the Core

WinCC Unified uses the Google V8 JavaScript Engine, which "largely implements" ECMAScript 2015 (ES6) - according to official Siemens documentation. This means: Modern JavaScript features like const/let, arrow functions, template literals, classes, and promises are available.

Aspect	WinCC Basic/Comfort	WinCC Unified
Scripting	VBScript (proprietary)	JavaScript (ES6 via V8)
Rendering	Proprietary engine	HTML5 + SVG
Runtime	Windows service	WebRH (Web Runtime Host)
Debugging	TIA Portal integrated	Chrome DevTools (Port 9222)
Architecture	Monolithic	Client-Server (WebSockets)

The runtime architecture is based on a Node.js-like backend (WebRH) that communicates with the browser frontend via WebSockets. This is revolutionary for the shop floor: Asynchronous operations no longer block the UI.

1.2.Availability and Version History

TIA Portal	Year	Key Features
V16	2019/2020	Initial release, PC-based systems
V17	2021	Unified Comfort Panels, View of Things
V18	2022	Nested faceplates, PLCUDT support
V19	2023	Expression dynamization, redundancy preview
V20	2024	Full data redundancy, MTP integrator, 20-40% faster compilation

2.Synergies: Web Skills Accelerate HMI Engineering

2.1.JavaScript: Same Syntax, Different APIs

The syntax is identical - but the APIs differ. An important example:

// React/Web: Standard JavaScript
console.log('Motor started');
setTimeout(() => { /* ... */ }, 1000);

// WinCC Unified: Siemens-specific APIs
HMIRuntime.Trace('Motor started');
HMIRuntime.Timers.SetTimeout(() => { /* ... */ }, 1000);

Available ES6 features in WinCC Unified:

• const and let (block-scoped variables)
• Template literals with backticks
• Arrow functions
• Classes and inheritance
• Promises and async/await
• Array methods (map, filter, reduce)

Important API differences:

Web/React	WinCC Unified	Function
console.log()	HMIRuntime.Trace()	Debug output
setTimeout()	HMIRuntime.Timers.SetTimeout()	Timer
DOM manipulation	Screen.Items()	UI access
useState	Tags.Read()/Tags.Write()	State management

2.2.Faceplates vs. React Components

The faceplate concept in WinCC Unified conceptually corresponds to React components:

React Component:

interface MotorStatusProps {
  name: string;
  isRunning: boolean;
  rpm: number;
}

function MotorStatus({ name, isRunning, rpm }: MotorStatusProps) {
  return (
    <div className={isRunning ? 'running' : 'stopped'}>
      <h3>{name}</h3>
      <span>{rpm} RPM</span>
    </div>
  );
}

WinCC Unified Faceplate (Script):

// Instantiate faceplate via script
let data = {
  MotorName: { Tag: "Motor1.Name" },
  Speed: { Tag: "Motor1.Speed" },
  Running: { Tag: "Motor1.Running" }
};

let popup = UI.OpenFaceplateInPopup("fpMotor", "Motor 1", data);
popup.Left = 100;
popup.Top = 150;
popup.Visible = true;

WinCC Faceplate	React Equivalent
Tag Interface	Props for data binding
Property Interface	Props for configuration
Event Interface	Callback props
Library Types	npm packages

2.3.State Management: Tags vs. useState

WinCC Unified uses Tags as the central state concept - comparable to React state, but with industry-specific trigger mechanisms:

WinCC Unified	React Equivalent
Internal Tag	useState
Tag with Trigger	useState + useEffect
TagSet	useReducer
Session DataSet	React Context

Three trigger types for tag changes:

1. Cyclic Triggers - Time-controlled (like setInterval)
2. Tag Triggers - On value change (like useEffect with dependencies)
3. Event Triggers - On user interaction

// Performance-optimized: TagSet for multiple tags
let ts = Tags.CreateTagSet(["Motor1.Speed", "Motor1.Temp", "Motor1.Status"]);
ts.Read();  // Read all in one call
// ... process values ...
ts.Write(); // Write all in one call

2.4.Event System: Familiar Patterns

Web/React	WinCC Unified
onClick	Click left mouse button
onMouseDown/onMouseUp	Press/Release
Touch events	Tapped, Gesture detected
onFocus/onBlur	Focus change
useEffect([], [])	Loaded

3.Custom Web Controls: The React Bridge

Custom Web Controls (CWC) are the most direct way to integrate React into WinCC Unified. A CWC is essentially a Single Page Application running in an isolated container within the runtime.

3.1.CWC Architecture

MyCWC/
├── manifest.json    # Interface definition
├── index.html       # Entry point
├── bundle.js        # Compiled React code
└── assets/          # Images, CSS

The manifest.json defines the contract between CWC and WinCC Runtime:

{
  "name": "MyReactGauge",
  "properties": [
    { "name": "Speed", "type": "number" },
    { "name": "MaxSpeed", "type": "number" }
  ],
  "events": [
    { "name": "OnOverSpeed" }
  ]
}

3.2.Data Flow Between React and WinCC

1. PLC variable changes → WinCC Runtime detects change
2. Runtime pushes value → CWC receives new props
3. React renders → Virtual DOM diff, UI update
4. User interacts → React emits event
5. WinCC reacts → Script writes PLC variable

Successfully used libraries (Siemens examples):

• Gauge.js for gauge displays
• ApexCharts.js for diagrams
• Any npm packages (client-side)

4.Practical Limitations

4.1.No Direct DOM Access

In standard screens there is no direct DOM access like in the web. Instead, you use the proprietary object model:

// Web: DOM access
document.getElementById('motor').style.backgroundColor = 'green';

// WinCC Unified: Object model
Screen.Items('Motor').BackColor = 0xFF00FF00; // ARGB hex format

CSS syntax is only available in Custom Web Controls - in standard screens, styling is done via properties.

4.2.Single-Threaded Architecture

WinCC Unified scripts run in two Node.js processes - one for screen scripts, one for the task scheduler. Both are single-threaded:

• All screen scripts share one CPU core
• Long-running calculations block other scripts
• Asynchronous patterns (async/await) are therefore critically important

4.3.TypeScript: External Only

TypeScript is not natively supported in TIA Portal. The recommended workflow:

1. Develop in VS Code with TypeScript
2. Use ESLint for Siemens-specific rules
3. Copy code to TIA Portal

Siemens provides a VS Code Development Guide (SIOS 109801600).

5.Debugging with Chrome DevTools

One of the most powerful features: Remote debugging via Chrome DevTools.

5.1.Setup

1. Activate script debugger in SIMATIC Runtime Manager
2. Open Chrome: chrome://inspect
3. Connect to port 9222 of the HMI runtime

5.2.What Works

Feature	Status
Setting breakpoints	✅
Step-through debugging	✅
Variable inspection	✅
Console (HMIRuntime.Trace)	✅
Sources tab	✅ (current screen only)
Network tab	✅
Saving changes	❌ (must be done in TIA Portal)

This far exceeds the "printf debugging" of older HMI systems and enables diagnosis of complex logic errors and race conditions.

6.Outlook: Web Dashboards as a Complement

For higher-level visualizations, an architecture combining WinCC Unified with real web dashboards offers itself:

[S7-1500 PLC] ⟷ [OPC UA / Open Pipe] ⟷ [Node.js Backend] ⟷ [Next.js Dashboard]

The Open Pipe interface in WinCC Unified enables communication with external applications - Python for AI/ML, Node.js for complex database interactions, or custom hardware without PLC drivers.

7.Conclusion: Transfer Knowledge as Competitive Advantage

With WinCC Unified, Siemens has built a real bridge between OT and IT in modern SCADA systems:

• Google V8 Engine with ES6 JavaScript - familiar syntax for web developers
• Faceplates follow the component pattern from React
• Custom Web Controls enable direct React integration
• Chrome DevTools for professional debugging
• Open Pipe for AI/ML integration and external applications

Automation engineers with web skills have a clear advantage - they understand the underlying patterns and can apply modern development practices.

Further Resources:

• Tips and Tricks for Scripting (SIOS 109758536)
• Programming Custom Web Controls (SIOS 109779176)
• VS Code Development Guide (SIOS 109801600)
• GitHub: CWC-in-WinCC-Unified

Planning an HMI project with WinCC Unified or want to develop Custom Web Controls? I bring experience from both worlds - automation technology and web development. Let's talk.