Editors & Developer Tools · jdashboardUI · B4J / JavaFX WebView / Monaco Editor

MonacoEditorView embeds Monaco Editor inside a B4J application through JavaFX WebView. It is much more than a syntax-colored TextArea: it provides multi-document editing, tabs, integrated search, VBA procedure navigation, snippets, completion providers, themes, multiple languages, dirty-state tracking and a B4J ↔ JavaScript bridge.

It is the same component used as the code editor inside Ribbon UI Studio Pro.

Highlights

• Fully offline Monaco Editor runtime.
• Runtime bundled in Files/monaco.zip.
• Automatic runtime-version extraction/update.
• Real multi-document editing with one Monaco ITextModel per tab.
• Tabs with name, close button and dirty indicator.
• Per-document physical metadata.
• Integrated search with match counter, previous/next and Ctrl+F.
• VBA procedure picker for Sub, Function and Property.
• Cross-document procedure navigation with GoToProcedure.
• Specialized completion for RibbonX/XML, VBA, B4X and SetupStudio.
• Dynamic Modern Forms VBA completions.
• Roughly 457 predefined snippet templates across the primary runtime language sets, plus SetupStudio-specific completion items.
• Dark and light themes.
• Editor toolbar UI in English / Spanish.
• Status bar with language, UTF-8, theme and Ln/Col.
• Undo, Redo, Select All, Toggle Comment, Copy, Cut and Paste.
• Document/selection formatting when a formatter exists.
• JavaFX clipboard bridge for WebView reliability.
• B4J snippet insertion.
• Read/update any document without activating its tab.
• Saved/dirty state APIs.
• Public AddToParent for code-created editors.

Reference view

The documentation page shows a reference visual, not an exact host screenshot. Final appearance depends on the selected theme and the application embedding MonacoEditorView.

Ribbon UI Studio Pro, for example, uses it for VBA and Ribbon XML editing with document tabs, search and procedure navigation.

Runtime architecture

B4J
 └── MonacoEditorView.bas
      └── JavaFX WebView
           └── monaco/editor.html
                └── Monaco Editor + models + snippets + toolbar

The HTML/JavaScript runtime is packaged as:

Files/monaco.zip

The analyzed version declares:

MONACO_RUNTIME_VERSION = 2026.10.13.2

During Initialize, the component checks:

File.DirApp/monaco/runtime-version.txt

If missing or outdated, it copies monaco.zip from Assets, extracts it with Zip4j, writes the version file and deletes the temporary ZIP.

The host application therefore needs write access to File.DirApp.

Dependency

The jdashboardUI manifest already includes:

zip4j-2.11.6.jar

MonacoEditorView uses it to unpack its embedded runtime.

Designer usage

Sub Class_Globals
    Private Monaco1 As MonacoEditorView
End Sub

