[FREE] - MonacoEditor - Microsoft's Code editor for your app!

Extensions
1

🧩 MonacoEditor

An extension for MIT App Inventor 2.
A non-visible component that provides a powerful code editor using the Monaco Editor library. It allows you to embed a fully-featured code editor in your app, supporting syntax highlighting for multiple programming languages, themes, and read-only mode.

:memo: Specifications

:package: Package: com.ahmedislam.monacoeditor
:floppy_disk: Size: 16.05 KB
:gear: Version: 1.0
:iphone: Minimum API Level: 14
:date: Updated On: 2026-03-05T22:00:00Z
:computer: Built & documented using: FAST v5.4.0

Event:

MonacoEditor has total 1 event.

1. EditorReady

Triggered when the editor is fully loaded and ready

Method:

MonacoEditor has total 1 method.

1. Initialize

Initialize the Monaco Editor in the specified arrangement

Parameter Type
arrangement component

Designer:

MonacoEditor has total 3 designer properties.

1. CodeLanguage

  • Input type: choices
  • Arguments: javascript, typescript, python, java, cpp, csharp, html, css, json, sql, php, ruby, go, rust, kotlin, swift, xml, markdown, yaml

2. Theme

  • Input type: choices
  • Default value: vs
  • Arguments: vs, vs-dark, hc-black, hc-light

3. ReadOnly

  • Input type: boolean
  • Default value: False

Setters:

MonacoEditor has total 4 setter properties.

1. CodeLanguage

The programming language for syntax highlighting

  • Input type: text

2. Theme

The editor theme

  • Input type: text

3. ReadOnly

Whether the editor is read-only

  • Input type: boolean

4. Text

Gets the current text/content of the editor

  • Input type: text

Getters:

MonacoEditor has total 4 getter properties.

1. CodeLanguage

The programming language for syntax highlighting

  • Return type: text

2. Theme

The editor theme

  • Return type: text

3. ReadOnly

Whether the editor is read-only

  • Return type: boolean

4. Text

Gets the current text/content of the editor

  • Return type: text

Blocks samples:

blocks (16)
blocks (16)823×267 19.5 KB

NOTE: The "Container1" and "container2" Are Vertical Arrangements.

Screenshot of the editor:

image
image602×1077 51.1 KB

Sample AIA Here

com.ahmedislam.monacoeditor.aix (16.1 KB)

Thank you.

2
7

On testing:

Needs helper blocks for the code environments and for the themes

When first loaded, keyboard does not appear when tapping on the content. I found I had to tap in the top left hand corner to get the keyboard to come up. After that, the code editor responds to taps for the keyboard to appear.

The delete key on the keyboard doesn't work when on the very right of a line of code, nor at the beginning of a new line when attempting to delete it. (code: json, theme: vs-dark)

8

That's the Monaco's problem, not the extension.
me also tested it in the demo.

Try to:

Tap and hold the content and release (or right click if you're using mouse)
Tap on Command Palettes option.
Tap on a blank way.

The editor will now work.

10