Design Systems

Mateu separates UI definition (your Java backend) from UI rendering (the frontend). You choose which design system renders your UI by adding a single Maven dependency.

All renderers consume the same Mateu API, so you can switch or support multiple renderers without changing your Java code.

Web or native?

Each renderer family serves a different goal. The same @UI backend can drive all of them at once, so you pick per deployment — or offer several.

• Web renderers (with multiple design systems) — best when you want a zero-install UI delivered through the browser, and when you need to drop Mateu into an application you already have without breaking its UX. Choose the design system that matches the host application — Vaadin, SAP Fiori, Oracle Redwood, Red Hat PatternFly, Salesforce SLDS — and the Mateu screens blend in seamlessly.
• Native renderers — best when you want better performance and an OS-native feel. The desktop (IntelliJ plugin) renderer runs your app inside IntelliJ IDEA and gives power users the IDE’s productivity workspace — docking, split editor tabs, Search Everywhere, keyboard-first navigation. The mobile (React Native) renderer ships your app to iOS and Android.

You don’t have to pick just one: the identical backend can serve a web UI, a native desktop app, and a mobile app simultaneously.

Available renderers

Renderer	Design system	Dependency
Vaadin	Vaadin Lumo	vaadin-lit
Red Hat	Red Hat PatternFly	redhat-lit
SAP Fiori	SAP Fiori / UI5	sapui5-lit
Oracle Redwood	Oracle Redwood	redwood-lit
Salesforce SLDS	Salesforce Lightning (SLDS 2)	slds-lit

How to switch renderer

Replace the renderer dependency in your pom.xml. For example, to switch from Vaadin to Red Hat:

<!-- remove -->
<dependency>
    <groupId>io.mateu</groupId>
    <artifactId>vaadin-lit</artifactId>
    <version>3.0-alpha.231</version>
</dependency>

<!-- add -->
<dependency>
    <groupId>io.mateu</groupId>
    <artifactId>redhat-lit</artifactId>
    <version>3.0-alpha.231</version>
</dependency>

No Java code changes are needed.

Embedding in existing UIs

Because each renderer is a web component, you can embed a Mateu UI inside any existing application — including React, Vue, Angular, or plain HTML pages — regardless of which design system that application uses.

A Vaadin-rendered Mateu component can be embedded in an Oracle JET application. An SAP Fiori renderer can be dropped into any HTML page.

See Embedded UI for details.

Native renderers

Beyond the browser, Mateu also supports native renderers for desktop and mobile:

Renderer	Platform	Technology
Desktop (IntelliJ plugin)	Windows, macOS, Linux (inside IntelliJ IDEA)	IntelliJ platform / Swing
Mobile (React Native)	iOS, Android	Expo / React Native

Both native renderers consume the same Mateu API as the web renderers. The same backend serves web, desktop, and mobile clients simultaneously with no code changes.

See Native Renderers for details.

Bring your own

If none of the available renderers fit, you can build your own frontend that consumes the Mateu API. See Bring your own design system.