Building the Mendix Extensibility Playground

Creating a playground with a VS Code feel for testing and experimenting with Mendix extensions.

TL;DR: Built a Monaco editor inside Studio Pro to test the Web Extensibility API in real-time. Download it here to experiment instantly. Note: Currently requires manual save (Ctrl+S) - a new save mechanism that will persist automatically is coming.

The Problem

Testing Mendix Web Extensibility API calls was a slow, repetitive process:

Write TypeScript code
Build the extension (npm run build)
Deploy to Studio Pro extensions folder
Close Studio Pro completely
Reopen Studio Pro
Navigate to your extension
Test your changes
Find a bug
Repeat all steps again

This took 2-3 minutes per iteration. For a simple API test, I spent more time waiting than coding.

I wanted a playground with VS Code’s instant feedback - where you can write code, press Ctrl+Enter, and immediately see the results.

The Solution: Extensibility Playground

An interactive Monaco-powered code editor that lives inside Studio Pro:

No build cycle. No restart. Just write → execute → see.

Think of it like the browser console, but for manipulating Mendix domain models, microflows, and pages.

Download

Requirements:

Mendix Studio Pro 11.3 or higher
Extensibility setting must be enabled (see instructions below)

Download the extension

Download extensibility-playground.zip and extract it to your project.

Extract to your project

Extract the zip file to your Mendix project’s extensions folder:


<YourMendixProject>/
└── extensions/
    └── extensibility-playground/
        ├── main.js
        ├── ui.js
        ├── extensibility-playground.css
        └── manifest.json

Example path: C:\Users\YourName\Mendix\MyProject-main\extensions\extensibility-playground\

Enable extensibility (Mendix 11.3+)

If you haven’t enabled extensibility yet:

In Studio Pro, click Edit → Preferences
Go to the Advanced tab
Under “Extension Development”, check “Start Studio Pro in Extension Development Mode. Requires restart of Studio Pro.”
Click OK
Restart Studio Pro for the changes to take effect

Load the extension

Option 1: Restart Studio Pro

Close Studio Pro completely
Reopen your project

Option 2: Synchronize App Directory (faster!)

In Studio Pro, go to App → Synchronize App Directory
Wait for synchronization to complete

Then:

Go to Extensions → Extensibility Playground
Start experimenting! 🎉

What Can You Do With It?

Example: Create an Entity in 30 Seconds

Let’s create a Customer entity with attributes:

create-customer.js


const { projects, domainModels, microflows } = studioPro.app.model;
const domainModels_list = await domainModels.loadAll(
  (info) => info.moduleName === 'MyFirstModule'
);
const domainModel = domainModels_list[0];
 
if (!domainModel) {
  log('❌ Domain model not found');
  return;
}
 
// Check if Customer entity already exists
let customer = domainModel.entities.find(e => e.name === 'Customer');
 
if (!customer) {
  log('Creating Customer entity...');
 
  // Create Customer entity with Name and Age attributes
  customer = await domainModel.addEntity({
    name: 'Customer',
    attributes: [
      { name: 'Name', type: 'String' },
      { name: 'Age', type: 'Integer' }
    ]
  });
 
  customer.dataStorageGuid = crypto.randomUUID();
  customer.location = { x: 100, y: 100 };
 
  // Set dataStorageGuid for each attribute
  customer.attributes.forEach(attr => {
    attr.dataStorageGuid = crypto.randomUUID();
    if (attr.type.$Type === 'DomainModels$StringAttributeType') {
      attr.type.length = 200;
    }
  });
 
  await domainModels.save(domainModel);
  log('✅ Created Customer entity with Name and Age attributes');
} else {
  log('✅ Customer entity already exists');
}

Result: Press Ctrl+Enter to execute. The entity appears in Studio Pro instantly - remember to press Ctrl+S to persist!

Example: Building Project Structure

Create Folder

create-folder.js


const { projects } = studioPro.app.model;
 
const module = await projects.getModule('MyFirstModule');
 
if (!module) {
  log('❌ MyFirstModule not found');
  return;
}
 
let objectsFolder = await projects.getFolder(module.$ID, 'Objects');
 
if (!objectsFolder) {
  objectsFolder = await projects.addFolder(module.$ID, 'Objects');
  log('✅ Created Objects folder');
} else {
  log('✅ Objects folder already exists');
}

Folder + Microflow

folder-microflow.js


const { projects, microflows } = studioPro.app.model;
 
const module = await projects.getModule('MyFirstModule');
 
if (!module) {
  log('❌ MyFirstModule not found');
  return;
}
 
