Develop productive and efficient HMIs with web technology

In industrial software development, time, maintainability, scalability, and technological connectivity are critical factors. Anyone developing HMIs for machines, systems, or entire product lines today needs tools that offer more than conventional visualization systems. A well-designed stack that makes developers more productive is crucial—from the initial idea to the production-ready application.

HELIO addresses the issues that cause many developers to lose time in traditional HMI projects:

• Complex toolchains
• Lack of reusability
• High testing and maintenance costs
• Fragmented code bases
• Insufficient standardization

Instead, HELIO offers an integrated, web-based platform for HMI development:

• Graphical IDE with live preview: Build the interface, connect the data, and see what happens immediately
• Modular architecture: Reuse components instead of rebuilding everything from scratch
• Interactivity without programming: Typical interaction patterns can be applied directly using a graphical editor.
• Full control via SDK: A powerful TypeScript-based SDK is available for custom-developed components
• Responsive UI without effort: Every HMI built with HELIO runs immediately on other HMI panel sizes, on desktops, and on smart devices

Web technology is no longer an experiment in industry today – it is the standard. HELIO uses web technology, but with a focus on industrial requirements. For us, this means:

• JavaScript/TypeScript with React: For fast, modular UI development
• Rust & WebAssembly: For performance, security, and system proximity
• OPC UA & MQTT out of the box: For standard-compliant data connectivity
• Testability & documentation: Clearly structured and automated

What does that mean exactly? Developers can use modern tools, like the ones they know from web development, right in an industrial setting — no detours or workarounds needed.

With JavaScript, React, and Rust, HELIO relies on a stable, open foundation:

DevOps is now a key success factor in software development because it helps to implement changes more quickly, more reliably, and with less effort in ongoing operations. HELIO supports DevOps approaches through

• structured, modular projects
• repository connection
• versioning
• Change tracking, undo/redo
• Live preview & component-based UI design
• CI/CD-compatible development structure (especially when using SDK)
• Automated testing
• Reusability and central maintenance, which can be automated across multiple projects

An often underestimated factor in web development: the learning curve. For career changers, this often means weeks of intensive training before they can start working productively. HELIO drastically reduces this effort:

• Intuitive interface & clear concepts
• Ready-to-use templates & controls
• Documented interfaces, many examples
• Free demo & short support channels

Getting started and using the software is intuitive – regardless of your technical background. Well-thought-out concepts, preconfigured templates, and clearly structured, comprehensive, and illustrative documentation ensure a steep learning curve. For specific requirements, a direct line to the development team provides pragmatic solutions.

HELIO's short training period is proving effective: developers quickly find their feet, projects get off the ground quickly, and even complex setups can be implemented efficiently. To ensure that this remains the case, HELIO offers support that works on an equal footing: no call center, but direct, competent email support with fast response times – directly from the HELIO development team.

This is complemented by detailed, constantly updated online documentation at docs.helio-hmi.com, which offers everything you need for your daily work, from API references and integration examples to practical instructions.

In conjunction with consistent DevOps approaches, live preview, and central component management, this not only reduces the effort involved, but also creates a development process that impresses with its clarity, speed, and practicality.

HELIO was developed from the ground up for industrial applications – flexible, connectable, and scalable. The platform addresses many of the requirements that have to be laboriously solved in traditional projects:

• Platform-independent runtime: HELIO HMIs run in any modern browser – whether on Windows, Linux, embedded panels, or industrial tablets.
• Open interfaces: OPC UA and MQTT are natively integrated. Additional protocols can be added individually via the data layer architecture.
• Central design system: Consistency, reusability, and adaptability are not add-ons, but an integral part of the development environment.
• SDK: Configurable UI logic for standard applications – with the option of implementing complex requirements granularly via JavaScript/TypeScript.
• Scalable licensing: HELIO adapts to the size of the project – from individual solutions to production-wide platforms in corporate structures.

HELIO is not just a tool for HMI creation, but a platform designed for long-term scalability – both technologically and organizationally. The goal is to create solutions that will remain maintainable, expandable, and usable across teams for years to come.

Key principles supported by HELIO:

• Start small, scale big: With HELIO, an initial prototype can be implemented quickly – once successfully validated, it can be easily transferred to other products, lines, or plants.
• Design system included: The integrated component library enables visually consistent HMIs with reduced maintenance effort and clear recognizability across different applications.
• Documentable development logic: Visual editors, traceable properties, and structured project logic keep knowledge team-ready – even in the event of personnel changes or external implementation.
• High bus factor due to low barriers to entry: Thanks to its intuitive UI editor, integrated live preview, and clear structure, HELIO is quick to understand and use, even for new team members.
• No-code with technical security: HELIO combines declarative no-code mechanisms with a powerful SDK – for example, through dynamic properties that enable complex behavior without destabilizing the overall system with error-prone scripts.

HELIO offers a no-code approach that significantly simplifies repetitive tasks and UI logic—without compromising the flexibility or control of traditional development. Instead of complex scripts or confusing logic paths, Dynamic Properties enable a clear, declarative definition of behavior directly on components. This allows, for example, states, visibilities, or data bindings to be controlled flexibly – type-safe, traceable, and documented. This reduces sources of error, increases reusability, and preserves the architectural integrity of the system – even in large projects.

HMI projects require tools that do not slow down the development process, but rather structure it in a meaningful way. Tools that seamlessly integrate UI design and data connectivity – and grow with the project scope, team structures, and technical requirements.

☑ Modern web technology

☑ Development-friendly tools

☑ Industry-grade performance

☑ Open standards

☑ Short paths and strong support

HELIO – UI platform based on modern web technology
Overview of technologies used and system requirements.
helio-hmi.com/en/facts

HELIO and open web standards
Web technology: Independent & future-proof
helio-hmi.com/en/features

HELIO architecture & tech stack (React, TypeScript, Rust)
Background information on the technological basis of HELIO and how it ensures long-term maintainability.
docs.helio-hmi.com/docs/getting-started/quick-tour

OPC UA Integration
Natively integrated interface for real-time communication with machines – flexible and standards-compliant.
docs.helio-hmi.com/docs/reference/data-layer/data-source-types/plc-connection/opc-ua-connection

Dynamic Properties

What are dynamic properties?
docs.helio-hmi.com/docs/getting-started/basics/dynamic-properties

All available types of dynamic properties
docs.helio-hmi.com/docs/reference/dynamic-properties

Live Preview & Component Model
Web-based development environment for quick preview and iteration.
docs.helio-hmi.com/docs/getting-started/build-your-first-hmi/preview-hmi

FAQ Fridays #4
Explanation of the browser-based runtime environment.
FAQ Fridays #4 – Why do HELIO HMIs run in a browser?

FAQ Fridays #5
Explanation of responsive design in HELIO.
FAQ Fridays #5 – What does “truly responsive” mean?

All HELIO videos
Overview of all available video tutorials.
Product tutorials & webinars

Request a demo and get started right away.

→ Free HELIO demo