Open a Document Editor Using Web API

Last modified: July 23, 2025

Introduction

This how-to describes how to open an existing document editor in Studio Pro from within an extension.

Prerequisites

This how-to uses the results of Get Started with the Web Extensibility API. Complete that how-to before starting this one. You should also be familiar with creating menus as described in Create a Menu Using Web API.

Opening a Document Editor

First, create a menu item. This is done inside the loaded event in Main. For more information, see Create a Menu Using Web API.

This menu action will look for the Home_Page document in MyFirstModule (however, you can use any module or document in your app). It will then open it with the editor API. For more information, see Access a Mendix Model Using Web API.

For this example, add an event listener for the menuItemActivated event for when a menu is clicked. When the event triggers, do the following:

  1. Look for the page by its name, and by the name of its containing module using the studioPro.app.model.pages API.
  2. Call studioPro.ui.editors.editDocument to open the document by passing its ID.

See the code sample below to see how this is done:

import { IComponent, studioPro, Menu, Primitives } from "@mendix/extensions-api";

const menuId = "open-home-page";

studioPro.ui.extensionsMenu.addEventListener("menuItemActivated", async args => {
    if (args.menuId === menuId) {
        const [page] = await studioPro.app.model.pages.loadAll(
            (info: Primitives.UnitInfo) => info.moduleName === "MyFirstModule" && info.name === "Home_Web"
        );

        await studioPro.ui.editors.editDocument(page.$ID);
    }
});

export const component: IComponent = {
    async loaded() {
        const menu: Menu = {
            caption: "Open Home Page",
            menuId
        };

        await studioPro.ui.extensionsMenu.add(menu);
    }
};

Active Documents

The editor API notifies the extension when the active document tab is activated in Studio Pro, via the activeDocumentChanged event. It also provides this information on demand, via the studioPro.ui.editors.getActiveDocument method.

Both the getActiveDocument method and the activeDocumentChanged event args returns a ActiveDocumentInfo object, which contains the document's name, type, container, module name, and id.

See the sample code below:

studioPro.ui.editors.addEventListener("activeDocumentChanged", async ({ activeDocument }) => {
    if (activeDocument) {
        studioPro.ui.notifications.show({
            title: "Document Changed Notification",
            message: `Name: ${activeDocument.documentName}\nID: ${activeDocument.documentId}\nType: ${activeDocument.documentType}\nModule: ${activeDocument.moduleName}`,
            displayDurationInSeconds: 5
        });
    }
});

studioPro.ui.extensionsMenu.addEventListener("menuItemActivated", async args => {
    if (args.menuId === "getActiveDocumentMenu") {
        const activeDocument: ActiveDocumentInfo = studioPro.ui.editors.getActiveDocument();

        if (activeDocument) {
            studioPro.ui.notifications.show({
                title: "Active Document",
                message: `Name: ${activeDocument.documentName}\nID: ${activeDocument.documentId}\nType: ${activeDocument.documentType}\nModule: ${activeDocument.moduleName}`,
                displayDurationInSeconds: 5
            });
        }
    }
});

Extensibility Feedback

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

Any feedback is appreciated.