From 808e024aac27b79a0dc024a036f8bebeb4db59b5 Mon Sep 17 00:00:00 2001
From: quinntracy <quinn.tracy@mendix.com>
Date: Thu, 16 Oct 2025 11:33:05 +0200
Subject: [PATCH 01/14] Review Index and Packaging your extension

---
 .../studio-pro-11/extensibility-api/_index.md |  4 ++--
 .../packaging-your-extension.md               | 20 ++++++++++++-------
 2 files changed, 15 insertions(+), 9 deletions(-)

diff --git a/content/en/docs/apidocs-mxsdk/apidocs/studio-pro-11/extensibility-api/_index.md b/content/en/docs/apidocs-mxsdk/apidocs/studio-pro-11/extensibility-api/_index.md
index f688d280e74..6a8b08132e9 100644
--- a/content/en/docs/apidocs-mxsdk/apidocs/studio-pro-11/extensibility-api/_index.md
+++ b/content/en/docs/apidocs-mxsdk/apidocs/studio-pro-11/extensibility-api/_index.md
@@ -20,6 +20,6 @@ For information on new releases of the Extensibility API see:
 
 ## Introduction
 
-Extensions are self-contained modules which users can add to Studio Pro. This means that with extensibility you can add new features and functionality to Studio Pro. The Extensibility API is an API that allows developers to interact with a curated list of internal systems of Studio Pro. This documentation provides guides and reference documentation for the Extensibility API.
+Extensions are self-contained modules that enhance Studio Pro by adding new features and functionality. The Extensibility API allows developers to interact with a curated set of internal systems, making it easier to customize and expand Studio Pro’s capabilities.
 
-The API is provided in two flavors, depending which language you are developing in. C# and web based (via Typescript):
+The API is provided in two sections, depending on the language you are developing in:
diff --git a/content/en/docs/apidocs-mxsdk/apidocs/studio-pro-11/extensibility-api/packaging-your-extension.md b/content/en/docs/apidocs-mxsdk/apidocs/studio-pro-11/extensibility-api/packaging-your-extension.md
index 48b63611260..7b74759b7fe 100644
--- a/content/en/docs/apidocs-mxsdk/apidocs/studio-pro-11/extensibility-api/packaging-your-extension.md
+++ b/content/en/docs/apidocs-mxsdk/apidocs/studio-pro-11/extensibility-api/packaging-your-extension.md
@@ -4,26 +4,32 @@ url: /apidocs-mxsdk/apidocs/extensibility-api-11/packaging-your-extension
 weight: 30
 ---
 
-# Packaging your extension
+# Packaging Your Extension
 
-Once you have finished development on your extension, you might want to package it into an add-on module so that others can start using it. Once you have created the add-on module, it can then be published to the Mendix Marketplace for your extension users to download into their Studio Pro app.
+After completing development on your extension, you can package it into an add-on module so  others can use it. Once packaged, the module can be published to the Mendix Marketplace, allowing other users to download it into their Studio Pro apps.
 
-To package your extension, you will still need the `--enable-extension-development` command line option turned on. Create a new module in your Studio Pro app containing your dev extension, give it an appropriate name. Open the module's settings form and set it to be an Add-on module. In the `Extension name` dropdown, select the extension you want to package into it.
+To package your extension, follow the steps below:
+
+1. Make sure the`--enable-extension-development` command-line option is enabled.
+2. In your Studio Pro app, create a new module and include your development extension.
+3. Give the module a name. 
+4. Open the module's settings and in the **Export** tab, choose **Add-on module**. 
+5. In the **Extension name** drop-down, select the extension you want to package into it.
 
 ![Extension Add-on Module](/attachments/apidocs-mxsdk/apidocs/extensibility-api/extensionAddOnModule.png)
 
-After you've created your add-on module with its extension, you can now export it, by right-clicking the module in the App Explorer and choosing `Export add-on module package`, as shown below.
+After you have created your add-on module with its extension, you can export it by right-clicking the module in the **App Explorer** and selecting **Export add-on module package**.
 
 ![Export Module](/attachments/apidocs-mxsdk/apidocs/extensibility-api/exportAddOnModule.png)
 
 You can now save the add-on module to a location of your choice.
 
-# Importing the extension add-on module
+# Importing the Extension Add-on Module
 
-Once the add-on module is available to a Studio Pro user, they are now able to add it in their application. They can so so by right-clicking the app in the App Explorer and choosing `Import module package`, as shown below.
+When the add-on module is available to a Studio Pro user, they are now able to add it in their application. This is done by right-clicking the app in the **App Explorer** and selecting **Import module package**.
 
 ![Import Module](/attachments/apidocs-mxsdk/apidocs/extensibility-api/importAddOnModule.png)
 
-Once an add-on module containing an extension is imported in the app, Studio Pro will show a warning to the user, asking to trust the extension contained in it. If the user does not choose to trust, the module will still be imported but the extension inside it won't be loaded.
+When an add-on module containing an extension is imported in the app, Studio Pro will show a warning to the user, asking to trust the extension contained in it. If the user does not choose to trust, the module will still be imported but the extension inside it will not be loaded.
 
 ![Trust Extension](/attachments/apidocs-mxsdk/apidocs/extensibility-api/trustExtension.png)

From 22e5866fa4050aeab4beaaaf7338c8fb77b0a6d3 Mon Sep 17 00:00:00 2001
From: quinntracy <quinn.tracy@mendix.com>
Date: Thu, 16 Oct 2025 11:37:01 +0200
Subject: [PATCH 02/14] Review index

---
 .../studio-pro-11/extensibility-api/web/_index.md  | 14 ++++++++------
 1 file changed, 8 insertions(+), 6 deletions(-)

diff --git a/content/en/docs/apidocs-mxsdk/apidocs/studio-pro-11/extensibility-api/web/_index.md b/content/en/docs/apidocs-mxsdk/apidocs/studio-pro-11/extensibility-api/web/_index.md
index fe6b31c59d8..97c0996d8ba 100644
--- a/content/en/docs/apidocs-mxsdk/apidocs/studio-pro-11/extensibility-api/web/_index.md
+++ b/content/en/docs/apidocs-mxsdk/apidocs/studio-pro-11/extensibility-api/web/_index.md
@@ -13,23 +13,25 @@ weight: 20
 
 ## Introduction
 
-Extensions can be written in Typescript or other web languages, described here, or using a C# API which is documented separately in [Extensibility API for C# Developers](/apidocs-mxsdk/apidocs/csharp-extensibility-api-11/).
+Extensions can be written in TypeScript or other web languages, described here, or using a C# API, which is documented in [Extensibility API for C# Developers](/apidocs-mxsdk/apidocs/csharp-extensibility-api-11/).
 
 {{% alert color="info" %}}
