Mendix overview What is Mendix Why Mendix Mendix + AI Intelligence Center X Studio Pro AI Studio Graph Studio Upgrade to 11 LTS
Solutions overview BFSI+ Mendix + Teamcenter (PLM) Industrial automation
AIDE Pro
Playbooks Blog & Long Reads Downloads Video Library Explore All LinkedIn Newsletter ↗
About Us Our Approach
Services Contact
Talk to an expert
Long Read

Mendix 11 UI: the React Client, Atlas 4, Widgets, and Mobile

In short

The Mendix 11 front end: the default React client and Atlas 4, the iframe-free Embedded Client, upgraded Data Grid 2 and Gallery, new widgets and primitive page parameters - plus PWA-first mobile with offline-first data at GA.

Mendix 11 rebuilds the front end around the React client and the refreshed Atlas 4 design system, giving you a modernized theming foundation, a fuller set of data and input widgets, more flexible page parameters, and a richer client API for the widgets you build yourself. A standout is the ability to run a Mendix app inside other web applications entirely, without an iframe.

Atlas 4 and the design system

Atlas 4 is the design-system foundation of the release. It provides modernized page templates, building blocks, and sidebar layouts with full flex support in design properties, page- and layout-level form orientation and label-width controls, and expanded layout-grid spacing and card styling. A comprehensive color shade system for brand colors, together with CSS variables, enables runtime customization and white-labeling, and design properties can carry an optional category field so they group cleanly in the styling pane.

  • Siemens UI Module – Siemens design and accessibility patterns for enterprise applications are published to the public Marketplace, ready to drop into your app.

The React client and the Embedded Client

The Embedded Client lets you mount a Mendix app as a web component inside any host application – no iframe required. It runs inside React, Vue, or plain-JS hosts using Shadow DOM style isolation, keeps full Atlas styling, and receives page parameters from the host at mount time. You set it up through a dedicated Embedded navigation profile (App > Navigation > Add profile > Embedded). This capability is in public beta and currently supports anonymous users only, with authenticated sessions planned.

All applications run on React 19, delivering better runtime performance and smarter hooks for widget building. Around the React client, Studio Pro gives you tooling to keep pages compatible and lean:

  • Unsupported widgets are hidden from the toolbox when the React client is enabled, so you are far less likely to place a widget the client cannot render.
  • A quick fix locates select-page usages configured on an association widget, making it easy to trace where a selection page is referenced.
  • Incompatible React client widgets now emit errors instead of failing silently when nested inside pluggable widgets.
  • Mx Model Reflection is React-ready – legacy selection pages were removed so the module works with the React client with no workarounds or customizations.
  • Smaller page exports – page exports for the React and Native clients are optimized to cut exported page size by up to 35%, producing a considerably smaller bundle. Widgets hidden by conditional visibility are excluded from exported pages, keeping the output aligned with what actually renders.

Data Grid 2 and Gallery

Data Grid 2 handles large, paged datasets reliably. Item selections persist as users move between pages, and a banner on the header checkbox lets you select an entire filtered dataset rather than only the visible page. That full selection can be passed to nanoflows or microflows to drive batch actions across large datasets.

Data Grid 2 also gives you full control over paging and initial state. Pagination is fully customizable through bindable properties for the current page, total rows, and page size, so you can build bespoke navigation instead of relying on the built-in pager. The grid can automatically highlight the first row on load, which is ideal for master-detail interfaces where a detail pane should populate immediately.

The Gallery widget is at feature parity with Data Grid 2, with custom pagination control, dynamic page sizing, auto-select-first-item, and an auto-refresh timer that periodically pulls fresh data without a manual reload.

  • Reference-set column conversion – data grid columns configured over reference sets can be converted, smoothing the path when modernizing older grids.

Widgets

Several widgets are new or rebuilt for the React client. The Check Box / Radio Selector adapts automatically – rendering as radio buttons for single selection and checkboxes for multiple selection – and works with context entities, database queries, or static values as its data source, with full accessibility support and custom content options. The Barcode Generator produces QR codes and barcodes (QR, CODE128, EAN13, UPC, CODE39) directly in your app, with styling controls for dimensions and colors, for uses such as product serial numbers, inventory codes, and customer IDs. The Tree Node widget renders recursive hierarchies of unknown depth from a parent association – no static level definition needed – for org charts, category trees, and file structures.

