arya-blue
luna-amber
luna-blue
luna-green
luna-pink
nova-dark
nova-light
saga-blue
vela-blue
MonacoEditor
MonacoEditor is fully updateable via AJAX as you can see with the select options below. It also keeps its scroll position during an AJAX update.
Source

<p:growl id="growl" showDetail="true" showSummary="true">
     <p:autoUpdate />
</p:growl>

<p:selectOneButton id="type" value="#{monacoEditorController.type}">
    <f:selectItem itemLabel="Inline" itemValue="inline" />
    <f:selectItem itemLabel="Iframe" itemValue="framed" />
    <p:ajax process="monacoEditorWrapper,basicOptionsWrapper" update="monacoEditorWrapper,basicOptionsWrapper" />
</p:selectOneButton>

<h:panelGroup id="basicOptionsWrapper"  layout="block">

    <h:panelGrid id="basicOptions" rendered="#{monacoEditorController.type eq 'inline'}"
        columns="14" style="margin-bottom:10px" cellpadding="5"
    >
        <p:outputLabel for="language" value="Code language: " />
        <p:selectOneMenu id="language" value="#{monacoEditorController.language}" filter="true">
            <f:selectItem itemLabel="Select One" itemValue="#{null}" noSelectionOption="true" />
            <f:selectItems value="#{monacoEditorController.languages}" />
            <p:ajax listener="#{monacoEditorController.onLanguageChange}" process="monacoEditorWrapper" update="monacoEditorWrapper" />
        </p:selectOneMenu>
    
        <p:outputLabel for="theme" value="Theme: " />
        <p:selectOneMenu id="theme" value="#{monacoEditorController.theme}">
            <f:selectItem itemLabel="Select One" itemValue="#{null}" noSelectionOption="true" />
            <f:selectItems value="#{monacoEditorController.themes}" />
            <p:ajax process="monacoEditorWrapper" update="monacoEditorWrapper" />
        </p:selectOneMenu>
    
        <p:outputLabel for="locale" value="Locale: " />
        <p:selectOneMenu id="locale" value="#{monacoEditorController.locale}" converter="omnifaces.SelectItemsConverter">
            <f:selectItem itemLabel="(Default)" itemValue="#{null}" noSelectionOption="true" />
            <f:selectItems value="#{monacoEditorController.locales}" var="locale"
                itemLabel="#{locale.displayName}" itemValue="#{locale}" />
            <p:ajax process="monacoEditorWrapper" update="monacoEditorWrapper" />
        </p:selectOneMenu>

        <p:selectBooleanCheckbox id="required" value="#{monacoEditorController.required}">
            <p:ajax process="monacoEditorWrapper" update="monacoEditorWrapper" />
        </p:selectBooleanCheckbox>
        <p:outputLabel for="required" value="Required" />

        <p:selectBooleanCheckbox id="disabled" value="#{monacoEditorController.disabled}">
            <p:ajax process="monacoEditorWrapper" update="monacoEditorWrapper" />
        </p:selectBooleanCheckbox>
        <p:outputLabel for="disabled" value="Disabled" />

        <p:selectBooleanCheckbox id="readOnly" value="#{monacoEditorController.readOnly}">
            <p:ajax process="monacoEditorWrapper" update="monacoEditorWrapper" />
        </p:selectBooleanCheckbox>
        <p:outputLabel for="readOnly" value="Read-only" />
    </h:panelGrid>
    
    <h:panelGrid id="basicOptionsFramed" rendered="#{monacoEditorController.type eq 'framed'}"
        columns="14" style="margin-bottom:10px" cellpadding="5"
    >
        <p:outputLabel for="languageFramed" value="Code language: " />
        <p:selectOneMenu id="languageFramed" value="#{monacoEditorController.languageFramed}" filter="true">
            <f:selectItem itemLabel="Select One" itemValue="#{null}" noSelectionOption="true" />
            <f:selectItems value="#{monacoEditorController.languages}" />
            <p:ajax listener="#{monacoEditorController.onLanguageChange}" process="monacoEditorWrapper" update="monacoEditorWrapper" />
        </p:selectOneMenu>
    
        <p:outputLabel for="themeFramed" value="Theme: " />
        <p:selectOneMenu id="themeFramed" value="#{monacoEditorController.themeFramed}">
            <f:selectItem itemLabel="Select One" itemValue="#{null}" noSelectionOption="true" />
            <f:selectItems value="#{monacoEditorController.themes}" />
            <p:ajax process="monacoEditorWrapper" update="monacoEditorWrapper" />
        </p:selectOneMenu>
    
        <p:outputLabel for="localeFramed" value="Locale: " />
        <p:selectOneMenu id="localeFramed" value="#{monacoEditorController.localeFramed}" converter="omnifaces.SelectItemsConverter">
            <f:selectItem itemLabel="(Default)" itemValue="#{null}" noSelectionOption="true" />
            <f:selectItems value="#{monacoEditorController.locales}" var="locale"
                itemLabel="#{locale.displayName}" itemValue="#{locale}" />
            <p:ajax process="monacoEditorWrapper" update="monacoEditorWrapper" />
        </p:selectOneMenu>

        <p:selectBooleanCheckbox id="requiredFramed" value="#{monacoEditorController.requiredFramed}">
            <p:ajax process="monacoEditorWrapper" update="monacoEditorWrapper" />
        </p:selectBooleanCheckbox>
        <p:outputLabel for="requiredFramed" value="Required" />

        <p:selectBooleanCheckbox id="disabledFramed" value="#{monacoEditorController.disabledFramed}">
            <p:ajax process="monacoEditorWrapper" update="monacoEditorWrapper" />
        </p:selectBooleanCheckbox>
        <p:outputLabel for="disabledFramed" value="Disabled" />

        <p:selectBooleanCheckbox id="readOnlyFramed" value="#{monacoEditorController.readOnlyFramed}">
            <p:ajax process="monacoEditorWrapper" update="monacoEditorWrapper" />
        </p:selectBooleanCheckbox>
        <p:outputLabel for="readOnlyFramed" value="Read-only" />
    </h:panelGrid>
