Build a Responsive Web App

Last modified: January 28, 2026

Introduction

This guide aims to get you started with the Mendix Platform and walks you through the steps on how to develop your first app using the Studio Pro IDE (integrated development environment). You will build a web app to store employee data. While Mendix can be used to create much more complex applications, we're starting with a simple use case to help you get comfortable with Studio Pro.

By following this guide, you will:

Learn how to install and navigate Studio Pro
Explore the platform's key features
Find resources and learning materials to deepen your knowledge

Getting to Know Mendix

The Mendix Platform consists of:

Mendix Portal - A web-based interface for developers, administrators, and other stakeholders to manage the entire application lifecycle and collaborate through.
Studio Pro - A desktop IDE for developers to create, view, and edit Mendix applications.

Make sure you are using the latest version of Studio Pro when following this guide.

When you create an app in Mendix, a free app environment is automatically set up for you in the Mendix Cloud (public cloud service). You can run and test your app right away - no additional configuration or infrastructure setup is required to get started.

Prerequisites

Before you begin, complete the following steps:

Create your free Mendix Account.
Download and install Studio Pro.
Open Studio Pro and sign in with your Mendix Account details (click Go to Web Sign In):

Create the App

You can start building your first app directly in Studio Pro by clicking Create New App. Next, select Create a new app in the Mendix Portal (unless you're working offline, in which case you can only create a blank template locally).

Open a page to choose your starting point.

You can find a wide variety of Starter Apps to choose from in the Mendix Marketplace. From web and native mobile, to GenAI and augmented reality, there are dozens of platform-supported templates to start from and many more templates created by our amazing community.

Select the blank web app template, and on the next screen, click Use This Starting Point:

se the Blank web app template as a starting point

Next, a window will appear to enter a name for your app, whether or not to enable online services, as well as choose the file path for the project, and the default language for the app. Enter a name for the app and leave everything else as default:

Confirm your choice by clicking create app.

Confirm by clicking Create App.

A starter app is a ready-to-use app template that gives you a basic structure, like navigation, layout, and common components, so you don’t have to start from scratch. It helps you get up and running faster while still giving you full control to customize your app as needed.

Explore Studio Pro Interface

You should see the app open in Studio Pro, with the welcome page open. Before we continue, let's take a quick tour of the main interface:

Have a look around the Studio Pro Interface

Top Bar

The top bar includes several key elements:

The Global Navigation Menu (Bento menu), with links to the Mendix Portal
Several dropdown menus with items for fundamental app development tasks such as creating a deployment package, uploading to a version control server, and more.
Quick-access buttons to do the following:
- Publish, run locally, and view your app
- Access the Community, Marketplace, and Maia

Working Area

At the center of the screen is the working area, where you'll see the currently open document tab. It's the main space within the IDE where you design, model, and configure application components visually. Think of it as the code editor in a text-based programming IDE.

When you launch Studio Pro for the first time, you’ll see the Welcom tab. From here, you can access:

Maia Learn – learning materials to help you get started
Maia Chat – an AI-powered assistant for quick support and guidance

We recommend watching the introduction videos to get familiar with the basic concepts of Mendix development before you start building your app.

App Explorer

On the left side of the screen, you'll find the App Explorer, which shows the complete structure of your app that consists of individual files (documents) and settings that are grouped in folders and modules.

Dockable Panels

On the right and bottom of the screen are dockable panes that display context-specific information and tools. These include panes for managing data, seeing changes, and errors, accessing AI features, and more. You can customize your workspace by resizing, docking, or hiding these panes to suit your workflow. More options can be found under the View menu item.

Modules

Before you start building your app, it's essential to understand the concept of modules, which is a way to split the functionality of your Mendix application into separate parts. Learn more about modules and different module types here.

Each module has its own security and access settings, which you can configure to accommodate different users and use cases. Modules can access data, logic, and pages from other modules.

When your app is deployed locally or in a cloud environment, all modules are bundled together into a single package.

Create a Domain Model

After getting familiar with the Studio Pro interface, you can begin building your app, starting with the data model. In Mendix, the data structure of your app is defined using the domain model. Each module has a domain model that describes the data used within that module.

Domain models are comprised of entities (similar to a table in traditional SQL). Entities have attributes (similar to fields). Properties define the names of the entities. Entities can relate to each other as one-to-one, one-to-many, or many-to-many. The relations between entities are called associations. Entities can inherit their properties and attributes from other entities by creating a Generalization of an entity.

Create an Entity

To create an entity, follow these steps:

In the App Explorer (on the left), double-click Domain Model under MyFirstModule.
From the Toolbox (on the right), drag and drop the entity (blue box) into the central Working Area.
Double-click the newly added entity in the Working Area to open its properties dialog box.
Name the entity Employee:

Create Attributes

You have created a new persistable entity called Employee. This means the entity and its attributes will be stored in the Database when it is committed. Next, you have to add attributes. You only have to add fields for the employee's name, job role, and employee ID:

In the properties dialog box, click New under Attributes.
Name your attribute FirstName, leave all the other settings default, then click OK.
Repeat the steps above to create two additional string attributes, called LastName and JobRole.
Add a final attribute called EmployeeID, as an Autonumber (an automatically generated number).
Click OK to close the properties dialog box:

You can create a domain model by simply describing your application using Maia for Domain Model an AI-powered tool that generates domain models based on your input.

To use it, click Maia for Domain Model in the Working Area, then describe your application in the chat box on the right.

In our case, you can ask Maia: “Create a domain model that stores employee information: first name, last name, job role, and employee ID.”

Add an Association

An employee will be required to complete and upload important documents and contracts connected to their role. We need to adapt our domain model to store these documents. To do this, we can create a new entity, called Document, and connect it to the Employee entity using an association. Associations define how entities relate to each other. Associations can either be one-to-many, one-to-one, or many-to-many:

Add a new entity and name it Document.
Next to Generalization, click Select.
Search for FileDocument, and select it.
Click OK to confirm your choices.
Click the new Document entity to select it. Then, once it is selected, click and drag from its border towards the Employee entity. A line should appear and connect to the employee entity. This is the association, created as a one-to-many (1 employee can upload many documents):

Generalizations allow an entity to inherit properties from another. When an entity is a generalization of another, it inherits all the attributes of the original. In this case, Document is a generalization of FileDocument, which will allow it to store anything you might consider a file (this includes images, PDFs, Microsoft Office documents, and more).

Create User Interface

Now that you have created your domain model, you can develop the front-end of your application. Your page is pre-filled with some elements you can add to, edit, or delete. At the top of the page, the label Home, along with some welcome text below it, can be seen.

Add Page Element

Double click on Home_Web under MyFirstModule in App Explorer
Select the Home label and start typing to update the caption to Employee Overview.
Select the Getting Started label below, and delete it by either right-clicking it and choosing delete or by hitting the delete button on your keyboard.
Delete all other pre-populated content on the screen (select the element and hit delete on your keyboard)
Drag-and-drop a Data Grid 2 from the Toolbox (Widgets > Data containers) onto your page in the Working Area.
Double-click the data grid element to open its properties.
Under Data source, click edit, then ensure Database is selected for Type.
On the General tab, next to Entity, select the Employee entity that you’ve created and Click OK.
When Studio Pro prompts you to select the columns, leave everything selected and click Generate.
Click OK to close the properties Window:

A Data Grid is a Context Widget. To display data from the domain model using a widget, the widget needs to be within the context widget (Data view, Data grid, Template grid, and List view are examples of context widgets)

Edit Page Elements

Next, we need to modify some of the elements on the page.

On the Data Grid 2, you should have a button captioned New Employee. It will have a red notification next to it indicating there is no page connected to the button. Right-click the button and choose Generate on click page.
In the dialog window, enter a name for the new page as Employee_NewEdit.
Under Navigation layout, click the dropdown and select PopupLayout(Atlas_Core).
Select the Form Vertical layout for the page and click OK:
In the Data Grid 2, there is another button with the image of a pencil. This button needs to be connected to the same page we just created as well, so that users may edit the details of the employees. Right-click the button, choose Select on click page, then select the Employee_NewEdit page we just created.
Next, open the Employee_NewEdit page.
Add a Data grid 2 from the toolbox onto the page below the Employee ID field. Double-click it to open its properties.
Next to Data source, click Select.
Search for the Document entity (But via the page parameter “Employee”), and click select:
The new data grid 2 will have new and edit buttons, which will expect a new page to be connected. Once again, right-click either button and choose to generate page.
Name the page Document_NewEdit, select the Pop-up layout under Navigation Layout, and choose the Form Vertical template.
Click OK to confirm your choices. (Don’t forget to connect the edit button inside the Data grid to the new page as well)

Creating Application Logic

Now that we have created a basic front end for your app, we can add some logic. Let's add a microflow that will validate the employee’s details when the user clicks on save.

Starting on the Employee_NewEdit page in the App Explorer, right-click the save button at the bottom of the page and choose to edit the on-click action.
In the on-click option dropdown, select Call a Microflow.
Next to Microflow, click Select.
A window will appear, allowing you to select an existing microflow or create a new one.
Click to create a New Microflow.
Name the microflow Act_Employee_NewEdit and click OK.
In the newly created microflow, look for an orange Decision and drag it onto the flow.
Double-click the decision to open its properties.
Enter the caption as "Has Firstname?"
Under Expression, add "trim($Employee/FirstName)!= empty". This will remove any whitespace from the string and then check to ensure there are characters in the string attribute.
As the expression above results in a true and false result, we need to create a branching path from the decision - a path for each possible result. Select the decision, then from a corner click and drag away to create the new alternative path. Ensure to define which path is for the true result and the false result by right-clicking them both and under condition value choosing true and false.
On the false path, add a validation feedback action. Double click to open its properties, enter the following details, and click OK:
Variable → Employee
Member → FirstName
Template → Please enter a Firstname for the employee
Now on the true path, repeat this step for the LastName and JobRole attributes as well.

a. You can copy and paste the decision and validation feedback action to save time (But don’t forget to update the actions for each attribute)

At the end of the flow on the true path, add a commit action. Open its properties by double-clicking the action and ensure Employee is selected for Object or List, and change refresh in client to Yes. Click OK to close to window.
Add a close page action after the commit action:

Deploy App

Your app is ready to deploy! Click the green run button in the top bar menu to run your app locally (you can also hit F5 on your keyboard). Once your app is running, clicking the red Stop button will shut down your local copy of the app. These options can also be found in the console, above the console log entries.

To deploy your app to a cloud environment, you can hit publish to deploy your app to the Mendix Free cloud. The Mendix Free cloud is a free testing environment that every app has access to. The environment is automatically created the first time you publish your app, and there is no configuration required to set it up.

To deploy your app to the Mendix Cloud (Paid), there are multiple options for hosting. Please refer to this guide on our hosting options for more information on which plan is best for your project.

Finished!

Congratulations on completing and deploying your very first Mendix App! Next, head over to the Academy and get started with our Crash Course learning plan, or continue learning here in our docs pages by continuing onto part two. For videos on the latest news and updates, head to our YouTube page. Or see what our awesome community is up to on our Medium publication.

Looking to get in touch with us or the community? Join our Slack community workspace and get involved.

Studio Pro Overview – describes Studio Pro tabs, menus, and shortcut keys
Mendix Best Practices for Development – a reference for adopting consistent naming and modeling conventions while developing your Mendix apps
Starting with App from a Spreadsheet – describes importing a Microsoft Excel spreadsheet and building an app using your data
Mendix Academy Become a Rapid Developer – the learning path recommended for new Mendix users who want to create their first app using low-code
Mendix Academy Crash Course – the learning path recommended for new Mendix users who are also experienced developers