General Info

Last update: Edit

1 Introduction

Mendix Studio is the place where you can create, view and edit your Mendix applications without going into technical details. For this purpose you can use the Studio Pro and develop apps together with Studio Pro users anytime.

With Studio you can create and edit applications in your browser without installing software on your PC.

The picture below shows the components of Studio’s interface:

2 Opening Studio

You can open Mendix Studio via the Developer Portal or via Studio Pro.

2.1 Opening Studio via the Developer Portal

You can edit an app in Mendix Studio by opening your app in the Developer Portal and clicking Edit App or choosing the Edit in Mendix Studio option in the drop-down menu of the Edit App button.

When Studio is not enabled, you can click Edit App > Settings. For more information on how to enable Studio, see Developer Portal Settings.

2.2 Opening Studio via Studio Pro

You can also open your app in Studio via Studio Pro. Do the following:

  1. In Studio Pro, open the project in that you want to view in Studio.

  2. Click the globe icon in the top right corner (only available if Studio is enabled).

The app opens in Studio.

3 Upgrading Studio

After clicking Edit in Studio you may need to upgrade your app to the latest version.

You may also see an orange top bar suggesting an upgrade to the next Mendix version. For more information on Studio upgrades and Mendix versions, see Studio Ranges & Mendix Versions.

4 Switching App Modes

After opening Studio, the home page of the app opens.

You can change the view of your page to different views by clicking the corresponding icons:

  • Mobile

  • Tablet

  • Responsive (Desktop)

5 Left Menu Bar

The left menu bar allows you to go back to the Developer Portal, access pages, the domain model, microflows, and the navigation document in Studio, search for different elements in your app, open settings, and customize the look of your app:

All items of the left menu bar are described in the table below:

Menu item Shortcut Description
Mx Logo None The Mx logo is the return button to return to the Developer Portal of the app.
Pages 1 Shows a list of all pages in the app. After you select a page, it opens in Studio.
Domain Models 2 Shows the domain models of the app.
Microflows 3 Shows a list of all microflows in the app. After clicking a microflow, it will open in Studio.
Navigation Document 4 Shows a configured menu in the form of a navigation tree. You can expand the menu structure of the navigation tree up to two levels with an unlimited amount of pages.
Search (magnifying glass) icon / Helps you search through microflows, entities, and pages. Start typing the name of the item you are looking for and the search feature will return any matches it finds, using exact matches as well as fuzzy matches based on the characters entered.
You can also use “/” shortcut to search through your app.
Settings None Settings consists of Roles and Permissions and Widget Overview.
Via Roles and Permissions you can manage access to your app for different type of users.
The Widget Overview gives you an overview of all widgets and their status. Widgets are user interface elements (alerts, buttons, charts, etc.) that are used to build pages.
Theme Customizer None Allows you to style your app with custom branding, colors, and typography.

6 Toolbox, Properties, and Buzz

The top right menu of Studio consists of the Toolbox, Properties , and Buzz tabs:

The Toolbox, Properties , and Buzz tabs are describes in the table below:

Tab Description
Toolbox Shows tools available for the current editor.
Properties Shows the properties of the selected item.
Buzz Allows an app development team to make comments to different pages, microflows, domain models, and navigation layouts of Studio, and interact with each other.

7 Top Menu Bar

The top menu bar allows to check whether Studio is connected to the internet, undo or redo actions, view your recent documents, preview or publish your app, and view errors in your app (if any).

The top menu bar items are described in the table below:

Menu item Description
Status icon Indicates the internet connection status of Studio. If the icon is green, Studio is connected. When grey, Studio is offline.
Undo/Redo actions There buttons undo or redo the last action. You can also use Ctrl+Z and Ctrl+Y shortcuts correspondingly.
Recent documents drop-down menu A document that you are currently viewing is displayed in this option. When you click the drop-down menu, documents that you have recently viewed are displayed in the list. Click the document to open it.
Preview button Shows you what your app will look like after it is published
Publish button You can publish your app with this button. Click Publish > Update to publish the latest changes you made in Studio. For more information, see Previewing & Publishing Your App
Checks button Displays consistency errors (if any) that prevent your app from being previewed and published. For more information on errors, see Consistency Errors.
You can also use C shortcut to view the Checks panel.
Information icon Here you can find following information:
  • About – shows the information on the Studio version and Mendix version
  • Keyboard Shortcuts – opens the list of shortcuts in Studio
  • Take a Product Tour – starts a the guided product introduction tour and shows you around Studio
  • Ask the Community – a link to the Mendix Forum where you can ask questions and explore the knowledge offered by the entire Mendix Community
  • Check the Documentation – a link to the Studio Guide
  • Contact Mendix Support – a link to the Mendix Support Portal
  • Mendix Academy – a link to the Mendix Academy
  • Mendix Assist Is ON – a setting that enables/disables Mendix Assist
  • Edit in Studio Pro – opens your app in Studio Pro

8 Cut/Copy/Paste Function

Cut/copy/paste function is available in all editors of Studio: pages, microflows, domain models, and navigation document. To cut/copy/paste you can use Ctrl + Z / Ctrl + C / Ctrl + V or Cmn + Z / Cmd + C / Cmd + V.

Mind the following characteristics when using cut/copy/paste:

  • You can cut/copy/paste elements within one editor; that means that you can cut/copy/paste elements within one page or to other pages in Studio, and copy microflow activities within one microflow or to other microflows
  • You can cut/copy/paste elements to different apps in Studio if they have the same Mendix version
  • You cannot copy/paste pages or microflows, only elements of a page or a microflow
  • You cannot cut/copy/paste from Studio to Studio Pro

9 Read More