let objectsFolder = await projects.getFolder(module.$ID, 'Objects');
 
if (!objectsFolder) {
  objectsFolder = await projects.addFolder(module.$ID, 'Objects');
  log('✅ Created Objects folder');
} else {
  log('✅ Objects folder already exists');
}
 
const microflow = await microflows.addMicroflow(
  objectsFolder.$ID,
  { name: 'Customer_Create' }
);
 
log('✅ Created Customer_Create microflow in Objects folder');

Complete Example

complete-workflow.js


const { projects, domainModels, microflows } = studioPro.app.model;
 
// ============================================================================
// STEP 1: Check if MyFirstModule exists
// ============================================================================
const module = await projects.getModule('MyFirstModule');
 
if (!module) {
  log('❌ MyFirstModule not found - exiting');
  return;
}
 
log('✅ Found MyFirstModule');
 
// ============================================================================
// STEP 2: Create "Objects" folder (check if exists first)
// ============================================================================
let objectsFolder = await projects.getFolder(module.$ID, 'Objects');
 
if (!objectsFolder) {
  objectsFolder = await projects.addFolder(module.$ID, 'Objects');
  log('✅ Created Objects folder');
} else {
  log('✅ Objects folder already exists');
}
 
// ============================================================================
// STEP 3: Create "Customer" subfolder under Objects
// ============================================================================
let customerFolder = await projects.getFolder(objectsFolder.$ID, 'Customer');
 
if (!customerFolder) {
  customerFolder = await projects.addFolder(objectsFolder.$ID, 'Customer');
  log('✅ Created Customer subfolder');
} else {
  log('✅ Customer subfolder already exists');
}
 
// ============================================================================
// STEP 4: Load domain model and check if Customer entity exists
// ============================================================================
const domainModels_list = await domainModels.loadAll(
  (info) => info.moduleName === 'MyFirstModule'
);
const domainModel = domainModels_list[0];
 
if (!domainModel) {
  log('❌ Domain model not found');
  return;
}
 
// Check if Customer entity already exists
let customer = domainModel.entities.find(e => e.name === 'Customer');
 
if (!customer) {
  log('Creating Customer entity...');
 
  // Create Customer entity with Name and Age attributes
  customer = await domainModel.addEntity({
    name: 'Customer',
    attributes: [
      { name: 'Name', type: 'String' },
      { name: 'Age', type: 'Integer' }
    ]
  });
 
  customer.dataStorageGuid = crypto.randomUUID();
  customer.location = { x: 100, y: 100 };
 
  // Set dataStorageGuid for each attribute
  customer.attributes.forEach(attr => {
    attr.dataStorageGuid = crypto.randomUUID();
    if (attr.type.$Type === 'DomainModels$StringAttributeType') {
      attr.type.length = 200;
    }
  });
 
  await domainModels.save(domainModel);
  log('✅ Created Customer entity with Name and Age attributes');
} else {
  log('✅ Customer entity already exists');
}
 
// ============================================================================
// STEP 5: Check if Customer_Create microflow already exists
// ============================================================================
const documentsInfo = await projects.getDocumentsInfo(customerFolder.$ID);
const existingMicroflow = documentsInfo.find(
  doc => doc.$Type === 'Microflows$Microflow' && doc.name === 'Customer_Create'
);
 
if (existingMicroflow) {
  log('✅ Customer_Create microflow already exists - skipping creation');
  return;
}
 
// ============================================================================
// STEP 6: Create Customer_Create microflow
// ============================================================================
const microflow = await microflows.addMicroflow(
  customerFolder.$ID,
  { name: 'Customer_Create' }
);
 
microflow.documentation = 'Creates a new Customer object and returns it';
log('✅ Created Customer_Create microflow');
 
// ============================================================================
// STEP 7: Get start and end events (both exist by default)
// ============================================================================
const startEvent = microflow.objectCollection.objects.find(
  obj => obj.$Type === 'Microflows$StartEvent'
);
 
const endEvent = microflow.objectCollection.objects.find(
  obj => obj.$Type === 'Microflows$EndEvent'
);
 
log('✅ Found existing start and end events');
 
// ============================================================================
// STEP 8: Delete existing sequence flow between start and end
// ============================================================================
const existingFlow = microflow.flows.find(
  flow => flow.origin === startEvent.$ID && flow.destination === endEvent.$ID
);
 
if (existingFlow) {
  existingFlow.delete();
  log('✅ Deleted existing Start→End sequence flow');
}
 
