Define the UI
There are three ways to author a Mateu UI. They sit at the same level: none is the “real” one and the others a shortcut, because all of them produce the same model.
What you author is the same set of building blocks either way: a mount, an app shell, routes, pages, partials, actions, data sources, state and triggers, field types, translations, environments, access rules and project settings. Only the syntax changes.
| Path | You write | Good for |
|---|---|---|
| YAML + visual editor | YAML files under specs/ui/, by hand or with the visual editor | screens over APIs that already exist; teams without a backend of their own; static deployments |
| Code — Java, C#, Python | annotated classes (and a fluent API for full control) | screens with server-side logic, validation and data access; teams that want the UI next to the domain code |
| Both | layout in YAML, behaviour in code | screens designed visually but backed by real logic |
YAML + visual editor (no code)
Section titled “YAML + visual editor (no code)”A UI made only of data: a mount, a route registry, an app shell, pages and a catalogue of the REST endpoints they use. Every file has a published JSON Schema, so your editor validates and completes it; the visual editor in IntelliJ and VS Code edits the same files on a canvas.
- Quickstart — a running app with no UI code.
- Pages in YAML, App shell as data, Partials.
- The visual editor and IDE tooling.
- Permissions, Translations, Project settings.
- Shared with code: routes, data sources, actions, state and triggers.
Code: Java, C#, Python
Section titled “Code: Java, C#, Python”Annotate a class and Mateu derives the screen from its fields and methods: a record becomes a form and a listing, a method becomes a button, bean validation becomes client- and server-side validation. When the defaults are not enough, a fluent component API gives full control.
- Java — the most complete implementation; runs on Spring Boot MVC and WebFlux, Quarkus, Micronaut and Helidon MP. Start at the Java quickstart. Kotlin uses the same annotations.
- C# — ASP.NET Core. See C#.
- Python — FastAPI and Pydantic. See Python.
The Language Rosetta maps each idiom across the three, and the parity matrix shows what each server supports today.
A route can bind a YAML layout to a code view model: the file decides what the screen looks like, the class supplies state, actions and validation. See Mixing YAML and code.
With design tools and AI
Section titled “With design tools and AI”- From Figma — design with the Mateu component library, generate the implementation.
- AI assistants and prompt-to-app — an AI writes the model as data and the schemas check it mechanically.