WebUI Runtime

Core principles

Modern Web -- Built entirely on standard web technologies: JavaScript, TypeScript, Web Components, and modern browser APIs. No proprietary plugins, no legacy frameworks. The same tools and skills used across the web industry apply directly to WinCC OA application development.

OT-Grade Reliability -- Designed for operational technology environments where uptime matters. Includes authenticated connections, automatic server failover, session management, and a Shared Worker architecture that minimizes resource usage.

AI-Ready Engineering -- The standard web technology stack means AI coding assistants can generate, modify, and debug application code effectively. Developers use AI tools to accelerate development without specialized training in proprietary frameworks.

Openness -- The runtime is framework-agnostic at its core. The Shell layer works with any frontend framework. The API integrates into existing web applications. Custom services extend the backend.

These are not separate things. They meet in the WebUI Runtime.

ETM Charging

A consumer-grade EV charging portal with two distinct user roles across six screens -- vehicle drivers see a personalized dashboard with live SoC, session history, and sustainability KPIs across four domains (sessions, energy, cost, CO₂), while site administrators monitor parking lot utilization and per-vehicle statistics. The dark neon-green aesthetic demonstrates that OT software can look and feel like a premium mobile app.

• Parking lot overview — live map of 5 charging rows (R1–R5), spot-by-spot status, utilization %, active sessions & current load in kW
• Personalized driver dashboard — greeting with vehicle ID, lifetime kWh, cost, CO₂ avoided, real-time SoC bar with estimated finish time
• Trend & History tabs — time-series charts for power & energy, full session log with CSV export
• Compare view — this month vs. last month across 5 KPIs (sessions, energy, cost, CO₂, charge time) with delta indicators
• Admin vehicle picker — switch between any vehicle on the site to inspect its individual statistics
• Dual-login model — sign-in and create-account flows, native WinCC OA authentication exposed as a slick web UI

The same application on a mobile device -- the WebUI Runtime provides fully responsive design that adapts seamlessly across screen sizes.

Built in ONE week. By a web-native. With AI. On the WebUI Runtime.

NeoVaris Smart City

An entire fictional smart city monitored across four infrastructure domains simultaneously -- energy, water, traffic, and lighting. Nine navigation tabs lead through live headline KPIs, an interactive GIS map with color-coded sensor icons, a full alarm management screen with 23 active alarms, historical trend views, and system diagnosis pages. For a detailed walkthrough, see Example: Smart City Dashboard.

• City dashboard — 4 headline KPIs: Grid Load (51 MW), Reservoir (98%), Congestion (16.1%), Active Lamps (11,704) — all live with trend arrows
• Interactive GIS city map — color-coded sensor icons by category (energy / water / traffic / lighting), click to inspect any asset (e.g. Solar Farm Alpha: 41 kW)
• Full alarm management screen — 23 active alarms, filterable by Open / Acknowledged / Acknowledged pending, bulk-acknowledge action
• Trend View — historical time-series across all sensor categories
• System Dashboard — server health, WinCC OA version, CPU/RAM/disk performance, security certificates, license validity
• System Diagnosis — live connection status, browser compatibility, memory & disk gauges, service worker state

Built in ONE day. Not within weeks. From an idea. With AI. On the WebUI Runtime.

Infrastructure Orchestrator

A global fleet management application that monitors over 230 distributed WinCC OA installations and more than 33,000 live datapoints worldwide. The interface provides seamless drill-down across four zoom levels -- from a world map through country and city level down to individual street addresses. A hierarchical asset tree, per-device health gauges, and live status overlays give operators full visibility across the entire deployment landscape. The application is available as the @wincc-oa/ae-central-asset-management package.

• World map overview — all 237 devices shown on a live map spanning Europe, Asia & beyond, with color-coded status icons (green / yellow / orange / red)
• Country drill-down — filter by country (e.g. Germany, India) to see only regional installations and their health
• City & street-level zoom — seamlessly zoom from continental view to a single street in Munich or Paris, device icons remain accurate
• Right-side status panel — per-asset gauge widgets showing real-time health scores with color-coded severity dials
• Hierarchical asset tree — left panel with country → city → individual device navigation; filtered list updates the map in real time
• Asset detail popup — click any device to view name, connection state, and trigger actions (e.g. inline package deployment)

Built in a weekend. Not by a UI team. From a designer. With AI. On the WebUI Runtime.

Data Center BMS

A full-scale Building Management System for a multi-hall data center campus with over 12 navigation sections. Every layer of the facility is covered -- from a 3D aerial site view down to individual chiller circuits with eight live gauge widgets, floor plan P&IDs with live sensor values, six fire suppression zones, and six gas suppression panels. Severity-coded alarm management with inline acknowledgment completes the operator experience.

• 3D campus overview — interactive aerial model of all halls (A1–A6 + Big Hall) with live status overlays and color-coded alarm states
• Chiller Plant Management — 8 industrial-style gauge widgets showing live chiller temperatures (~24–26 °C), power trend charts, and pressure bar charts
• Floor plan P&ID — ground-floor HVAC schematic with live sensor values directly on the drawing (Part A / Part B)
• Fire suppression system — 6 zones each showing Bereit / Druckluft / Toggierung status, alarm-aware coloring
• Gas suppression zones — parallel 6-zone panel with the same safety-grade status readout
• System-level alarm management — severity-coded list (critical/alarm/warning), multiple sources (BMS, CTMS, fire), inline acknowledge workflow

Same Runtime. Different UIs.

Getting started

We are not introducing another UI. We are introducing a new foundation how industrial applications are built.

Not in months. Not next quarter. Today.

The WebUI Runtime is available now. For setup instructions, see Requirements and Installation. For a step-by-step example, see Example: Smart City Dashboard. For AI-assisted development workflows, see AI-assisted page creation.