// ============================================================================
// STEP 9: Add ActionActivity for CreateObject
// ============================================================================
const actionActivity = await microflow.objectCollection.addActionActivity();
actionActivity.relativeMiddlePoint = { x: 300, y: 200 };
actionActivity.size = { width: 120, height: 60 };
actionActivity.caption = 'Create Customer';
actionActivity.autoGenerateCaption = false;
 
log('✅ Added action activity to microflow');
 
// CRITICAL: Must save before setting action property
await microflows.save(microflow);
log('💾 Saved microflow with ActionActivity');
 
// ============================================================================
// STEP 10: Configure CreateObjectAction with Customer entity
// ============================================================================
// RELOAD to get the saved activity
const reloadedMicroflowsList = await microflows.loadAll(m => m.$ID === microflow.$ID);
const reloadedMicroflow = reloadedMicroflowsList[0];
 
const reloadedActionActivity = reloadedMicroflow.objectCollection.objects.find(
  obj => obj.$Type === 'Microflows$ActionActivity' && obj.caption === 'Create Customer'
);
 
if (!reloadedActionActivity) {
  log('❌ ActionActivity not found after reload');
  return;
}
 
log('🔨 Creating CreateObjectAction with create() + spread pattern...');
 
const createAction = {
  ...(await microflows.create('Microflows$CreateObjectAction')),
  entity: 'MyFirstModule.Customer',
  outputVariableName: 'NewCustomer',
  commit: 'No'
};
 
// Now we can set the action on the reloaded activity
reloadedActionActivity.action = createAction;
 
log('✅ Created and configured CreateObjectAction');
 
// Get references from the reloaded microflow
const reloadedStartEvent = reloadedMicroflow.objectCollection.objects.find(
  obj => obj.$Type === 'Microflows$StartEvent'
);
 
const reloadedEndEvent = reloadedMicroflow.objectCollection.objects.find(
  obj => obj.$Type === 'Microflows$EndEvent'
);
 
// ============================================================================
// STEP 11: Connect sequence flows (Start → ActionActivity → End)
// ============================================================================
log('🔗 Connecting flows...');
 
// Start → ActionActivity
await reloadedMicroflow.addSequenceFlow({
  originId: reloadedStartEvent.$ID,
  destinationId: reloadedActionActivity.$ID,
  originConnectionIndex: 1,
  destinationConnectionIndex: 3
});
 
log('✅ Added sequence flow: Start → ActionActivity');
 
// ActionActivity → EndEvent
await reloadedMicroflow.addSequenceFlow({
  originId: reloadedActionActivity.$ID,
  destinationId: reloadedEndEvent.$ID,
  originConnectionIndex: 1,
  destinationConnectionIndex: 3
});
 
log('✅ Added sequence flow: ActionActivity → End');
 
// ============================================================================
// STEP 12: Final save
// ============================================================================
log('💾 Saving microflow...');
await microflows.save(reloadedMicroflow);
log('💾 Save complete!');
 
log(`
✅ COMPLETE! Customer workflow created successfully:
 
Structure:
  - MyFirstModule (verified)
  - Objects/ folder (created/verified)
  - Objects/Customer/ subfolder (created)
  - Customer entity (created with Name and Age)
  - Customer_Create microflow (created)
 
Microflow Details:
  - Location: Objects/Customer/Customer_Create
  - Contains: CreateObjectAction configured with Customer entity
  - Output variable: NewCustomer
  - Commit: No
  - Flow: Start → Create Customer → End
 
Note: You can manually configure the end event return value in Studio Pro
      by double-clicking the end event and setting it to $NewCustomer
`);

Result: Learn the complete workflow - from simple folder creation to a full Customer entity with microflow!

About Persistence 💾

Currently, the playground (and all Web Extensibility API extensions) requires manual save (Ctrl+S) to persist changes.

Coming in Mendix 11.5: Automatic programmatic persistence will be available! The API will support saving changes without manual intervention.

How It Works Now

current-pattern.js


const { domainModels } = studioPro.app.model;
 
// Load domain model
const [domainModel] = await domainModels.loadAll(
  (info) => info.moduleName === 'MyFirstModule'
);
 
// Create entity
const entity = await domainModel.addEntity({
  name: 'Customer'
});
 
// Save to Studio Pro's in-memory model
await domainModels.save(domainModel);
 
// ⚠️ User must press Ctrl+S to persist
log('✅ Entity visible in Studio Pro');
log('⚠️  Press Ctrl+S to persist');

Current behavior:

save() updates Studio Pro’s in-memory model ✅
Changes appear in UI immediately ✅
Changes don’t persist until Ctrl+S ⚠️
Restarting without Ctrl+S loses changes ❌

