arya-blue
luna-amber
luna-blue
luna-green
luna-pink
nova-dark
nova-light
saga-blue
vela-blue
MonacoEditor
You can also define a custom style and color theme for the editor. This component provides a convenient Java API that is a light wrapper around the underlying JavaScript API. Specify the available themes via the customThemes option on the editor. Then you can enable that theme by setting the theme option on the editorOptions. See also the example on the Monaco editor homepage. When you need even more fine-grained control, consider using the client-side API directly via the extender option.
Source

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

<h:panelGroup id="monacoEditorWrapper" layout="block" styleClass="monacoEditorBox">
    <pe:monacoEditor id="monacoEditor" widgetVar="monacoEditor"
        rendered="#{monacoEditorController.type eq 'inline'}"
        value="#{monacoEditorController.value}"
        editorOptions="#{monacoEditorController.editorOptions}"
        customThemes="#{monacoEditorController.customThemes}"
        width="100%" height="400px"
        autoResize="true"/>

    <pe:monacoEditorFramed id="monacoEditorFramed" widgetVar="monacoEditorFramed"
        rendered="#{monacoEditorController.type eq 'framed'}"
        value="#{monacoEditorController.valueFramed}"
        editorOptions="#{monacoEditorController.editorOptionsFramed}"
        customThemes="#{monacoEditorController.customThemes}"
        width="100%" height="400px"
        autoResize="true"/>
</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-13 11:37