The Monaco Editor is the code editor which powers VS Code, with the features better described here.

The editor provides a rich coding experience with IntelliSense and validation for a few select languages, namely JavaScript/TypeScript, CSS / LESS /SCSS, and JSON; including but not limited to syntax highlighting, code completion and refactoring. Furthermore, basic support such as syntax highlighting is available for many mor languages, see the list below.

It also supports localization and comes with support for a few major languages out-of-the-box.
This component is a wrapper that allows Monaco Editor to be used as a JSF component.

The monaco editor library is developed by Microsoft and released under a MIT License. You can find their official GitHub repo here.

The Monaco Editor component has been developed with customizability in mind. You can specify and extender to configure the editor via custom JavaScript in any way you like via the official client-side API. This JSF component comes in four varieties:

• The pe:monacoEditor renders the editor inline in the page where you include it. This is usually more efficient and the preferred way when you do not need different editors with a different global configuration.
• The pe:monacoEditorFramed renders the editor in an iframe for improved encapsulation. Part of the Monaco Editor configuration is window global, such as the loaded TypeScript declaration files for improved JavaScript IntelliSense. If you wish to use multiple editors with a completely different setup, consider using the framed variant.
• The pe:monacoDiffEditor renders a diff editor for comparing two files inline in the page where you include it. This is usually more efficient and the preferred way when you do not need different editors with a different global configuration.
• The pe:monacoDiffEditorFramed renders a diff editor for comparing two files in an iframe for improved encapsulation. Part of the Monaco Editor configuration is window global, such as the loaded TypeScript declaration files for improved JavaScript IntelliSense. If you wish to use multiple editors with a completely different setup, consider using the framed variant.

All variants share almost the same API with a few minor differences regarding a few client-side widget methods and how you specifiy the extender. The diff editor has some additional properties for the the settings of the original (left) editor against which the value is compared. As the framed variant runs inside an iframe, all interactions with the editor is handled via postMessage and thus neccesarily asynchronous. The API makes heavy use of Promises.

While PrimeFaces extensions does not have TypeScript declarations in general yet, the client side API of this component is fully typed and checked against the PrimeFaces type: primefaces-monaco-global.d.ts, primefaces-monaco-module.d.ts

Note that this is a code editor, not at all unlike CodeMirror. Especially for the languages with IntelliSense support (see above) this editor can provide a fuller and more pleasing experience. However, there are a few things to keep in mind:

• Microsoft's statement regarding IE support: The Monaco Editor no longer supports IE 11. The last version that was tested on IE 11 is 0.18.1.
• It is assumed that users are using a browser with support for the Promise API. Every browser other than IE, which is unsupported anyways, now supports Promises. When for some reason support for the Promise API should not be available, you can simply include an appropriate polyfill. While untested, it may also be possible to support IE 11 this way.
• Also, the Monaco editor is not supported in mobile browsers or mobile web frameworks. In practice this means there is not dedicated user interface for small screens or special controls for entering code on mobile devices. A larger tablet with an external keyboard and possibly a mouse should work just fine, but make sure you test your use-case scenario.

Basic support including syntax highlighting is available for the following languages:
(but also check the official docs, more languages may have been added in the mean time)

• abap
• aes
• apex
• azcli
• bat
• bicep
• c
• cameligo
• clojure
• coffeescript
• cpp
• csharp
• csp
• css
• cypher
• dart
• dockerfile
• ecl
• elixir
• flow9
• freemarker2
• freemarker2.tag-angle.interpolation-bracket
• freemarker2.tag-angle.interpolation-dollar
• freemarker2.tag-auto.interpolation-bracket
• freemarker2.tag-auto.interpolation-dollar
• freemarker2.tag-bracket.interpolation-bracket
• freemarker2.tag-bracket.interpolation-dollar
• fsharp
• go
• graphql
• handlebars
• hcl
• html
• ini
• java
• javascript
• json
• julia
• kotlin
• less
• lexon
• liquid
• lua
• m3
• markdown
• mdx
• mips
• msdax
• mysql
• objective-c
• pascal
• pascaligo
• perl
• pgsql
• php
• pla
• plaintext
• postiats
• powerquery
• powershell
• proto
• pug
• python
• qsharp
• r
• razor
• redis
• redshift
• restructuredtext
• ruby
• rust
• sb
• scala
• scheme
• scss
• shell
• sol
• sparql
• sql
• st
• swift
• systemverilog
• tcl
• twig
• typescript
• typespec
• vb
• verilog
• xml
• yaml