-Please note that extension development is only possible by starting Studio Pro with the `--enable-extension-development` feature flag.
+At this time, extension development is only possible with the `--enable-extension-development` feature flag.
 {{% /alert %}}
 
 For more detailed information on the web API, see the [Mendix Studio Pro Web Extensibility API reference documentation](http://apidocs.rnd.mendix.com/11/extensions-api/index.html).
 
 ## Prerequisites
 
-* You need at least a basic understanding of the Mendix platform.
-* You need some understanding of the Mendix Model.
-* You need to have some TypeScript development experience.
+To use the Web Extensibility API, you must have:
+
+* A basic understanding of the Mendix platform
+* Some understanding of the Mendix Model
+* Some TypeScript development experience
 
 ## Getting Started
 
-For detailed explanation on how to get started with extensions, check out [Get Started with the Web Extensibility API](/apidocs-mxsdk/apidocs/web-extensibility-api-11/getting-started/).
+For detailed information on how to get started with extensions, see [Get Started with the Web Extensibility API](/apidocs-mxsdk/apidocs/web-extensibility-api-11/getting-started/).
 
 ## How-tos
 

From b54c33d2a85d51695999d838f7d22f89314ebd96 Mon Sep 17 00:00:00 2001
From: quinntracy <quinn.tracy@mendix.com>
Date: Thu, 16 Oct 2025 11:43:09 +0200
Subject: [PATCH 03/14] Review Get Started

---
 .../extensibility-api/web/get-started.md      | 35 +++++++------------
 1 file changed, 12 insertions(+), 23 deletions(-)

diff --git a/content/en/docs/apidocs-mxsdk/apidocs/studio-pro-11/extensibility-api/web/get-started.md b/content/en/docs/apidocs-mxsdk/apidocs/studio-pro-11/extensibility-api/web/get-started.md
index dd7e9868c62..9b9ae959c51 100644
--- a/content/en/docs/apidocs-mxsdk/apidocs/studio-pro-11/extensibility-api/web/get-started.md
+++ b/content/en/docs/apidocs-mxsdk/apidocs/studio-pro-11/extensibility-api/web/get-started.md
@@ -7,7 +7,7 @@ weight: 2
 
 ## Introduction
 
-Studio Pro extensions can be developed using TypeScript and use standard web development technologies to extend the Studio Pro development environment. This guide shows you how to set up a basic development environment for building an extension using the web extensibility API.
+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 detailed information, see the [Mendix Studio Pro Web Extensibility API reference documentation](http://apidocs.rnd.mendix.com/11/extensions-api/index.html).
 
@@ -16,11 +16,11 @@ For more detailed information, see the [Mendix Studio Pro Web Extensibility API
 You will need the following prerequisites:
 
 * [Mendix Studio Pro](https://marketplace.mendix.com/link/studiopro) version 11.2.0 or higher. 
-* A development IDE to develop your extensions. We recommend using [Visual Studio Code](https://code.visualstudio.com/).
-* Install the latest version 22.x.x of Node: https://nodejs.org/en/download.
+* A development IDE to develop your extensions. Mendix recommends using [Visual Studio Code](https://code.visualstudio.com/).
+* The latest version 22.x.x of Node: https://nodejs.org/en/download.
 
 {{% alert color="info" %}}
-Extensions can be built on any operating system as the underlying framework is cross-platform.
+Extensions can be built on any operating system, as the underlying framework is cross-platform.
 {{% /alert %}}
 
 {{% alert color="info" %}}
@@ -35,28 +35,26 @@ This section will show you how to build and test an extension.
 
 Create a new app using the **Blank Web App** template.
 
-{{% alert color="info" %}}
 You can also open the application directory containing the application `.mpr` file by clicking the **App** menu > **Show App Directory in Explorer** (or **Show App Directory in Finder**) in Studio Pro.
-{{% /alert %}}
 
 ### Creating the Extension
 
-To accelerate your extension development, we provide an extension generator that creates a customizable sample extension.
+To accelerate your extension development, Mendix provides an extension generator that creates a customizable sample extension.
 
 To use the generator, navigate to your desired source code directory and run the command `npm create @mendix/extension`. You may be prompted by `npm` to grant permission to install the generator. After installation, you will be guided through a series of questions to help configure your extension.
 
 You will be asked the following:
 
-* Select the programming language (TypeScript is used in our tutorials)
+* Select the programming language (TypeScript is used in the tutorials)
 * Specify the extension name
-* Choose if you  will use React for the extension’s UI
+* Choose if you will use React for the extension’s UI
   
-The next two questions, while optional, are highly recommended, as they enable direct debugging and deployment from Visual Studio Code.
+The next two questions, while optional, are highly recommended, as they enable direct debugging and deployment from Visual Studio Code:
 
 * Specify the path to the Studio Pro executable (this allows Visual Studio Code to automatically attach to Studio Pro for debugging)
-* Specify the location of the application `.mpr` package. (This allows for automatic deployment of your extension build to your app)
+* Specify the location of the application `.mpr` package (this allows for automatic deployment of your extension build to your app)
 
- The final question allows you to select the Studio Pro version you are targeting; we recommend you choose version 11.
+ The last question allows you to select the Studio Pro version you are targeting; Mendix recommends choosing version 11.
 
 {{% alert color="info" %}}
 On a Windows machine, the Studio Pro executable is typically located at `C:\Program Files\Mendix\<version>\modeler\studiopro.exe`. To find the exact path, follow these steps:
@@ -155,17 +153,8 @@ If the last two questions of the extension generator were answered and you have
 
 This will run Studio Pro in extension development mode and open the configured application. You will see a new `Extensions` item in the top menu.
 
-## Conclusion
-
-Using this guide we have:
-
-* Created a new app
-* Used the extension generator to get started with extension development
-* Built the extension and installed it in our app
-* Tested and debugged our extension from within Visual Studio Code
-
 ## Extensibility Feedback
 
-If you would like to provide us with some additional feedback you can complete a small [Survey](https://survey.alchemer.eu/s3/90801191/Extensibility-Feedback)
+If you would like to provide additional feedback, you can complete a small [survey](https://survey.alchemer.eu/s3/90801191/Extensibility-Feedback).
 
-Any feedback is much appreciated.
+Any feedback is appreciated.

From c9ec0798899d44a9df1306af3b63e4bd403f169f Mon Sep 17 00:00:00 2001
From: quinntracy <quinn.tracy@mendix.com>
Date: Thu, 16 Oct 2025 11:47:37 +0200
Subject: [PATCH 04/14] Review App Explorer

---
 .../web-extensions-howtos/app-explorer-api.md    | 16 ++++++++--------
 1 file changed, 8 insertions(+), 8 deletions(-)

diff --git a/content/en/docs/apidocs-mxsdk/apidocs/studio-pro-11/extensibility-api/web/web-extensions-howtos/app-explorer-api.md b/content/en/docs/apidocs-mxsdk/apidocs/studio-pro-11/extensibility-api/web/web-extensions-howtos/app-explorer-api.md
index a6954e93e3f..c1fb1f2b64d 100644
--- a/content/en/docs/apidocs-mxsdk/apidocs/studio-pro-11/extensibility-api/web/web-extensions-howtos/app-explorer-api.md
+++ b/content/en/docs/apidocs-mxsdk/apidocs/studio-pro-11/extensibility-api/web/web-extensions-howtos/app-explorer-api.md
@@ -6,15 +6,19 @@ url: /apidocs-mxsdk/apidocs/web-extensibility-api-11/app-explorer-api/
 
 ## Introduction
 
-This how-to describes how to interact with the App Explorer in Studio Pro.
+This how-to describes how to interact with the App Explorer in Studio Pro. In this example, you create a menu which will show for each microflow in the App Explorer.
 
 ## Prerequisites
 
-This how-to uses the results of [Get Started with the Web Extensibility API](/apidocs-mxsdk/apidocs/web-extensibility-api-11/getting-started/). Please complete that how-to before starting this one. You should also be familiar with command registration as described in [Register a Command Using Web API](/apidocs-mxsdk/apidocs/web-extensibility-api-11/command-api/).
+Before starting this how-to, make sure you have completed the following prerequisites:
+
+* This how-to uses the results of [Get Started with the Web Extensibility API](/apidocs-mxsdk/apidocs/web-extensibility-api-11/getting-started/). Complete that how-to before starting this one. 
+* Make sure you are familiar with command registration, as described in [Register a Command Using Web API](/apidocs-mxsdk/apidocs/web-extensibility-api-11/command-api/).
 
 ## Creating a Context Menu
 
-In this example, you will create a menu which will show for each microflow in the App Explorer. Use the full name of the document type to specify which type of document a menu should belong to (for example, `Microflows$Microflow` for microflows or `Pages$Page` for pages). The documentation for these document type names can be found at [Access a Mendix Model Using Web API](/apidocs-mxsdk/apidocs/web-extensibility-api-11/model-api/).
+{{% alert color="info" %}}
+Use the full name of the document type to specify which type of document a menu should belong to (for example, `Microflows$Microflow` for microflows or `Pages$Page` for pages). For more information about these document type names, see [Access a Mendix Model Using Web API](/apidocs-mxsdk/apidocs/web-extensibility-api-11/model-api/).
 
 The code below does the following:
 
@@ -55,12 +59,8 @@ The payload of the command must be an object containing a document Id (`{ docume
 The command must be registered before creating the menu.
 {{% /alert %}}
 
-## Conclusion
-
-You have seen how to create context menus for a document node in the App Explorer. The menu executes a previously registered command.
-
 ## Extensibility Feedback
 
-If you would like to provide us with additional feedback, you can complete a small [survey](https://survey.alchemer.eu/s3/90801191/Extensibility-Feedback).
+If you would like to provide additional feedback, you can complete a small [survey](https://survey.alchemer.eu/s3/90801191/Extensibility-Feedback).
 
 Any feedback is appreciated.

From 9b8926ba5d77a92f6657d27312ae948537abb582 Mon Sep 17 00:00:00 2001
From: quinntracy <quinn.tracy@mendix.com>
Date: Thu, 16 Oct 2025 11:54:41 +0200
Subject: [PATCH 05/14] Review Command API

---
 .../web/web-extensions-howtos/command-api.md  | 37 ++++++++++++-------
 1 file changed, 23 insertions(+), 14 deletions(-)

diff --git a/content/en/docs/apidocs-mxsdk/apidocs/studio-pro-11/extensibility-api/web/web-extensions-howtos/command-api.md b/content/en/docs/apidocs-mxsdk/apidocs/studio-pro-11/extensibility-api/web/web-extensions-howtos/command-api.md
index 11bcac12f3b..2b01572629b 100644
--- a/content/en/docs/apidocs-mxsdk/apidocs/studio-pro-11/extensibility-api/web/web-extensions-howtos/command-api.md
+++ b/content/en/docs/apidocs-mxsdk/apidocs/studio-pro-11/extensibility-api/web/web-extensions-howtos/command-api.md
@@ -10,24 +10,23 @@ This how-to describes how to register a command in Studio Pro from an extension.
 
 ## Prerequisites
 
-This how-to uses the results of [Get Started with the Web Extensibility API](/apidocs-mxsdk/apidocs/web-extensibility-api-11/getting-started/). Please 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](/apidocs-mxsdk/apidocs/web-extensibility-api-11/menu-api/).
+Before starting this how-to, make sure you have completed the following prerequisites:
+
+* This how-to uses the results of [Get Started with the Web Extensibility API](/apidocs-mxsdk/apidocs/web-extensibility-api-11/getting-started/). Complete that how-to before starting this one. 
+* Make sure you are familiar with creating menus as described in [Create a Menu Using Web API](/apidocs-mxsdk/apidocs/web-extensibility-api-11/menu-api/).
 
 ## Register Commands
 
-The Commands API allows users to register a reusable command. These commands can be attached to menus and context menus. At this time, two APIs make use of this feature:
+The Commands API allows you to register a reusable command that can be attached to menus and context menus. At this time, two APIs support this feature:
 
 * [Documents API](/apidocs-mxsdk/apidocs/web-extensibility-api-11/)
 * [App Explorer API](/apidocs-mxsdk/apidocs/web-extensibility-api-11/app-explorer-api/)
 
-To register commands, you can call the Commands API `registerCommand`.
-
-In the sample code below, we register a command, then attach it to a menu by setting the property `commandId` to the `Menu` object.
+## Using `registerCommand` API
 
-{{% alert color="info" %}}
-The `registerCommand` requires a generic type for the command payload once executed. For standalone menus that have a command without payload, you can register it with `<void>`. When using `void`, the generic type declaration can also be left out (for example, `registerCommand<void>(commandId...)` becomes `registerCommand(commandId...)`).
-{{% /alert %}}
+To register commands, use the Commands API `registerCommand`.
 
-For commands that require payload, you must make sure you register the command with the exact expected payload object type. See the [App Explorer API](/apidocs-mxsdk/apidocs/web-extensibility-api-11/app-explorer-api/) and [Documents API](/apidocs-mxsdk/apidocs/web-extensibility-api-11/documents-api/) documentation for clear examples.
+In the sample code below, we register a command, then attach it to a menu by setting the property `commandId` to the `Menu` object.
 
 ```typescript
 import { ComponentContext, IComponent, Menu, StudioProApi, getStudioProApi } from "@mendix/extensions-api";
@@ -55,20 +54,30 @@ export const component: IComponent = {
 }
 ```
 
-It is also possible to create a context menu that belongs to a document in the App Explorer or a document editor, and that menu can have a registered command attached to it. To do so, you can use the [App Explorer API](/apidocs-mxsdk/apidocs/web-extensibility-api-11/app-explorer-api/) or the [Documents API](/apidocs-mxsdk/apidocs/web-extensibility-api-11/documents-api/). 
+## Payloads
+
+The `registerCommand` requires a generic type for the command payload once executed. 
+
+* For commands without payload, use `<void>`. When using `void`, the generic type declaration can also be left out (for example, `registerCommand<void>(commandId...)` becomes `registerCommand(commandId...)`).
+* For commands that require payload, make sure the payload type matches the expected structure.
 
-The command registration for commands that interact with documents are slightly different. They require a payload of type `{ documentId: string }`; the backend will return the menu when it is clicked. The `documentId` is the id of the exact document that was interacted with by the menu.
+See the [App Explorer API](/apidocs-mxsdk/apidocs/web-extensibility-api-11/app-explorer-api/) and [Documents API](/apidocs-mxsdk/apidocs/web-extensibility-api-11/documents-api/) documentation for examples.
+
+## Context Menu Integration
 
 {{% alert color="info" %}}
 The command must be registered before creating any menus that might be attached to it.
 {{% /alert %}}
 
-## Conclusion
+You can attach registered commands to context menus in:
+
+* [App Explorer API](/apidocs-mxsdk/apidocs/web-extensibility-api-11/app-explorer-api/) 
+* [Documents API](/apidocs-mxsdk/apidocs/web-extensibility-api-11/documents-api/). 
 
-You have seen how to register commands that can be attached to menus in Studio Pro.
+The command registration for commands that interact with documents require a payload of type `{ documentId: string }`.  The `documentId` is the id of the exact document that was interacted with by the menu. The backend will return the menu when it is clicked. 
 
 ## Extensibility Feedback
 
-If you would like to provide us with additional feedback, you can complete a small [survey](https://survey.alchemer.eu/s3/90801191/Extensibility-Feedback).
+If you would like to provide additional feedback, you can complete a small [survey](https://survey.alchemer.eu/s3/90801191/Extensibility-Feedback).
 
 Any feedback is appreciated.

From 2ea46ded72d87cccb15453adfd5fba82d1a06ca1 Mon Sep 17 00:00:00 2001
From: quinntracy <quinn.tracy@mendix.com>
Date: Thu, 16 Oct 2025 11:59:36 +0200
Subject: [PATCH 06/14] Review Dialog API

---
 .../web/web-extensions-howtos/dialog-api.md      | 16 +++++++++-------
 1 file changed, 9 insertions(+), 7 deletions(-)

diff --git a/content/en/docs/apidocs-mxsdk/apidocs/studio-pro-11/extensibility-api/web/web-extensions-howtos/dialog-api.md b/content/en/docs/apidocs-mxsdk/apidocs/studio-pro-11/extensibility-api/web/web-extensions-howtos/dialog-api.md
index c596982eec2..dcb527196cd 100644
--- a/content/en/docs/apidocs-mxsdk/apidocs/studio-pro-11/extensibility-api/web/web-extensions-howtos/dialog-api.md
+++ b/content/en/docs/apidocs-mxsdk/apidocs/studio-pro-11/extensibility-api/web/web-extensions-howtos/dialog-api.md
@@ -10,7 +10,10 @@ This how-to describes how to open a modal dialog in Studio Pro from an extension
 
 ## Prerequisites
 
-This how-to uses the results of [Get Started with the Web Extensibility API](/apidocs-mxsdk/apidocs/web-extensibility-api-11/getting-started/). Please 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](/apidocs-mxsdk/apidocs/web-extensibility-api-11/menu-api/).
+Before starting this how-to, make sure you have completed the following prerequisites:
+
+* This how-to uses the results of [Get Started with the Web Extensibility API](/apidocs-mxsdk/apidocs/web-extensibility-api-11/getting-started/). Complete that how-to before starting this one. 
+* Make sure you are familiar with creating menus as described in [Create a Menu Using Web API](/apidocs-mxsdk/apidocs/web-extensibility-api-11/menu-api/).
 
 ## Opening a Modal Dialog
 
@@ -26,7 +29,7 @@ In a listener event called `menuItemActivated`, the `studioPro.ui.dialogs.showMo
     * `queryParams` (optional) — a key-value pair object for passing data to your web content inside the dialog
 
 {{% alert color="info" %}}
-When the dialog's API `showModal` method is called, a `Promise` of `unknown` or `null` is returned. This return value represents anything the web content determines should be returned when the dialog gets closed. It is currently unknown by the API, since it can be anything. 
+When the dialog's API `showModal` method is called, a `Promise` of `unknown` or `null` is returned. This return value represents anything the web content determines should be returned when the dialog is closed. It is currently unknown by the API, since it can be anything. 
 
 In the example below, the dialog will contain a form where an object is modified, then returned at closing time.
 {{% /alert %}}
@@ -93,8 +96,7 @@ In the previous example, the `uiEntryPoint` property of the `<uispec>` object ha
 }
 ```
 
-1. Update `build-extension.mjs` to match the manifest with an entry for the new dialog entry point. Specifically, you need to add
-the `src/ui/dialog.tsx` endpoint to your build script and make sure the variable `appDir` stays unaltered. For example:
+1. Update `build-extension.mjs` to match the manifest with an entry for the new dialog entry point. Specifically, add the `src/ui/dialog.tsx` endpoint to your build script and make sure the variable `appDir` stays unaltered. For example:
 
    ```typescript{hl_lines=["16-19"]}
     import * as esbuild from 'esbuild'
@@ -207,7 +209,7 @@ After building and installing the extension in Studio Pro, the dialog opens when
 
 ## Modifying a Modal Dialog
 
-You can also modify the dimensions of a dialog using the dialog API's `update` method. To do this, add a button to the form contained in `dialog.tsx` file, as follows:
+You can modify the dimensions of a dialog using the dialog API's `update` method. To do this, add a button to the form contained in `dialog.tsx` file, as follows:
 
 ```typescript
 <button
@@ -223,10 +225,10 @@ You can also modify the dimensions of a dialog using the dialog API's `update` m
 </button>
 ```
 
- You can also modify the dialog's dimensions while it is open.
+You can also modify the dialog's dimensions while it is open.
 
 ## Extensibility Feedback
 
-If you would like to provide us with additional feedback, you can complete a small [survey](https://survey.alchemer.eu/s3/90801191/Extensibility-Feedback).
+If you would like to provide additional feedback, you can complete a small [survey](https://survey.alchemer.eu/s3/90801191/Extensibility-Feedback).
 
 Any feedback is appreciated.

From b0ff6a10da2172da4b57a28c4d0da9b5d234cb5d Mon Sep 17 00:00:00 2001
From: quinntracy <quinn.tracy@mendix.com>
Date: Thu, 16 Oct 2025 12:16:14 +0200
Subject: [PATCH 07/14] Review Dockable pane API

---
 .../dockable-pane-api.md                      | 114 +++++++++---------
 1 file changed, 55 insertions(+), 59 deletions(-)

diff --git a/content/en/docs/apidocs-mxsdk/apidocs/studio-pro-11/extensibility-api/web/web-extensions-howtos/dockable-pane-api.md b/content/en/docs/apidocs-mxsdk/apidocs/studio-pro-11/extensibility-api/web/web-extensions-howtos/dockable-pane-api.md
index 403914658fe..32e96a546fd 100644
--- a/content/en/docs/apidocs-mxsdk/apidocs/studio-pro-11/extensibility-api/web/web-extensions-howtos/dockable-pane-api.md
+++ b/content/en/docs/apidocs-mxsdk/apidocs/studio-pro-11/extensibility-api/web/web-extensions-howtos/dockable-pane-api.md
@@ -6,7 +6,7 @@ url: /apidocs-mxsdk/apidocs/web-extensibility-api-11/dockable-pane-api/
 
 ## Introduction
 
-This guide explains how to create and manage a dockable pane using the web extensions API. A Dockable pane allows you to create a web view that can be docked and moved within the Studio Pro user interface. Examples of dockable panes in Studio Pro are:
+This how-to describes how to create and manage a dockable pane using the web extensions API. A dockable pane allows you to create a web view that can be docked and moved within the Studio Pro user interface. Examples of dockable panes in Studio Pro are:
 
 * Marketplace
 * Errors 
@@ -15,11 +15,13 @@ This guide explains how to create and manage a dockable pane using the web exten
 
 ## Prerequisites
 
-This guide uses the app created in [Get Started with the Web Extensibility API](/apidocs-mxsdk/apidocs/web-extensibility-api-11/getting-started/). Please complete that how-to before starting this one.
+This how-to uses the app created in [Get Started with the Web Extensibility API](/apidocs-mxsdk/apidocs/web-extensibility-api-11/getting-started/). Make sure to complete that how-to before starting this one.
 
 ## Creating a Dockable Pane
 
-To open a dockable pane you must first register the dockable pane handle with the API. To do this, add a call to register the pane to the extension loaded method in the `src/main/index.ts`.
+### Register the Dockable Pane
+
+To open a dockable pane, you must first register the dockable pane handle with the API. To do this, add a call to register the pane to the extension loaded method in the `src/main/index.ts`. Use the 'paneHandle' to interact with the pane.
 
 ```typescript
         const paneHandle = await studioPro.ui.panes.register(
@@ -33,9 +35,7 @@ To open a dockable pane you must first register the dockable pane handle with th
             });
 ```
 
-Use the 'paneHandle' you registered to interact with the dockable pane.
-
-After adding this call the `loaded()` method looks like this:
+After adding this call, the `loaded()` method looks like this:
 
 ```typescript {hl_lines=["12-20"]}
     async loaded(componentContext) {
@@ -79,11 +79,11 @@ After adding this call the `loaded()` method looks like this:
     }
 ```
 
-## Adding a Menu To Open the Dockable Pane
+### Adding a Menu To Open the Dockable Pane
 
-You will now add a menu that will open the pane when it is selected.
+Add a menu that will open the pane when it is selected.
 
-1. Add a new submenu to the existing `extensionsMenu.add()` method on line 7.
+1. Add a new sub-menu to the existing `extensionsMenu.add()` method on line 7.
 
     ```typescript {linenos=table linenostart=6}
     // Add a menu item to the Extensions menu
@@ -97,7 +97,7 @@ You will now add a menu that will open the pane when it is selected.
     });
     ```
 
-1. Add lines to the `addEventListener()` call to handle opening the dockable pane once the menu has been selected, as follows:
+2. Add lines to the `addEventListener()` call that will open the pane when the menu is selected.
 
     ```typescript
         // Open a tab when the menu item is clicked
@@ -174,17 +174,16 @@ Your `loaded()` method should now look like this:
 
 ### Adding New Endpoint Handlers
 
-You must now create a new web view endpoint where the user interface to be rendered within the pane is defined. You can use the existing endpoint and rename it to something more appropriate.
+Create a new web view endpoint where you define the user interface that will be rendered within the pane. You can use and rename the existing endpoint. Follow the steps below:
 
-1. Rename `ui/index.tsx` to `ui/tab.tsx`
-1. Add the new endpoint file, `ui/dockablepane.tsx` by copying `ui/tab.tsx`.
+1. Rename `ui/index.tsx` to `ui/tab.tsx`.
+1. Add the new endpoint file, `ui/dockablepane.tsx`, by copying `ui/tab.tsx`.
 
-You must also alter the `build-extension.mjs` and `manifest.json` files to make sure the new endpoint is built and bound to a name referenced in `uiEntrypoint` property in extensibility APIs, as described in the following sections:
+You must also alter the `build-extension.mjs` and `manifest.json` files to bind to the correct endpoint, as described in the following sections.
 
 ### Altering `build-extension.mjs`
 
-To instruct esbuild to produce JavaScript modules that correspond to `src/ui/tab.tsx` and `src/ui/dockablepane.tsx`,
-change the call to `entryPoints.push` in line 16 as follows:
+Instruct esbuild to produce JavaScript modules that correspond to `src/ui/tab.tsx` and `src/ui/dockablepane.tsx`. To do this, change the call to `entryPoints.push` in line 16:
 
 ```typescript
 entryPoints.push({
@@ -197,7 +196,7 @@ entryPoints.push({
 });
 ```
 
-Your `build-extension.mjs` file should be like this (note that the variable `appDir` should retain its previous value):
+The variable `appDir` should retain its previous value. Your `build-extension.mjs` file should look like this:
 
 ```javascript {hl_lines=["16-23"]}
 import * as esbuild from 'esbuild'
@@ -241,14 +240,16 @@ else {
 }
 ```
 
-This makes sure that esbuild will consider these two `.tsx` files as entrypoints and produce JavaScript modules in the 
-`dist` folder, corresponding to the name in `out`.
+This ensures esbuild will consider these two `.tsx` files as entrypoints and produce JavaScript modules in the `dist` folder, corresponding to the name in `out`.
 
 ### Altering `src/manifest.json`
 
-You also need to instruct Studio Pro to load the endpoint that you just created. To do this, modify the manifest file `src/manifest.json`.
+You also must instruct Studio Pro to load the endpoint that you just created. To do this, modify the manifest file `src/manifest.json`.
+
+Alter the "ui" section by:
 
-Alter the "ui" section by changing the `tab` endpoint and adding the `dockablepane` endpoint.
+* Changing the `tab` endpoint 
+* Adding the `dockablepane` endpoint
 
 ```typescript
       "ui": {
@@ -275,43 +276,43 @@ The `manifest.json` file should now look like this:
 
 ## Closing the Dockable Pane
 
-Now that you have registered a pane and can open it, you can also close it.
+Now that you have registered a pane and created a way to open it, it is important to provide a way to close it, too.
 
-You will close your pane using a new menu item.
+You will close your pane using a new menu item. Follow the steps below:
 
-First, add a new sub menu item to the menu on line 13.
+1. Add a new sub-menu item to the menu on line 13.
 
-```typescript {linenos=table linenostart=13}
-                { menuId: "myextension.HideDockMenuItem", caption: "Hide dock pane" },
-```
+    ```typescript {linenos=table linenostart=13}
+                    { menuId: "myextension.HideDockMenuItem", caption: "Hide dock pane" },
+    ```
 
-You must also alter the event handler for the new menu at the end of the loaded method:
+2. Alter the event handler for the new menu at the end of the loaded method.
 
-```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",
-                        }
-                    );
-                }
-                else if (args.menuId === "myextension.ShowDockMenuItem") {
-                    studioPro.ui.panes.open(paneHandle);
-                }
-                else if (args.menuId === "myextension.HideDockMenuItem") {
-                    studioPro.ui.panes.close(paneHandle);
+    ```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",
+                            }
+                        );
+                    }
+                    else if (args.menuId === "myextension.ShowDockMenuItem") {
+                        studioPro.ui.panes.open(paneHandle);
+                    }
+                    else if (args.menuId === "myextension.HideDockMenuItem") {
+                        studioPro.ui.panes.close(paneHandle);
+                    }
                 }
-            }
-        );
-```
+            );
+    ```
 
 The `loaded` method should now look like this:
 
@@ -365,13 +366,8 @@ The `loaded` method should now look like this:
     }
 ```
 
-## Conclusion
-
-You now have a new dockable pane with its own user interface which you can modify as you like.
-You can also open and close the dockable pane from a menu.
-
 ## Extensibility Feedback
 
-If you would like to provide us with some additional feedback you can complete a small [Survey](https://survey.alchemer.eu/s3/90801191/Extensibility-Feedback)
+If you would like to provide additional feedback, you can complete a small [survey](https://survey.alchemer.eu/s3/90801191/Extensibility-Feedback)
 
-Any feedback is much appreciated.
+Any feedback is appreciated.

From 3a27cd501b42a86368a819fece1862d9cc770ba6 Mon Sep 17 00:00:00 2001
From: quinntracy <quinn.tracy@mendix.com>
Date: Thu, 16 Oct 2025 12:18:52 +0200
Subject: [PATCH 08/14] Review Documents API

---
 .../web/web-extensions-howtos/documents-api.md   | 16 +++++++++++-----
 1 file changed, 11 insertions(+), 5 deletions(-)

diff --git a/content/en/docs/apidocs-mxsdk/apidocs/studio-pro-11/extensibility-api/web/web-extensions-howtos/documents-api.md b/content/en/docs/apidocs-mxsdk/apidocs/studio-pro-11/extensibility-api/web/web-extensions-howtos/documents-api.md
index fcea5520e32..80cd821524e 100644
--- a/content/en/docs/apidocs-mxsdk/apidocs/studio-pro-11/extensibility-api/web/web-extensions-howtos/documents-api.md
+++ b/content/en/docs/apidocs-mxsdk/apidocs/studio-pro-11/extensibility-api/web/web-extensions-howtos/documents-api.md
@@ -6,7 +6,7 @@ url: /apidocs-mxsdk/apidocs/web-extensibility-api-11/documents-api/
 
 ## Introduction
 
-This how-to describes how to create context menus for a document editor that execute previously registered commands.
+This how-to describes how to create context menus for a document editor that execute previously registered commands. In the example below, you create a menu which is shown for each entity in the domain model of Studio Pro.
 
 ## Prerequisites
 
@@ -17,9 +17,15 @@ Before starting this how-to, make sure you have completed the following prerequi
 
 ## Creating a Context Menu
 
-In the example below, you create a menu which is shown for each entity in the Domain model editor of Studio Pro. In order to specify which type of document a menu should belong to, you need to use the full name of the document type, i.e. `DomainModels$Entity` for entities, `DomainModels$Annotation` for annotations, or  `DomainModels$DomainModel` for the editor canvas itself. For more information on these document types, see [Access a Mendix Model Using Web API](/apidocs-mxsdk/apidocs/web-extensibility-api-11/model-api/).
+{{% alert color="info" %}}
+Use the full name of the document type (for example, `DomainModels$Entity` for entities, `DomainModels$Annotation` for annotations, or  `DomainModels$DomainModel` for the editor canvas itself). For more information about these document type names, see [Access a Mendix Model Using Web API](/apidocs-mxsdk/apidocs/web-extensibility-api-11/model-api/).
+{{% /alert %}}
+
+The code below does the following:
 
-First, a command must be registered through the [Commands API](/apidocs-mxsdk/apidocs/web-extensibility-api-11/command-api/), then the `commandId` can be attached to the new menu. Afterwards, using the `documents` API's `addContextMenu` method, the menu can be added to an entity inside the Domain model editor.
+1. Registers a command through the [Commands API](/apidocs-mxsdk/apidocs/web-extensibility-api-11/command-api/)
+2. Attaches the `commandId` to the new menu
+3. Uses the `documents` API's `addContextMenu` method to add the menu to an entity inside the domain model editor
 
 ```typescript
 import { ComponentContext, IComponent, Menu, StudioProApi, getStudioProApi } from "@mendix/extensions-api";
@@ -56,6 +62,6 @@ The command must be registered before creating the menu.
 
 ## Extensibility Feedback
 
-If you would like to provide us with some additional feedback, please complete a short [survey](https://survey.alchemer.eu/s3/90801191/Extensibility-Feedback)
+If you would like to provide additional feedback, you can complete a short [survey](https://survey.alchemer.eu/s3/90801191/Extensibility-Feedback).
 
-Any feedback is much appreciated.
+Any feedback is appreciated.

From 8261f25f658bd86e6a0833a66920b6419ca33fbb Mon Sep 17 00:00:00 2001
From: quinntracy <quinn.tracy@mendix.com>
Date: Thu, 16 Oct 2025 12:36:03 +0200
Subject: [PATCH 09/14] Review Editor and Local app files API

---
 .../web/web-extensions-howtos/editor-api.md   |  9 +++--
 .../local-app-files-api.md                    | 39 +++++++++----------
 2 files changed, 25 insertions(+), 23 deletions(-)

diff --git a/content/en/docs/apidocs-mxsdk/apidocs/studio-pro-11/extensibility-api/web/web-extensions-howtos/editor-api.md b/content/en/docs/apidocs-mxsdk/apidocs/studio-pro-11/extensibility-api/web/web-extensions-howtos/editor-api.md
index d26ae828ba0..f369f3d43e3 100644
--- a/content/en/docs/apidocs-mxsdk/apidocs/studio-pro-11/extensibility-api/web/web-extensions-howtos/editor-api.md
+++ b/content/en/docs/apidocs-mxsdk/apidocs/studio-pro-11/extensibility-api/web/web-extensions-howtos/editor-api.md
@@ -10,11 +10,14 @@ This how-to describes how to open an existing document editor in Studio Pro from
 
 ## Prerequisites
 
-This how-to uses the results of [Get Started with the Web Extensibility API](/apidocs-mxsdk/apidocs/web-extensibility-api-11/getting-started/). 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](/apidocs-mxsdk/apidocs/web-extensibility-api-11/menu-api/).
+Before starting this how-to, make sure you have completed the following prerequisites:
+
+* This how-to uses the results of [Get Started with the Web Extensibility API](/apidocs-mxsdk/apidocs/web-extensibility-api-11/getting-started/). Complete that how-to before starting this one.
+* Make sure you are familiar with creating menus as described in [Create a Menu Using Web API](/apidocs-mxsdk/apidocs/web-extensibility-api-11/menu-api/).
 
 ## Opening a Document Editor
 
-First, create a menu item. This is done inside the `loaded` method in the main entry point (`src/main/index.ts`). For more information, see [Create a Menu Using Web API](/apidocs-mxsdk/apidocs/web-extensibility-api-11/menu-api/).
+Create a menu item following the steps in [Create a Menu Using Web API](/apidocs-mxsdk/apidocs/web-extensibility-api-11/menu-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](/apidocs-mxsdk/apidocs/web-extensibility-api-11/model-api/).
 
@@ -90,6 +93,6 @@ studioPro.ui.extensionsMenu.addEventListener("menuItemActivated", async args =>
 
 ## Extensibility Feedback
 
-If you would like to provide us with additional feedback, you can complete a small [survey](https://survey.alchemer.eu/s3/90801191/Extensibility-Feedback).
+If you would like to provide additional feedback, you can complete a small [survey](https://survey.alchemer.eu/s3/90801191/Extensibility-Feedback).
 
 Any feedback is appreciated.
diff --git a/content/en/docs/apidocs-mxsdk/apidocs/studio-pro-11/extensibility-api/web/web-extensions-howtos/local-app-files-api.md b/content/en/docs/apidocs-mxsdk/apidocs/studio-pro-11/extensibility-api/web/web-extensions-howtos/local-app-files-api.md
index dcab49761ed..c44a5f8f097 100644
--- a/content/en/docs/apidocs-mxsdk/apidocs/studio-pro-11/extensibility-api/web/web-extensions-howtos/local-app-files-api.md
+++ b/content/en/docs/apidocs-mxsdk/apidocs/studio-pro-11/extensibility-api/web/web-extensions-howtos/local-app-files-api.md
@@ -6,18 +6,21 @@ url: /apidocs-mxsdk/apidocs/web-extensibility-api-11/local-app-files-api/
 
 ## Introduction
 
-This how-to shows you how to interact with local application files from within an extension. It adds three new buttons to the tab and three new event handlers for saving, loading, and deleting a file called `HelloWorld.txt`.
+This how-to describes how to interact with local application files from within an extension. In this example, you will:
+
+* Add three new buttons to a tab
+* Add three new event handlers for saving, loading, and deleting a file called `HelloWorld.txt`
 
 ## Prerequisites
 
-This how-to uses the results of [Get Started with the Web Extensibility API](/apidocs-mxsdk/apidocs/web-extensibility-api-11/getting-started/). Please complete that how-to before starting this one.
+This how-to uses the results of [Get Started with the Web Extensibility API](/apidocs-mxsdk/apidocs/web-extensibility-api-11/getting-started/). Make sure to complete that how-to before starting this one.
 
-## Adding Some Interactivity
+## Adding Interactivity
 
-First, you will add all the code. The changes will then be explained so that you can understand what the code does.
+Implement the code described in the [Code Descriptions](#code-descriptions) section by following the steps below:
 
 1. Open `src/ui/index.tsx`.
-1. Replace the contents of the file with the following code:
+2. Replace the contents of the file with the following code:
 
 ```typescript
 import React, { StrictMode } from "react";
@@ -64,13 +67,13 @@ export const component: IComponent = {
 };
 ```
 
-## What Does the Code Do?
+## Code Descriptions {code-descriptions}
 
 The following sections explain the various parts of the code.
 
 ### saveFile
 
-The `saveFile` callback calls the `putFile` API setting the filename to `HelloWorld.txt` and the content to `Hello world from a file!`.
+The `saveFile` callback calls the `putFile` API. It sets the file name to `HelloWorld.txt` and the content to `Hello world from a file!`.
 
 ```typescript
 const saveFile = async () => {
@@ -84,7 +87,7 @@ const saveFile = async () => {
 
 ### loadFile
 
-The loadFile callback calls the getFile API requesting to load `HelloWorld.txt`. It then shows message box displaying the content of the file.
+The `loadFile` callback calls the `getFile` API. It requests to load `HelloWorld.txt`, then shows a message box that displays the content of the file.
 
 ```typescript
 const loadFile = async () => {
@@ -98,7 +101,7 @@ const loadFile = async () => {
 
 ### deleteFile
 
-The deleteFile callback calls the deleteFile API requesting to delete `HelloWorld.txt`
+The `deleteFile` callback calls the `deleteFile` API. It requests to delete `HelloWorld.txt`.
 
 ```typescript
 const deleteFile = async () => {
@@ -107,7 +110,7 @@ const deleteFile = async () => {
 };
 ```
 
-### Adding the Buttons
+### Adding Buttons
 
 The final part of the code adds three new buttons which, when clicked, call the callbacks described above.
 
@@ -125,19 +128,15 @@ createRoot(document.getElementById("root")!).render(
 );
 ```
 
-## Some Restrictions
-
-The App files API allows you to modify files within your application's folder. It will not:
-
-* serve restricted files such as the `.mpr` file or the contents of some folders such as the `.git` folder.
-* allow access to files outside of the app folder.
+## Restrictions
 
-## Conclusion
+The app files API allows you to modify files within your application's folder. It will not:
 
-You can now create and extension which save, load, and delete files within the app folder.
+* Serve restricted files such as the `.mpr` file, or the contents of some folders, such as the `.git` folder
+* Allow access to files outside of the app folder
 
 ## Extensibility Feedback
 
-If you would like to provide us with some additional feedback you can complete a small [Survey](https://survey.alchemer.eu/s3/90801191/Extensibility-Feedback)
+If you would like to provide additional feedback, you can complete a small [survey](https://survey.alchemer.eu/s3/90801191/Extensibility-Feedback).
 
-Any feedback is much appreciated.
+Any feedback is appreciated.

From be0b83a4e371f6d4f7d9be97dbb51d6c505d6dc6 Mon Sep 17 00:00:00 2001
From: quinntracy <quinn.tracy@mendix.com>
Date: Thu, 16 Oct 2025 12:59:07 +0200
Subject: [PATCH 10/14] Fix alert box

---
 .../web/web-extensions-howtos/app-explorer-api.md                | 1 +
 1 file changed, 1 insertion(+)

diff --git a/content/en/docs/apidocs-mxsdk/apidocs/studio-pro-11/extensibility-api/web/web-extensions-howtos/app-explorer-api.md b/content/en/docs/apidocs-mxsdk/apidocs/studio-pro-11/extensibility-api/web/web-extensions-howtos/app-explorer-api.md
index c1fb1f2b64d..e8314597cd6 100644
--- a/content/en/docs/apidocs-mxsdk/apidocs/studio-pro-11/extensibility-api/web/web-extensions-howtos/app-explorer-api.md
+++ b/content/en/docs/apidocs-mxsdk/apidocs/studio-pro-11/extensibility-api/web/web-extensions-howtos/app-explorer-api.md
@@ -19,6 +19,7 @@ Before starting this how-to, make sure you have completed the following prerequi
 
 {{% alert color="info" %}}
 Use the full name of the document type to specify which type of document a menu should belong to (for example, `Microflows$Microflow` for microflows or `Pages$Page` for pages). For more information about these document type names, see [Access a Mendix Model Using Web API](/apidocs-mxsdk/apidocs/web-extensibility-api-11/model-api/).
+{{% /alert %}}
 
 The code below does the following:
 

From d0a9d09263b21ec652bfc977ad9c9dd081b7d1c2 Mon Sep 17 00:00:00 2001
From: quinntracy <quinn.tracy@mendix.com>
Date: Thu, 16 Oct 2025 13:19:49 +0200
Subject: [PATCH 11/14] Review Model and Messagebox API

---
 .../web-extensions-howtos/messagebox-api.md   | 34 +++++--------------
 .../web/web-extensions-howtos/model-api.md    | 25 +++++---------
 2 files changed, 18 insertions(+), 41 deletions(-)

diff --git a/content/en/docs/apidocs-mxsdk/apidocs/studio-pro-11/extensibility-api/web/web-extensions-howtos/messagebox-api.md b/content/en/docs/apidocs-mxsdk/apidocs/studio-pro-11/extensibility-api/web/web-extensions-howtos/messagebox-api.md
index ee5ea44b793..719b792b84c 100644
--- a/content/en/docs/apidocs-mxsdk/apidocs/studio-pro-11/extensibility-api/web/web-extensions-howtos/messagebox-api.md
+++ b/content/en/docs/apidocs-mxsdk/apidocs/studio-pro-11/extensibility-api/web/web-extensions-howtos/messagebox-api.md
@@ -6,35 +6,23 @@ url: /apidocs-mxsdk/apidocs/web-extensibility-api-11/messagebox-api/
 
 ## Introduction
 
-This how-to shows you how to show a message box to the Studio Pro user.
+This how-to describes how to show a message box to a user. In this example, you will create three menu items that will display a dialog with text.
 
 ## Prerequisites
 
-This how-to uses the results of [Get Started with the Web Extensibility API](/apidocs-mxsdk/apidocs/web-extensibility-api-11/getting-started/). Please complete that how-to before starting this one.
+This how-to uses the results of [Get Started with the Web Extensibility API](/apidocs-mxsdk/apidocs/web-extensibility-api-11/getting-started/). Make sure to complete that how-to before starting this one.
 
 ## Showing a Message Box
 
-First, create a menu which will display a dialog with text. This is done in the `loaded` method of your main entry point (`src/main/index.ts`)
+Create a menu that will display a dialog with text. This is done in the `loaded` method of your main entry point (`src/main/index.ts`). For more information on how to do this, see [Create a Menu Using Web API](/apidocs-mxsdk/apidocs/web-extensibility-api-11/menu-api/).
 
-You can learn how to do that in [Create a Menu Using Web API](/apidocs-mxsdk/apidocs/web-extensibility-api-11/menu-api/).
-
-In this example you create three menu items:
-
-* Show Info
-* Show Error
-* Show Warning
-
-You then need to add event listeners to receive and act upon the notifications generated by the menu items. Here the listener events show a different message box, depending on which menu item is selected. The message has the following format:
-
-`messageBoxApi.show(<message-type>, <message>, <message-details>)`
-
-where
+Add event listeners to receive and act upon the notifications generated by the menu items. The listener events show a different message box, depending on which menu item is selected. The message has the format `messageBoxApi.show(<message-type>, <message>, <message-details>)`, where:
 
 * `<message-type>` is the type of message, indicated in the pane title and indicated by an icon. Values are "information" {{% icon name="info-circle" color="blue" %}}, "warning" {{% icon name="alert-triangle" color="yellow" %}}, and "error" {{% icon name="remove-circle" color="red" %}}.
 * `<message>` is the message to display.
-* `<message-details>` is an optional extended message which is displayed in an expandable area which is initially collapsed.  
+* `<message-details>` is an optional extended message which is displayed in an expandable area that is initially collapsed.  
 
-The full TypeScript file (`src/main/index.ts`) to implement these three menu items and message boxes is as follows.
+The full TypeScript file (`src/main/index.ts`) to implement these three menu items and message boxes is as follows:
 
 ```typescript
 import { IComponent, Menu, getStudioProApi } from "@mendix/extensions-api";
@@ -85,16 +73,12 @@ export const component: IComponent = {
 }
 ```
 
-For example, the **Show Info** menu item will display the following message box.
+For example, the **Show Info** menu item displays the following message box.
 
 {{< figure src="/attachments/apidocs-mxsdk/apidocs/extensibility-api/web/messageBoxes/info.png" >}}
 
-## Conclusion
-
-You have seen how to implement message boxes triggered by menu items.
-
 ## Extensibility Feedback
 
-If you would like to provide us with some additional feedback you can complete a small [Survey](https://survey.alchemer.eu/s3/90801191/Extensibility-Feedback)
+If you would like to provide additional feedback, you can complete a small [survey](https://survey.alchemer.eu/s3/90801191/Extensibility-Feedback)
 
-Any feedback is much appreciated.
+Any feedback is appreciated.
diff --git a/content/en/docs/apidocs-mxsdk/apidocs/studio-pro-11/extensibility-api/web/web-extensions-howtos/model-api.md b/content/en/docs/apidocs-mxsdk/apidocs/studio-pro-11/extensibility-api/web/web-extensions-howtos/model-api.md
index 0433813a412..75d9e97adf4 100644
--- a/content/en/docs/apidocs-mxsdk/apidocs/studio-pro-11/extensibility-api/web/web-extensions-howtos/model-api.md
+++ b/content/en/docs/apidocs-mxsdk/apidocs/studio-pro-11/extensibility-api/web/web-extensions-howtos/model-api.md
@@ -6,12 +6,7 @@ url: /apidocs-mxsdk/apidocs/web-extensibility-api-11/model-api/
 
 ## Introduction 
 
-The Model Access API allow access to the Mendix model. This how-to provides guidance on using the Model Access API. It is split into the following sections:
-
-* [Using the Model Access API](#using-api)
-* [Reading the Units Info and Loading Units](#units-info-load)
-* [Reading the Unit Content](#read)
-* [Modifying the Unit Content](#modify)
+This how-to describes how to use the Model Access API, which allows access to the Mendix model.
 
 ## Using the Model Access API {#using-api}
 
@@ -25,7 +20,7 @@ The model is split in several components exposed via `studioPro.app.model` objec
 
 You can include these components using syntax as shown below, which includes pages and domain models.
 
-In the following, it is assumed you obtained the `studioPro` object by calling the factory function `getStudioProApi`, as in other tutorials. 
+In the following example, it is assumed you obtained the `studioPro` object by calling the factory function `getStudioProApi`.
 
 ```ts
 const studioPro = getStudioProApi(componentContext);
@@ -34,7 +29,7 @@ const { pages, domainModels } = studioPro.app.model;
 
 ## Reading the Units Info and Loading Units {#units-info-load}
 
-A unit is a Mendix document (for example, a page or a domain model) containing elements. Each element is within a container element and may contain other elements. An element is part of a Mendix model and all elements together form the logic of the model. For more information see [Mendix Metamodel](/apidocs-mxsdk/mxsdk/mendix-metamodel/).
+A unit is a Mendix document (for example, a page or a domain model) containing elements. Each element resides within a container element and can itself contain other elements. Together, these elements form the logic of a Mendix model. For more information, see [Mendix Metamodel](/apidocs-mxsdk/mxsdk/mendix-metamodel/).
 
 Each component, for example pages (`studioPro.app.model.pages`) exposes the units it is responsible for. You can only access all the content of a unit once you have loaded the unit info for that unit.
 
@@ -53,19 +48,21 @@ For example, you can retrieve all the units managed by the `domainModels` compon
 const unitsInfo: Primitives.UnitInfo[] = await domainModels.getUnitsInfo()
 ```
 
-A unit can be loaded by supplying a function, `fn` to `component.loadAll(fn)`. The function `fn` should return `true`  to load a specified unit.
+A unit can be loaded by supplying a function, `fn` to `component.loadAll(fn)`. The function `fn` should return `true` to load a specified unit.
 
 {{% alert color="warning" %}}
 Loading units is a resource intensive process. Only load units when you need them.
 {{% /alert %}}
 
-For example, the following snippet loads the `domainModel` for the module named `MyFirstModule`:
+### Examples 
+
+The following code loads the `domainModel` for the module named `MyFirstModule`:
 
 ```ts
 const [domainModel] = await domainModels.loadAll((info: Primitives.UnitInfo) => info.moduleName === 'MyFirstModule');
 ```
 
-And this example snippet loads the page named `Home_Web` in the module named `MyFirstModule`:
+The next snippet loads the page `Home_Web` in the module `MyFirstModule`:
 
 ```ts
 const [page] = await pages.loadAll((info: Primitives.UnitInfo) => info.moduleName === 'MyFirstModule' && info.name === 'Home_Web')
@@ -99,12 +96,8 @@ newEntity.documentation = "New documentation";
 await domainModels.save(domainModel);
 ```
 
-## Conclusion
-
-You now know how to interact with units and elements in the Mendix model.
-
 ## Extensibility Feedback
 
-If you would like to provide us with some additional feedback you can complete a small [Survey](https://survey.alchemer.eu/s3/90801191/Extensibility-Feedback)
+If you would like to provide additional feedback, you can complete a small [survey](https://survey.alchemer.eu/s3/90801191/Extensibility-Feedback).
 
 Any feedback is much appreciated.

From 56d3c51de970b3f0abcdb843379833b287b8d6bf Mon Sep 17 00:00:00 2001
From: quinntracy <quinn.tracy@mendix.com>
Date: Thu, 16 Oct 2025 13:31:45 +0200
Subject: [PATCH 12/14] Review last APIs

---
 .../web-extensions-howtos/notification-api.md |  4 +-
 .../web-extensions-howtos/preference-api.md   | 10 ++--
 .../web/web-extensions-howtos/tab-api.md      | 49 +++++++++----------
 .../version-control-api.md                    |  2 +-
 4 files changed, 30 insertions(+), 35 deletions(-)

diff --git a/content/en/docs/apidocs-mxsdk/apidocs/studio-pro-11/extensibility-api/web/web-extensions-howtos/notification-api.md b/content/en/docs/apidocs-mxsdk/apidocs/studio-pro-11/extensibility-api/web/web-extensions-howtos/notification-api.md
index 34efae031d1..69c292fffe0 100644
--- a/content/en/docs/apidocs-mxsdk/apidocs/studio-pro-11/extensibility-api/web/web-extensions-howtos/notification-api.md
+++ b/content/en/docs/apidocs-mxsdk/apidocs/studio-pro-11/extensibility-api/web/web-extensions-howtos/notification-api.md
@@ -10,7 +10,7 @@ This how-to describes how to show a simple pop-up notification in Studio Pro.
 
 ## Prerequisites
 
-This guide uses the results of [Get Started with the Web Extensibility API](/apidocs-mxsdk/apidocs/web-extensibility-api-11/getting-started/). Please complete that how-to before starting this one.
+This how-to uses the results of [Get Started with the Web Extensibility API](/apidocs-mxsdk/apidocs/web-extensibility-api-11/getting-started/). Make sure to complete that how-to before starting this one.
 
 ## Showing a Notification
 
@@ -76,6 +76,6 @@ The show method has the following parameters:
 
 ## Extensibility Feedback
 
-If you would like to provide us additional feedback, you can complete a small [survey](https://survey.alchemer.eu/s3/90801191/Extensibility-Feedback).
+If you would like to provide additional feedback, you can complete a small [survey](https://survey.alchemer.eu/s3/90801191/Extensibility-Feedback).
 
 Any feedback is appreciated.
diff --git a/content/en/docs/apidocs-mxsdk/apidocs/studio-pro-11/extensibility-api/web/web-extensions-howtos/preference-api.md b/content/en/docs/apidocs-mxsdk/apidocs/studio-pro-11/extensibility-api/web/web-extensions-howtos/preference-api.md
index 1b69a5bc476..d10e10707db 100644
--- a/content/en/docs/apidocs-mxsdk/apidocs/studio-pro-11/extensibility-api/web/web-extensions-howtos/preference-api.md
+++ b/content/en/docs/apidocs-mxsdk/apidocs/studio-pro-11/extensibility-api/web/web-extensions-howtos/preference-api.md
@@ -10,14 +10,14 @@ This how-to describes how to create a simple menu that shows the user's preferen
 
 ## Prerequisites
 
-Before starting this how-to, ensure you have:
+Before starting this how-to, make sure you have completed the following prerequisites:
 
-1. Completed the steps in [Get Started with the Web Extensibility API](/apidocs-mxsdk/apidocs/web-extensibility-api-11/getting-started/).
-2. Become familiar with creating menus as described in [Create a Menu Using Web API](/apidocs-mxsdk/apidocs/web-extensibility-api-11/menu-api/) and message boxes as described in [Show a Message Box Using Web API](/apidocs-mxsdk/apidocs/web-extensibility-api-11/messagebox-api/).
+* This how-to uses the results of [Get Started with the Web Extensibility API](/apidocs-mxsdk/apidocs/web-extensibility-api-11/getting-started/). Complete that how-to before starting this one.
+* Make sure you are familiar with creating menus as described in [Create a Menu Using Web API](/apidocs-mxsdk/apidocs/web-extensibility-api-11/menu-api/) and message boxes as described in [Show a Message Box Using Web API](/apidocs-mxsdk/apidocs/web-extensibility-api-11/messagebox-api/).
 
 ## Set Up the Extension Structure 
 
-Create a menu that will display a dialog with text. This is done in the `loaded` method in the main entry point (`src/main/index.ts`). This can be done by following the steps in [Create a Menu Using Web API](/apidocs-mxsdk/apidocs/web-extensibility-api-11/menu-api/).
+Create a menu that will display a dialog with text in the `loaded` method in the main entry point (`src/main/index.ts`). This can be done by following the steps in [Create a Menu Using Web API](/apidocs-mxsdk/apidocs/web-extensibility-api-11/menu-api/).
 
 In the example below, you create one menu item that will show a message box.
 
@@ -88,7 +88,7 @@ Import the preferences API and use it to fetch the user’s preferences.
     ```
 
 {{% alert color="info" %}}
-Note that the function is `async` in order for you to use `await` when fetching the preferences.
+The function is `async` in order for you to use `await` when fetching the preferences.
 {{% /alert %}}
 
 3. Use the fetched preferences to update the text in the message box so you can see the user's current theme and language.
diff --git a/content/en/docs/apidocs-mxsdk/apidocs/studio-pro-11/extensibility-api/web/web-extensions-howtos/tab-api.md b/content/en/docs/apidocs-mxsdk/apidocs/studio-pro-11/extensibility-api/web/web-extensions-howtos/tab-api.md
index d78ebbf1820..271de542d4d 100644
--- a/content/en/docs/apidocs-mxsdk/apidocs/studio-pro-11/extensibility-api/web/web-extensions-howtos/tab-api.md
+++ b/content/en/docs/apidocs-mxsdk/apidocs/studio-pro-11/extensibility-api/web/web-extensions-howtos/tab-api.md
@@ -6,29 +6,32 @@ url: /apidocs-mxsdk/apidocs/web-extensibility-api-11/tab-api/
 
 ## Introduction
 
-This how-to shows you how to open a tab in Studio Pro from an extension. This tab will contain your web content.
+This how-to describes how to open a tab in Studio Pro from an extension. This tab will contain your web content.
 
 ## Prerequisites
 
-This how-to uses the results of [Get Started with the Web Extensibility API](/apidocs-mxsdk/apidocs/web-extensibility-api-11/getting-started/). Please 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](/apidocs-mxsdk/apidocs/web-extensibility-api-11/menu-api/).
+Before starting this how-to, make sure you have completed the following prerequisites:
+
+* This how-to uses the results of [Get Started with the Web Extensibility API](/apidocs-mxsdk/apidocs/web-extensibility-api-11/getting-started/). Complete that how-to before starting this one. 
+* Make sure you are familiar with creating menus as described in [Create a Menu Using Web API](/apidocs-mxsdk/apidocs/web-extensibility-api-11/menu-api/).
 
 ## Opening a Tab
 
-First, create a menu item to open the tab. This is done inside the `loaded` method in `Main` class, as described below. For more information see [Create a Menu Using Web API](/apidocs-mxsdk/apidocs/web-extensibility-api-11/menu-api/).
+Create a menu item to open the tab. This is done inside the `loaded` method in `Main` class, as described below. For more information, see [Create a Menu Using Web API](/apidocs-mxsdk/apidocs/web-extensibility-api-11/menu-api/).
 
 In a listener event called `menuItemActivated` the `studioPro.ui.tabs.open(<tabinfo>, <uispec>)` call opens a new tab where:
 
 * `<TabInfo>` is an object containing the `title` of the tab, which will be shown in the title bar of your tab in Studio Pro.
 * `<uispec>` is an object containing two required properties:
 
-    * `componentName` which is the name of the extension prefixed with "extension/". For example "extension/myextension" in the following example.
-    * `uiEntryPoint` which is the name mapped from the `manifest.json` file. See below for examples with multiple tabs.
+    * `componentName` – the name of the extension prefixed with "extension/"; for example, "extension/myextension" in the following example
+    * `uiEntryPoint` – the name mapped from the `manifest.json` file
 
 {{% alert color="info" %}}
 Whenever the tabs API `open` method is called, the `TabHandle` returned must be tracked by the extension so that it can be closed later by calling the `close` method.
 {{% /alert %}}
 
-To open a tab called **My Extension Tab**, add the following code to the main entry point (`src/main/index.ts`)
+To open a tab called **My Extension Tab**, add the following code to the main entry point (`src/main/index.ts`):
 
 ```typescript
 import { IComponent, getStudioProApi, TabHandle, ComponentContext } from "@mendix/extensions-api";
@@ -83,17 +86,14 @@ export const component: IComponent = new Main();
 ```
 
 {{% alert color="info" %}}
-
- In this example, there is a dictionary that uses the parent menu id as the key to track the open `TabHandle`.
+In this example, there is a dictionary that uses the parent menu id as the key to track the open `TabHandle`.
 {{% /alert %}}
 
 ## Filling the Tabs With Content
 
-In the previous example, the `uiEntryPoint` property of the `<uispec>` object had the value "tab". This value must match the one from the manifest.
-
-If you want to have multiple tabs in your extension, you need to structure the folders and set up the manifest file correctly.
+In the previous example, the `uiEntryPoint` property of the `<uispec>` object had the value `tab`. This value must match the one from the manifest.
 
-To do this, follow these steps:
+If you want multiple tabs in your extension, you need to structure the folders and set up the manifest file correctly. To do this, follow these steps:
 
 1. Add a new method `createTabSpec` in your `Main` class.
 
@@ -109,9 +109,9 @@ To do this, follow these steps:
         }
     ```
 
-1. Add three folders inside the `ui` folder, one for each tab you want to display contents for.
-1. Create an `index.tsx` file in each folder.
-1. Put the following code in each `index.tsx` file (this example is for **tab3**):
+2. Add three folders inside the `ui` folder, one for each tab you want to display contents for.
+3. Create an `index.tsx` file in each folder.
+4. Put the following code in each `index.tsx` file (this example is for **tab3**):
 
     ```typescript
     import React, { StrictMode } from "react";
@@ -129,11 +129,11 @@ To do this, follow these steps:
     };
     ```
 
-    In this example, we'll add 3 tabs: **tab1**, **tab2**, and **tab3**.
+    In this example, you will add three tabs: **tab1**, **tab2**, and **tab3**.
 
     {{< figure src="/attachments/apidocs-mxsdk/apidocs/extensibility-api/web/tabs/ui_folder_structure.png" >}}
 
-1. Create listener events in the `Main` class to open each of the three tabs. The `Main` class will then look like this:
+5. Create listener events in the `Main` class to open each of the three tabs. The `Main` class will then look like this:
 
     ```typescript
     import { IComponent, getStudioProApi, TabHandle, ComponentContext, TabInfo, UISpec } from "@mendix/extensions-api";
@@ -189,7 +189,7 @@ To do this, follow these steps:
     export const component: IComponent = new Main();
     ```
 
-1. Ensure the tabs are added to the `manifest.json` file. Here is an example of three tabs under the `ui` property.
+6. Ensure the tabs are added to the `manifest.json` file. Below is an example of three tabs under the `ui` property.
 
     ```json
     {
@@ -206,8 +206,7 @@ To do this, follow these steps:
     }
     ```
 
-1. Update `build-extension.mjs` to match the manifest with an entry for each tab. Specifically, you need to add entry points for each tab to
-   `entryPoints` array and make sure the variable `appDir` stays unaltered, as follows:
+7. Update `build-extension.mjs` to match the manifest with an entry for each tab. Add entry points for each tab to the `entryPoints` array and make sure the variable `appDir` stays unaltered, as follows:
 
     ```javascript{hl_lines=["16-20"]}
       import * as esbuild from 'esbuild'
@@ -248,14 +247,10 @@ To do this, follow these steps:
       }
     ```
 
-After building and installing the extension in our Studio Pro app, each tab will display the content specified in the related `index.tsx` file.
-
-## Conclusion
-
-You now know how to create tabs and populate them with content.
+After building and installing the extension in your Studio Pro app, each tab will display the content specified in the related `index.tsx` file.
 
 ## Extensibility Feedback
 
-If you would like to provide us with some additional feedback you can complete a small [Survey](https://survey.alchemer.eu/s3/90801191/Extensibility-Feedback)
+If you would like to provide additional feedback, you can complete a small [survey](https://survey.alchemer.eu/s3/90801191/Extensibility-Feedback).
 
-Any feedback is much appreciated.
+Any feedback is appreciated.
diff --git a/content/en/docs/apidocs-mxsdk/apidocs/studio-pro-11/extensibility-api/web/web-extensions-howtos/version-control-api.md b/content/en/docs/apidocs-mxsdk/apidocs/studio-pro-11/extensibility-api/web/web-extensions-howtos/version-control-api.md
index 2f73698ad15..13df81e0e38 100644
--- a/content/en/docs/apidocs-mxsdk/apidocs/studio-pro-11/extensibility-api/web/web-extensions-howtos/version-control-api.md
+++ b/content/en/docs/apidocs-mxsdk/apidocs/studio-pro-11/extensibility-api/web/web-extensions-howtos/version-control-api.md
@@ -83,6 +83,6 @@ export const component: IComponent = {
 
 ## Extensibility Feedback
 
-If you would like to provide us with additional feedback, you can complete a small [survey](https://survey.alchemer.eu/s3/90801191/Extensibility-Feedback).
+If you would like to provide additional feedback, you can complete a small [survey](https://survey.alchemer.eu/s3/90801191/Extensibility-Feedback).
 
 Any feedback is appreciated.

From 9a21f0e35023e7b2cf721d0bfe4a1c2ee03ddabd Mon Sep 17 00:00:00 2001
From: quinntracy <quinn.tracy@mendix.com>
Date: Thu, 16 Oct 2025 13:34:51 +0200
Subject: [PATCH 13/14] Small fix

---
 .../web/web-extensions-howtos/message-passing-api.md            | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/content/en/docs/apidocs-mxsdk/apidocs/studio-pro-11/extensibility-api/web/web-extensions-howtos/message-passing-api.md b/content/en/docs/apidocs-mxsdk/apidocs/studio-pro-11/extensibility-api/web/web-extensions-howtos/message-passing-api.md
index a6436f625b6..162677e2927 100644
--- a/content/en/docs/apidocs-mxsdk/apidocs/studio-pro-11/extensibility-api/web/web-extensions-howtos/message-passing-api.md
+++ b/content/en/docs/apidocs-mxsdk/apidocs/studio-pro-11/extensibility-api/web/web-extensions-howtos/message-passing-api.md
@@ -304,6 +304,6 @@ view accordingly each time a new message is received.
 
 ## Extensibility Feedback
 
-If you would like to provide us with additional feedback, you can complete a small [survey](https://survey.alchemer.eu/s3/90801191/Extensibility-Feedback).
+If you would like to provide additional feedback, you can complete a small [survey](https://survey.alchemer.eu/s3/90801191/Extensibility-Feedback).
 
 Any feedback is appreciated.

From 829dd291aa2e8db369b10df4a89f3b6fbfe0edc3 Mon Sep 17 00:00:00 2001
From: quinntracy <quinn.tracy@mendix.com>
Date: Thu, 16 Oct 2025 13:41:41 +0200
Subject: [PATCH 14/14] Spacing

---
 .../web-extensions-howtos/documents-api.md    |  36 +--
 .../local-app-files-api.md                    | 206 +++++++++---------
 .../web/web-extensions-howtos/tab-api.md      |   2 +-
 3 files changed, 122 insertions(+), 122 deletions(-)

diff --git a/content/en/docs/apidocs-mxsdk/apidocs/studio-pro-11/extensibility-api/web/web-extensions-howtos/documents-api.md b/content/en/docs/apidocs-mxsdk/apidocs/studio-pro-11/extensibility-api/web/web-extensions-howtos/documents-api.md
index 80cd821524e..be2eb1fd0cc 100644
--- a/content/en/docs/apidocs-mxsdk/apidocs/studio-pro-11/extensibility-api/web/web-extensions-howtos/documents-api.md
+++ b/content/en/docs/apidocs-mxsdk/apidocs/studio-pro-11/extensibility-api/web/web-extensions-howtos/documents-api.md
@@ -27,32 +27,32 @@ The code below does the following:
 2. Attaches the `commandId` to the new menu
 3. Uses the `documents` API's `addContextMenu` method to add the menu to an entity inside the domain model editor
 
-```typescript
-import { ComponentContext, IComponent, Menu, StudioProApi, getStudioProApi } from "@mendix/extensions-api";
+    ```typescript
+    import { ComponentContext, IComponent, Menu, StudioProApi, getStudioProApi } from "@mendix/extensions-api";
 
-const extensionId = "myextension";
+    const extensionId = "myextension";
 
-export const component: IComponent = {
-    async loaded(componentContext: ComponentContext) {
-        const studioPro = getStudioProApi(componentContext);
+    export const component: IComponent = {
+        async loaded(componentContext: ComponentContext) {
+            const studioPro = getStudioProApi(componentContext);
 
-        const commandId = `${extensionId}.entity.command`;
-        const menuId = `${commandId}.menu`;
+            const commandId = `${extensionId}.entity.command`;
+            const menuId = `${commandId}.menu`;
 
-        await studioPro.app.commands.registerCommand<{ documentId: string }>(commandId, async (args: { documentId: string }) => {
-            await studioPro.ui.notifications.show({
-                title: `Entity command executed`,
-                message: `You clicked a context menu for an Entity! (${args.documentId})`,
-                displayDurationInSeconds: 4
+            await studioPro.app.commands.registerCommand<{ documentId: string }>(commandId, async (args: { documentId: string }) => {
+                await studioPro.ui.notifications.show({
+                    title: `Entity command executed`,
+                    message: `You clicked a context menu for an Entity! (${args.documentId})`,
+                    displayDurationInSeconds: 4
+                });
             });
-        });
 
-        const microflowMenu: Menu = { caption: `Entity command menu`, menuId, commandId };
+            const microflowMenu: Menu = { caption: `Entity command menu`, menuId, commandId };
 
-        await studioPro.ui.documents.addContextMenu(microflowMenu, "DomainModels$Entity");
+            await studioPro.ui.documents.addContextMenu(microflowMenu, "DomainModels$Entity");
+        }
     }
-}
-```
+    ```
 
 As you can see from the example above, the expected payload of the command is an object containing a document id (`{ documentId: string }`). Registering the command requires the exact type of the payload, otherwise your extension will not compile. The `documentId` will be the id of the document the menu is attached to, in this case, the exact entity in the Domain Model editor canvas.
 
diff --git a/content/en/docs/apidocs-mxsdk/apidocs/studio-pro-11/extensibility-api/web/web-extensions-howtos/local-app-files-api.md b/content/en/docs/apidocs-mxsdk/apidocs/studio-pro-11/extensibility-api/web/web-extensions-howtos/local-app-files-api.md
index c44a5f8f097..0dabbe13c44 100644
--- a/content/en/docs/apidocs-mxsdk/apidocs/studio-pro-11/extensibility-api/web/web-extensions-howtos/local-app-files-api.md
+++ b/content/en/docs/apidocs-mxsdk/apidocs/studio-pro-11/extensibility-api/web/web-extensions-howtos/local-app-files-api.md
@@ -22,111 +22,111 @@ Implement the code described in the [Code Descriptions](#code-descriptions) sect
 1. Open `src/ui/index.tsx`.
 2. Replace the contents of the file with the following code:
 
-```typescript
-import React, { StrictMode } from "react";
-import { createRoot } from "react-dom/client";
-import { IComponent, getStudioProApi } from "@mendix/extensions-api";
-
-export const component: IComponent = {
-    async loaded(componentContext) {
-        const studioPro = getStudioProApi(componentContext);
-
-        const saveFile = async () => {
-            await studioPro.app.files.putFile(
-                "HelloWorld.txt",
-                "Hello world from a file!"
+    ```typescript
+    import React, { StrictMode } from "react";
+    import { createRoot } from "react-dom/client";
+    import { IComponent, getStudioProApi } from "@mendix/extensions-api";
+
+    export const component: IComponent = {
+        async loaded(componentContext) {
+            const studioPro = getStudioProApi(componentContext);
+
+            const saveFile = async () => {
+                await studioPro.app.files.putFile(
+                    "HelloWorld.txt",
+                    "Hello world from a file!"
+                );
+                studioPro.ui.messageBoxes.show("info", "Saving HelloWorld.txt");
+            };
+
+            const loadFile = async () => {
+                const message = await studioPro.app.files.getFile("HelloWorld.txt");
+                studioPro.ui.messageBoxes.show(
+                    "info",
+                    `Loaded HelloWorld.txt it contained: ${message}`
+                );
+            };
+
+            const deleteFile = async () => {
+                await studioPro.app.files.deleteFile("HelloWorld.txt");
+                studioPro.ui.messageBoxes.show("info", "Deleted HelloWorld.txt");
+            };
+
+            createRoot(document.getElementById("root")!).render(
+                <StrictMode>
+                    <h1>Mendix Studio Pro Extension</h1>
+                    <p>Hello from an extension!</p>
+                    <p>
+                        <button onClick={saveFile}>Save Hello world File</button>
+                        <button onClick={loadFile}>Load Hello world File</button>
+                        <button onClick={deleteFile}>Delete Hello world File</button>
+                    </p>
+                </StrictMode>
             );
-            studioPro.ui.messageBoxes.show("info", "Saving HelloWorld.txt");
-        };
-
-        const loadFile = async () => {
-            const message = await studioPro.app.files.getFile("HelloWorld.txt");
-            studioPro.ui.messageBoxes.show(
-                "info",
-                `Loaded HelloWorld.txt it contained: ${message}`
-            );
-        };
-
-        const deleteFile = async () => {
-            await studioPro.app.files.deleteFile("HelloWorld.txt");
-            studioPro.ui.messageBoxes.show("info", "Deleted HelloWorld.txt");
-        };
-
-        createRoot(document.getElementById("root")!).render(
-            <StrictMode>
-                <h1>Mendix Studio Pro Extension</h1>
-                <p>Hello from an extension!</p>
-                <p>
-                    <button onClick={saveFile}>Save Hello world File</button>
-                    <button onClick={loadFile}>Load Hello world File</button>
-                    <button onClick={deleteFile}>Delete Hello world File</button>
-                </p>
-            </StrictMode>
-        );
-    },
-};
-```
-
-## Code Descriptions {code-descriptions}
-
-The following sections explain the various parts of the code.
-
-### saveFile
-
-The `saveFile` callback calls the `putFile` API. It sets the file name to `HelloWorld.txt` and the content to `Hello world from a file!`.
-
-```typescript
-const saveFile = async () => {
-  await studioPro.app.files.putFile(
-    "HelloWorld.txt",
-    "Hello world from a file!"
-  );
-  studioPro.ui.messageBoxes.show("info", "Saving HelloWorld.txt");
-};
-```
-
-### loadFile
-
-The `loadFile` callback calls the `getFile` API. It requests to load `HelloWorld.txt`, then shows a message box that displays the content of the file.
-
-```typescript
-const loadFile = async () => {
-  const message = await studioPro.app.files.getFile("HelloWorld.txt");
-  studioPro.ui.messageBoxes.show(
-    "info",
-    `Loaded HelloWorld.txt it contained: ${message}`
+        },
+    };
+    ```
+
+  ## Code Descriptions {#code-descriptions}
+
+  The following sections explain the various parts of the code.
+
+  ### saveFile
+
+  The `saveFile` callback calls the `putFile` API. It sets the file name to `HelloWorld.txt` and the content to `Hello world from a file!`.
+
+  ```typescript
+  const saveFile = async () => {
+    await studioPro.app.files.putFile(
+      "HelloWorld.txt",
+      "Hello world from a file!"
+    );
+    studioPro.ui.messageBoxes.show("info", "Saving HelloWorld.txt");
+  };
+  ```
+
+  ### loadFile
+
+  The `loadFile` callback calls the `getFile` API. It requests to load `HelloWorld.txt`, then shows a message box that displays the content of the file.
+
+  ```typescript
+  const loadFile = async () => {
+    const message = await studioPro.app.files.getFile("HelloWorld.txt");
+    studioPro.ui.messageBoxes.show(
+      "info",
+      `Loaded HelloWorld.txt it contained: ${message}`
+    );
+  };
+  ```
+
+  ### deleteFile
+
+  The `deleteFile` callback calls the `deleteFile` API. It requests to delete `HelloWorld.txt`.
+
+  ```typescript
+  const deleteFile = async () => {
+    await studioPro.app.files.deleteFile("HelloWorld.txt");
+    studioPro.ui.messageBoxes.show("info", "Deleted HelloWorld.txt");
+  };
+  ```
+
+  ### Adding Buttons
+
+  The final part of the code adds three new buttons which, when clicked, call the callbacks described above.
+
+  ```typescript
+  createRoot(document.getElementById("root")!).render(
+    <StrictMode>
+      <h1>Mendix Studio Pro Extension</h1>
+      <p>Hello from an extension!</p>
+      <p>
+        <button onClick={saveFile}>Save Hello world File</button>
+        <button onClick={loadFile}>Load Hello world File</button>
+        <button onClick={deleteFile}>Delete Hello world File</button>
+      </p>
+    </StrictMode>
   );
-};
-```
-
-### deleteFile
-
-The `deleteFile` callback calls the `deleteFile` API. It requests to delete `HelloWorld.txt`.
-
-```typescript
-const deleteFile = async () => {
-  await studioPro.app.files.deleteFile("HelloWorld.txt");
-  studioPro.ui.messageBoxes.show("info", "Deleted HelloWorld.txt");
-};
-```
-
-### Adding Buttons
-
-The final part of the code adds three new buttons which, when clicked, call the callbacks described above.
-
-```typescript
-createRoot(document.getElementById("root")!).render(
-  <StrictMode>
-    <h1>Mendix Studio Pro Extension</h1>
-    <p>Hello from an extension!</p>
-    <p>
-      <button onClick={saveFile}>Save Hello world File</button>
-      <button onClick={loadFile}>Load Hello world File</button>
-      <button onClick={deleteFile}>Delete Hello world File</button>
-    </p>
-  </StrictMode>
-);
-```
+  ```
 
 ## Restrictions
 
diff --git a/content/en/docs/apidocs-mxsdk/apidocs/studio-pro-11/extensibility-api/web/web-extensions-howtos/tab-api.md b/content/en/docs/apidocs-mxsdk/apidocs/studio-pro-11/extensibility-api/web/web-extensions-howtos/tab-api.md
index 271de542d4d..07c2c44e247 100644
--- a/content/en/docs/apidocs-mxsdk/apidocs/studio-pro-11/extensibility-api/web/web-extensions-howtos/tab-api.md
+++ b/content/en/docs/apidocs-mxsdk/apidocs/studio-pro-11/extensibility-api/web/web-extensions-howtos/tab-api.md
@@ -131,7 +131,7 @@ If you want multiple tabs in your extension, you need to structure the folders a
 
     In this example, you will add three tabs: **tab1**, **tab2**, and **tab3**.
 
-    {{< figure src="/attachments/apidocs-mxsdk/apidocs/extensibility-api/web/tabs/ui_folder_structure.png" >}}
+    {{< figure src="/attachments/apidocs-mxsdk/apidocs/extensibility-api/web/tabs/ui_folder_structure.png" width="200" >}}
 
 5. Create listener events in the `Main` class to open each of the three tabs. The `Main` class will then look like this: