React HMI Development with WinCC Unified: A Practical Guide

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.

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

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:

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;

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:

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

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

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 - supporting clients in Luxembourg, Saarland, the Trier region and in Switzerland. Let's talk.