Private Sub Monaco1_Ready
    Monaco1.SetLanguage(Monaco1.LANG_B4X)
    Monaco1.SetValue($"Sub Hello
    Log("Hello Monaco")
End Sub"$)
End Sub

Designer Properties

Editor UI languages:

English
Spanish

Create from code

Private Monaco1 As MonacoEditorView

Private Sub CreateEditor(Parent As B4XView)
    Monaco1.Initialize(Me, "Monaco1")
    Monaco1.AddToParent(Parent, 0, 0, Parent.Width, Parent.Height)
End Sub

Private Sub Monaco1_Ready
    Monaco1.SetLanguage(Monaco1.LANG_B4X)
End Sub

Ready lifecycle

Monaco loads inside JavaFX WebView, so document-oriented operations should normally be performed after:

Private Sub Monaco1_Ready
End Sub

SetValue and InsertSnippet are special: calls made before Ready are queued and replayed after initialization.

OpenDocument is not queued and returns an empty id when the editor is not ready.

If Monaco1.IsReady Then
    Log("Ready")
End If

Public languages

LANG_XML
LANG_VBA
LANG_VBNET
LANG_B4X
LANG_JAVASCRIPT
LANG_PYTHON
LANG_SQL
LANG_JSON
LANG_HTML
LANG_CSS
LANG_MARKDOWN
LANG_TYPESCRIPT
LANG_CSHARP
LANG_JAVA
LANG_CPP
LANG_setupstudio

Example:

Monaco1.SetLanguage(Monaco1.LANG_VBA)

VBA and VB.NET map internally to Monaco's vb tokenizer.

B4X also reuses the VB language provider while adding B4X keywords, snippets and custom completion logic.

The packaged runtime contains many additional Monaco basic-language modules, but the constants above are the supported presets exposed by the current B4J class and Designer.

Completion and snippets

The runtime adds custom completion providers rather than relying only on Monaco defaults.

RibbonX / XML

Ribbon controls and attributes are suggested, including customUI, ribbon, tab, group, button, gallery, dynamicMenu, idMso, onAction, getVisible, getImage and many others.

VBA

Completion sources include:

• VBA keywords;
• VBA snippets;
• Ribbon callbacks;
• open VBA modules and procedures;
• UserForms / Modern Forms;
• words from the active document.

B4X

Includes B4X keywords, snippets, member-completion logic and words from the document.

SetupStudio

The runtime registers a custom setupstudio language with its own tokenizer, comment rules and completion snippets.

Included snippet counts

SetupStudio additionally registers dedicated completion items outside that collection.

Themes

Runtime theme selector:

ribbonEditorTheme
catppuccin-mocha
dracula
monokai
github-dark
nord
solarized-dark
ribbonLight
vs-dark
vs
hc-black

Monaco1.SetTheme("dracula")
Monaco1.SetTheme("github-dark")
Monaco1.SetTheme("ribbonLight")

Designer theme-list note

The current Designer list contains one-dark-pro, but the analyzed editor.html does not define or expose that theme.

Conversely, the runtime includes nord, solarized-dark, ribbonLight and hc-black, which are not present in the Designer list.

Use the confirmed runtime names above.

Editor UI language

Monaco1.SetEditorUiLanguage(Monaco1.UI_LANGUAGE_SPANISH)

or:

Monaco1.SetEditorUiLanguage("es")

This translates the custom search/procedure toolbar. It does not change code syntax highlighting; use SetLanguage for that.

Status bar

The built-in status bar shows:

• active language;
• UTF-8;
• theme selector;
• Ln x, Col y.

Set ShowStatusBar = False in the Designer to hide it.

Monaco1.SetValue("<customUI></customUI>")
Dim Code As String = Monaco1.GetValue

SetValue is queued if the editor is not ready yet.

Multi-document editing

New document

Dim Id As String = Monaco1.NewDocument("Module1.bas")

Open document

Dim Id As String = Monaco1.OpenDocument( _
    "RibbonCallbacks", _
    VbaCode, _
    Monaco1.LANG_VBA)

With physical identity metadata:

Dim Id As String = Monaco1.OpenDocument( _
    "RibbonCallbacks", _
    VbaCode, _
    Monaco1.LANG_VBA, _
    SourceXlamPath, _
    WorkingCopyPath, _
    "", _
    "RibbonCallbacks", _
    "vba")

Metadata fields:

SourcePath, WorkPath, EntryPath, ModuleName, DocumentType.

For VBA, document identity is primarily SourcePath + ModuleName. For other content it is SourcePath + EntryPath.

This prevents duplicate tabs for the same physical item.

OpenDocumentEx

Still available for compatibility but marked Deprecated. Use OpenDocument.

Open document list

Dim Docs As List = Monaco1.GetDocuments

For Each Doc As Map In Docs
    Log(Doc.Get("name"))
    Log(Doc.Get("language"))
    Log(Doc.Get("dirty"))
Next

Document Maps can contain:

id, name, path, sourcePath, workPath, entryPath, moduleName, documentType, placeholder, language, dirty, content.

Active document

Dim Id As String = Monaco1.GetActiveDocumentId
Dim Name As String = Monaco1.GetActiveDocumentName
Dim Info As Map = Monaco1.GetActiveDocument

Select / close / rename

Monaco1.SelectDocument(DocumentId)

If Monaco1.CloseDocument(DocumentId) Then
    Log("Closed")
End If

Monaco1.RenameDocument(DocumentId, "ModuleRenamed")

When the final tab is closed, the HTML runtime creates a placeholder document automatically.

Existing-document check

Dim AlreadyOpen As Boolean = Monaco1.DocumentExists( _
    SourcePath, _
    EntryPath, _
    ModuleName, _
    DocumentType)

Read or update a background tab

Dim Text As String = Monaco1.GetDocumentValue(DocumentId)

Dim Ok As Boolean = Monaco1.SetDocumentValue( _
    DocumentId, _
    NewText)

Neither call needs to activate that document first.

Dirty / Saved state

Monaco1.MarkDocumentDirty(DocumentId)

After saving to disk:

Monaco1.MarkDocumentSaved

or:

Monaco1.MarkDocumentSavedFor(DocumentId)

Document metadata

Monaco1.SetDocumentMetadata( _
    DocumentId, _
    SourcePath, _
    WorkPath, _
    EntryPath, _
    ModuleName, _
    DocumentType)

Dim Info As Map = Monaco1.GetDocumentMetadata(DocumentId)

Integrated search

The editor toolbar provides query input, previous/next, clear, a current/total counter and match decorations.

Monaco1.FocusSearch
Monaco1.FindText("IRibbonControl")

VBA procedure navigation

VBA documents expose a procedure picker.

The parser recognizes Sub, Function and Property declarations.

If Monaco1.GoToProcedure("btnGenerarCode") Then
    Log("Found")
End If

The runtime can search across open VBA documents.

Modern Forms completion

Monaco1.SetModernFormCompletions(JsonDefinitions)

The JSON stays in the editor page and feeds the VBA completion provider.

Editing commands

Monaco1.Undo
Monaco1.Redo
Monaco1.SelectAll
Monaco1.ToggleComment
Monaco1.CopySelection
Monaco1.CutSelection
Monaco1.PasteSelection
Monaco1.FormatDocument
Monaco1.FormatSelection

Formatting depends on the active language provider.

Clipboard operations are bridged to javafx.scene.input.Clipboard, which avoids browser clipboard restrictions inside JavaFX WebView.

InsertSnippet

Monaco1.InsertSnippet($"Private Sub Button1_Click
    $0
End Sub"$)

Calls made before Ready are queued.

Events

Ready

Private Sub Monaco1_Ready
End Sub

DocumentActivated

Private Sub Monaco1_DocumentActivated(DocumentId As String, DocumentName As String)
End Sub

DocumentClosed

Private Sub Monaco1_DocumentClosed(DocumentId As String, DocumentName As String)
End Sub

documentChanged note

The class exposes a public documentChanged(...) bridge method so JavaScript can call back into B4J.

The current class does not declare a #Event: DocumentChanged and does not raise a consumer callback named _DocumentChanged.

It should therefore be treated as an interop method rather than a normal library event.

Public bridge methods

Normally host code does not need to call:

• documentActivated
• documentChanged
• documentClosed
• clipboardGet
• clipboardSet
• PasteTest

They exist to support the JavaScript/JavaFX bridge.

Base and state

Dim Host As Pane = Monaco1.GetBase
Log(Monaco1.IsReady)

Complete VBA editor example

Sub Class_Globals
    Private Root As B4XView
    Private Monaco1 As MonacoEditorView
End Sub

Private Sub B4XPage_Created (Root1 As B4XView)
    Root = Root1

    Monaco1.Initialize(Me, "Monaco1")
    Monaco1.AddToParent(Root, 0, 0, Root.Width, Root.Height)
End Sub

Private Sub Monaco1_Ready
    Monaco1.SetTheme("ribbonEditorTheme")
    Monaco1.SetEditorUiLanguage("English")

    Dim Code As String = $"Public Sub btnCabecera(control As IRibbonControl)
    Call GenerarTitulosCabecera
End Sub

Public Sub btnGenerarCode(control As IRibbonControl)
    Call ProcesarDatosPruebas
End Sub"$

    Monaco1.OpenDocument( _
        "RibbonCallbacks", _
        Code, _
        Monaco1.LANG_VBA, _
        File.Combine(File.DirApp, "laboratorio.xlam"), _
        "", _
        "", _
        "RibbonCallbacks", _
        "vba")
End Sub

Public API

Creation: Initialize, DesignerCreateView, AddToParent, GetBase, IsReady.

Content: SetValue, GetValue, InsertSnippet.

Multi-document: NewDocument, OpenDocument, OpenDocumentEx (deprecated), SelectDocument, CloseDocument, RenameDocument, GetActiveDocumentId, GetActiveDocumentName, GetDocuments, DocumentExists.

Per-document content: GetDocumentValue, SetDocumentValue.

Metadata/state: SetDocumentMetadata, GetDocumentMetadata, GetActiveDocument, MarkDocumentDirty, MarkDocumentSaved, MarkDocumentSavedFor.

Navigation: FocusSearch, FindText, GoToProcedure.

Editing: Undo, Redo, SelectAll, ToggleComment, CopySelection, CutSelection, PasteSelection, FormatDocument, FormatSelection.

Configuration: SetTheme, SetLanguage, SetEditorUiLanguage, SetModernFormCompletions.

Public bridge: documentActivated, documentChanged, documentClosed, clipboardGet, clipboardSet, PasteTest.

Best practices

• Wait for Ready before opening documents.
• Prefer the LANG_* constants.
• Keep the DocumentId returned by OpenDocument.
• Use GetDocumentValue / SetDocumentValue for background tabs.
• Call MarkDocumentSavedFor after writing the physical file.
• Use document metadata to connect tabs to Office packages, ZIP entries or VBA modules.
• Do not assume every language supports FormatDocument.
• Use theme names confirmed by the current HTML runtime.