Other widgets gained meaningful capabilities or were modernized:

  • Combo Box on-change filter input – an event that fires while the user types, with configurable debounce, enabling dynamic filtering, custom search-as-you-type experiences, behavior logging, and real-time validation.
  • Rich Text image from entity – the Rich Text widget can upload and use images stored in an entity, giving performance benefits for image-heavy content.
  • Calendar – a React-compatible redesign with customizable hour displays, adjustable week start and end days, dynamic height, and support for 20+ items per day.
  • Signature – rebuilt for the React client while keeping canvas signatures, pen color and size customization, and clear functionality, storing images via the Image widget.
  • Tab Container On Change – the action no longer requires an attribute and fires whenever the tab changes.
  • Date Picker – shows its placeholder (or the date format when the placeholder is empty) even in read-only state.
  • Reference Selector – the drop-down no longer reopens automatically after it is closed.

Pages, navigation, and parameters

Pages accept primitive parameters – String, Boolean, and other simple types – rather than only entity objects. You can pass primitive values with expressions (including following associations when opening pages) and mark parameters optional with default-value expressions, removing the need to create throwaway entity objects just to pass a simple value. Primitive page parameters can also appear directly in page URLs, using the same syntax as microflow URLs, with special characters properly encoded.

Link buttons and navigation items that point to a Mendix page render a real href. Even in a single-page application, this lets users open a page in a new browser tab or copy its link for later, using standard browser actions.

  • Generate overview pages from a Page Template – choose a template when generating overview pages so administration pages match your design system from the moment they are created.
  • Autofocus page setting – configure autofocus behavior per page with three options: Off, Desktop only, and All platforms.
  • Page Template select-pages option – the “shown when generating select pages” option is hidden when editing a template for a React-client app, since it does not apply there.
  • Duplicate navigation profiles – duplicate responsive navigation profiles can now be removed.
  • Editor refinements – a right-click option extracts layout-grid rows into new grids, object-list grid resizing in pluggable widget properties is improved, the app explorer gives better focus-loss feedback, and the console panel distinguishes error and critical log levels more clearly.
  • Single-step progress dialog – when a progress dialog has only one step, only the progress bar is shown rather than step details.

Client and pluggable-widget APIs

The client API gives widget builders more to work with. The session and parser APIs are available in pluggable widgets, along with the legacy formatValue and parseValue methods. Pluggable widgets can bind to any file or image entity on the page rather than only the immediate data view, and when you update a widget, Studio Pro tries to preserve the values of properties whose type changed between versions – reducing rework after upgrades.

File and upload handling is aligned with the React client’s async model. The client file functions – mx.ui.downloadFile, mx.data.getFileUrl, and getFileUrl in mx-api/data – are asynchronous. A new allowUpload flag on file and image properties brings upload capabilities to progressive web apps, backed by new EditableFileValue and EditableImageValue types; the flag defaults to off for backward compatibility.

  • reloadApp – a new function in mx-api/ui reloads the app, with an optional withState parameter to preserve application state (not supported on native mobile).
  • Logout reloadOnSuccess – the client logout API accepts an optional params object; it auto-reloads on success by default, and {reloadOnSuccess: false} disables that.
  • Data#get() by path – documentation includes a get-by-path example, and the entity parameter is optional for offline apps.
  • Empty values are null – the client represents empty values as null rather than an empty string, affecting MxObject#get and MxObject#set; custom widgets and client code that assumed empty strings should be reviewed.

Widget bundling and model stability were hardened as well: source maps for pluggable widgets are included correctly even when bundle optimization is off, widgets with unbounded dynamic imports are marked external to avoid bundling errors, undo of widget updates that could corrupt the model is prevented, and conditional-editability expressions in nested snippet calls resolve to the correct variables.

Mobile. Mendix 11 reshapes mobile development around a simpler default while keeping a fully modernized native runtime, and it closes most of the historical gaps in offline-first apps so complex data models work the same whether users are connected or not.

Building and distributing mobile apps

The PWA Wrapper is the new default for Mendix mobile development. It packages a Progressive Web App as a native iOS and Android application that can be distributed through the App Store and Google Play, with no native code to build or manage. It exposes a curated set of native device capabilities such as location and camera, and Mendix positions it as covering roughly 90% of typical mobile requirements. It is available on the Marketplace and is compatible with recent Mendix versions from 10.24 onward.

