Get Started with the Web Extensibility API

Last modified: November 7, 2025

Introduction

Studio Pro extensions can be developed using TypeScript and use standard web development technologies to extend the Studio Pro development environment. This document describes how to set up a basic development environment for building an extension using the web extensibility API.

For more information see the Mendix Studio Pro Web Extensibility API.

Prerequisites

You will need the following prerequisites:

Mendix Studio Pro version 10.21.0 or higher
A development IDE to develop your extensions. Mendix recommends using Visual Studio Code
Install the latest version 22.x.x of Node: https://nodejs.org/en/download

Extensions can be built on any operating system as the underlying framework is cross-platform.

Creating Your First Extension

This section will show you how to build and test an extension.

Create a Test App

Create a new app using the Blank Web App template.
Install the Studio Pro Web Extension Template from GitHub using the instructions in the repository.

Building the Extension

Follow the below steps from within Visual Studio Code.

Select File > Open Folder.
Navigate to the folder where you created your extension.
Click Select Folder.
Select Yes if you are asked whether you trust this folder.
Open a Terminal from the top menu by clicking Terminal > New Terminal.
From the Terminal, type npm install. This installs all dependencies for the extension.
Build your extension using the command npm run build in the terminal.

Once completed, you should now have a build artifact which we can deploy to your Mendix app.

Exploring the Created Extension

You can explore the extension to understand what it does when it is installed. Do the following:

From the Explorer window, navigate to src/main/index.ts and select it to open the file.

Reading through the source code you should see the following:

a. Line 7 adds a menu

await studioPro.ui.extensionsMenu.add({
menuId: "myextension.MainMenu",
caption: "MyExtension Menu",
subMenus: [{ menuId: "myextension.ShowTabMenuItem", caption: "Show tab" }],
});

Line 14 opens a tab

 ```typescript
 // Open a tab when the menu item is clicked
 studioPro.ui.extensionsMenu.addEventListener("menuItemActivated", (args) => {
   if (args.menuId === "myextension.ShowTabMenuItem") {
     studioPro.ui.tabs.open(
       {
         title: "My Extension Tab",
       },
       {
         componentName: "extension/myextension",
         uiEntrypoint: "tab",
       }
     );
   }
 });
   ```

When you install the extension, you will see a new menu item within Studio Pro.

Testing the Extension

To test the extension, do the following in File Explorer.

Navigate to the folder where you extracted the extension source code.
Open the dist folder.
Copy the myextension folder.
Navigate to the folder where you created your app.
Create a new folder called webextensions.
Paste the myextension folder into the webextensions folder you just created. This adds the extension files to the app.
Start Studio Pro with the following command-line parameters to tell it to use the extensions in the folder:

--enable-extension-development --webview-remote-debugging

These flags instruct Studio Pro to do the following:
- Load extensions from the webextensions folder
- Enable web debugging tools
In Studio Pro, open the new app. You will see a new Extensions item in the top menu.

Extension names used in place of myextension must only contain digits, letters, dashes, and underscores. Extensions with an invalid name will not be loaded and will display an error.

Extensibility Feedback

If you would like to provide additional feedback, you can complete a small survey.

Any feedback is appreciated.