</h:panelGroup>

<h:panelGroup id="monacoEditorWrapper" layout="block" styleClass="monacoEditorBox">

    <pe:monacoEditor id="monacoEditor" widgetVar="monacoEditor"
        rendered="#{monacoEditorController.type eq 'inline'}"
        value="#{monacoEditorController.value}"
        required="#{monacoEditorController.required}"
        disabled="#{monacoEditorController.disabled}"
        readonly="#{monacoEditorController.readOnly}"
        locale="#{monacoEditorController.locale}"
        placeholder="enter your code... (inline)"
        editorOptions="#{monacoEditorController.editorOptions}"
        width="100%" height="400px" autoResize="true" />

    <pe:monacoEditorFramed id="monacoEditorFramed" widgetVar="monacoEditorFramed"
        rendered="#{monacoEditorController.type eq 'framed'}"
        value="#{monacoEditorController.valueFramed}"
        required="#{monacoEditorController.requiredFramed}"
        disabled="#{monacoEditorController.disabledFramed}"
        readonly="#{monacoEditorController.readOnlyFramed}"
        locale="#{monacoEditorController.localeFramed}"
        placeholder="enter your code... (framed)"
        editorOptions="#{monacoEditorController.editorOptionsFramed}"
        width="100%" height="400px" autoResize="true" />

    <p:commandButton id="btnSubmit" value="Submit" icon="pi pi-save"
        rendered="#{monacoEditorController.type eq 'inline'}" 
        process="monacoEditor" update="monacoEditor"
        actionListener="#{monacoEditorController.submitContent}" />

    <p:commandButton id="btnSubmitFramed" value="Submit" icon="pi pi-save"
        rendered="#{monacoEditorController.type eq 'framed'}" 
        process="monacoEditorFramed" update="monacoEditorFramed"
        actionListener="#{monacoEditorController.submitContent}" />

</h:panelGroup>
            
Components and more
Documentation pe:monacoEditor
Attributes (move mouse over the names to see data types)
Name Description
bindingAn EL expression referring to a server side UIComponent instance in a backing bean.Default is generated.
extenderExtender script: JavaScript expression that evaluates to an extender instance.
idUnique identifier of the component in a namingContainer.Default is generated.
overflowWidgetsDomNodeSearch expression for a component; places overflow widgets inside an external DOM node.
renderedUnique identifier of the component in a namingContainer.Default is generated.
PrimeFaces Extensions Showcase - © 2011-2025,PrimeFaces: 16.0.0-SNAPSHOT,PrimeFaces Extensions: 16.0.0-SNAPSHOT,JSF: Apache MyFaces Core 4.0 - Impl 4.0.3,Server: Apache Tomcat (TomEE)/10.1.52 (10.1.4),Build time: 2026-03-14 23:18