SourceCodeEditor allows displaying and entering source code. This component is a multi-line text area featured with code highlighting, an optional print margin, and a gutter with line numbers.

source code editor

Component’s XML-name: sourceCodeEditor.


SourceCodeEditor mostly replicates the functionality of TextField component and has the following specific attributes:

  • handleTabKey - defines whether the Tab button on the keyboard is handled to indent lines. The default value is false - used to move the cursor or focus to the next tab stop.

  • highlightActiveLine - defines whether highlight the line the caret is on. The default value is true.

  • mode - allows you to choose one of the supported languages for the syntax highlight:

    • Java

    • CSS

    • Groovy

    • HTML

    • JavaScript

    • Properties

    • SCSS

    • SQL

    • XML

    • Text - the default value, nothing will be highlighted.

  • showGutter - defines whether show the left gutter with line numbers.

  • suggestOnDot - defines whether the suggester handler will be called after the user types the dot character.

Events and Handlers

To generate a handler stub in Jmix Studio, select the component in the screen descriptor XML or in the Component Hierarchy panel and use the Handlers tab of the Component Inspector panel.

Alternatively, you can use the Generate Handler button in the top panel of the screen controller.




Mode delegate method allows you to choose one of the supported languages for the syntax highlight:

@Install(to = "sourceCodeEditor", subject = "mode")
private String sourceCodeEditorMode() {
    return SourceCodeEditor.Mode.Java.getId();

Programmatic usage: call the setMode() component method.


SourceCodeEditor supports code auto-complete provided by the Suggester class. To activate word completion, use Suggester delegate method. For example, let’s define Enum with Java key-words:

public enum KeyWord implements EnumClass<String> {

    private String id;

    KeyWord(String value) { = value;

    public String getId() {
        return id;


Then, let’s define the component in the XML descriptor:

<sourceCodeEditor id="sourceCodeEditor"

Using handler assign values for code auto-complete:

@Install(to = "sourceCodeEditor", subject = "suggester")
private List<Suggestion> sourceCodeEditorSuggester(AutoCompleteSupport source, String text, int cursorPosition) {
    List<String> keywords = Stream.of(KeyWord.values())
    List<Suggestion> suggestions = new ArrayList<>();
    for (String keyword : keywords) {
        suggestions.add(new Suggestion(source, keyword, keyword, null, -1, -1));
    return suggestions;

As a result, we have a convenient java code editor with auto-completion:

source code suggester

To invoke suggestions press Ctrl+Space. Depending on the value of the suggestOnDot attribute, suggestions may appear after dot press.

Programmatic usage: call the setSuggester() component method.


The appearance of SourceCodeEditor can be customized using SCSS variables with $jmix-sourcecodeeditor-* prefix.

All XML Attributes

You can view and edit attributes applicable to the component using the Component Inspector panel of the Studio’s Screen Designer.