What’s coming:

A new save mechanism will persist automatically ✅
No more manual Ctrl+S required ✅

Patterns

Every model modification follows this flow:

load-modify-save.js


const { domainModels } = studioPro.app.model;
 
// 1️⃣ Load the unit
const [domainModel] = await domainModels.loadAll(
  (info) => info.moduleName === 'MyFirstModule'
);
 
// 2️⃣ Modify in memory
const entity = await domainModel.addEntity({
  name: 'Product'
});
entity.dataStorageGuid = crypto.randomUUID();
 
// 3️⃣ Save to Studio Pro UI
await domainModels.save(domainModel);
 
// 4️⃣ User presses Ctrl+S to persist
log('⚠️  Press Ctrl+S to persist');

The create() + Spread Pattern

When working with complex types like entity references or enumerations, use the create() + spread pattern:

create-spread-pattern.js


const { microflows } = studioPro.app.model;
 
const [microflow] = await microflows.loadAll(...);
 
// ✅ CORRECT: create() + spread for entity types
microflow.microflowReturnType = {
  ...(await microflows.create('DataTypes$ObjectType')),
  entity: 'MyFirstModule.Customer'
};
 
await microflows.save(microflow);

Why this pattern?

This is currently a workaround. Mendix is working behind the scenes to add proper parameters to the create() functions for instantiating elements correctly. For now, you need to use create() + spread to set properties like entity.


// ❌ WRONG - Options silently ignored
const type = await microflows.createElement('DataTypes$ObjectType', {
  entity: 'Module.Entity'  // Silently ignored!
});
 
// ✅ WORKAROUND - Use create() + spread for now
const type = {
  ...(await microflows.create('DataTypes$ObjectType')),
  entity: 'Module.Entity'  // Works with this pattern
};

Note: This will be improved in future Mendix releases when proper instantiation parameters are added to the API.

Always Generate GUIDs

Critical: Never forget to generate dataStorageGuid for entities and attributes!

generate-guids.js


const entity = await domainModel.addEntity({
  name: 'Product'
});
entity.dataStorageGuid = crypto.randomUUID(); // ✅ CRITICAL
 
// Also for attributes
entity.attributes.forEach(attr => {
  attr.dataStorageGuid = crypto.randomUUID();
});

Why this matters:

These GUIDs map to actual database table identifiers
Without them, you get database conflicts

What’s Inside the Playground

The playground is more than just a code editor:

Monaco Editor Features

✅ Multi-cursor editing (Alt+Click)
✅ Keyboard shortcuts (Ctrl+Enter to execute)
✅ Syntax highlighting for JavaScript/TypeScript

Execution Environment


// Global objects available:
studioPro.app.model.domainModels  // Domain models
studioPro.app.model.microflows    // Microflows
studioPro.app.model.pages         // Pages
studioPro.app.model.projects      // Folders & modules
 
log(message)           // Console output
crypto.randomUUID()    // GUID generation

When to Use the Playground 🎯

✅ Perfect Use Cases

The playground excels at:

Learning the Web Extensibility API - Instant feedback loop for experimentation
Prototyping extension ideas - Test concepts in seconds, not hours
Debugging API behaviors - See exactly what the API does
Teaching Mendix development - Live demonstrations with immediate results
Testing model patterns - Try different approaches quickly

❌ Not Ideal For

The playground specifically is not ideal for:

Production automation - Use Web Extensibility API in a proper extension (not playground)
Complex workflows - Build structured extensions with proper architecture

Note: The Web Extensibility API itself can be used for automation - just not through the playground editor. Build proper extensions for production use cases.

Architecture

The playground creates an AsyncFunction with access to the studioPro global, executes it directly in Studio Pro, and captures console output.

Technology stack:

React 18 + TypeScript for UI
Monaco Editor (VS Code engine)
Vite for build system
Tailwind CSS for styling

Troubleshooting 🔧

Changes Disappear

Changes disappear after restart

Problem: Created entities vanish when reopening Studio Pro.

Root Cause: You forgot to press Ctrl+S after running the code.

Solution:

remember-save.js


const entity = await domainModel.addEntity({ name: 'Customer' });
entity.dataStorageGuid = crypto.randomUUID();
await domainModels.save(domainModel);
 
log('✅ Changes in Studio Pro UI');
log('⚠️  Press Ctrl+S to persist to disk!');

Remember: The API doesn’t persist automatically yet - a new save mechanism that will persist automatically is coming.

Resources

Have questions? Find me on LinkedIn or send me an email at b.thomsin@gmail.com. I’d love to hear what you build with the playground!