Native mobile runs on React Native’s new architecture for teams that need deeper device integration than the wrapper provides. The runtime uses React Native 0.84 with React 19, which removes the legacy JavaScript-native bridge for faster startup, quicker iOS builds, improved rendering, and a smaller app footprint, alongside updated push notification, splash screen, image caching, and animation libraries. The developer experience improves too, with faster Hot Module Replacement, clearer error messages, and React DevTools 5. Because the new architecture is now required, custom React Native modules, custom widgets, and JavaScript actions must be verified compatible with React Native 0.84 and React 19, and a fresh app build is needed – most custom widgets and JavaScript actions work without changes, but testing is recommended. Mendix also advises updating native apps annually to stay current.

  • Native builds are available across license types, including customers on the Pay-per-Menu-Path (PMP) licensing model.
  • The Make It Native testing app supports the two most recent LTS/MTS versions in parallel (for example 11.12, 11.6, and 10.24), available through TestFlight Previous Builds.
  • Editable file and image support on native – setting allowUpload to true on a file or image property gives native widgets the editable file and image API.

Offline-first data and synchronization

Offline apps can access online data, and the data model that works offline is now close to what works online. Accessing online data from offline-first apps is generally available: new offline-first entities default to Online Synchronization mode for better data merging, online entities can reference offline entities under relaxed restrictions, and many-to-many (reference set) associations are fully supported offline. A large batch of former limitations has been removed for pages using offline-based navigation profiles, so offline now supports entity constraints in custom widgets, list views with templates, grids with search bars, multi-step entity paths, edit buttons with pages for specializations, list views with numeric search fields, non-pluggable widgets set to online sync mode, delete actions with non-persistable entities, additional data source types, and “Constrained by” functionality. One deliberate guardrail remains: entities with AutoNumber or Calculated attributes can be used in offline pages but cannot be instantiated offline, because their values cannot be determined without a server.

Synchronization gives developers more control and clearer error handling. A Cancel synchronization nanoflow activity lets users stop an active sync, which helps in slow-network scenarios, and syncing large datasets with many associations is significantly faster. When the option to throw an error on server-rejected objects is enabled, synchronization raises a catchable PartialSynchronizationError that nanoflow developers can handle in try/catch blocks.

  • Optimistic locking works with offline-first apps – offline changes synchronize without being blocked by version checks, which was previously not allowed with offline navigation profiles.
  • Strict mode is supported for both PWA and native mobile offline apps.

Offline files, storage, and the web client

Offline-first web (PWA) apps can now handle documents. The File Manager widget is enabled for offline PWAs and a Download File action is available in nanoflows, closing a long-standing gap for offline document handling. Under the hood, the offline PWA database uses OPFS storage for better synchronization and SQL query performance, and file data is stored in persistent mode so it is not evicted under low disk space or infrequent use, subject to browser-dependent storage quotas.

  • A service worker skipWaiting client API (from mx-api/pwa) activates a waiting service worker without waiting for all tabs to close, which is useful for pushing app version updates.

Accessibility and platform polish

  • External keyboard navigation traverses accessible elements correctly on mobile devices.
  • Custom-styled widgets inside containers render with their intended styling on iOS.

Frequently asked questions

What is the Embedded Client in Mendix 11?
The Embedded Client lets you mount a Mendix app as a web component inside any host application without an iframe. It runs inside React, Vue, or plain-JS hosts using Shadow DOM style isolation, keeps full Atlas styling, and receives page parameters from the host at mount time. It is in public beta and currently supports anonymous users only, with authenticated sessions planned.
Which React version does the Mendix 11 client run on?
All applications run on React 19, which delivers better runtime performance and smarter hooks for widget building. Native mobile also uses React 19, on React Native 0.84.
Can pages now accept primitive parameters instead of entity objects?
Yes. Pages accept primitive parameters such as String and Boolean rather than only entity objects, you can pass values with expressions and mark parameters optional with default-value expressions, and primitive page parameters can appear directly in page URLs. This removes the need to create throwaway entity objects just to pass a simple value.
What is the new default for building mobile apps in Mendix 11?
The PWA Wrapper is the new default. It packages a Progressive Web App as a native iOS and Android application distributable through the App Store and Google Play with no native code to manage, exposes curated native capabilities such as location and camera, and Mendix positions it as covering roughly 90% of typical mobile requirements.

Have a project like this?

Tell us what you're building - we'll be straight about whether and how we can help.