arya-blue
luna-amber
luna-blue
luna-green
luna-pink
nova-dark
nova-light
saga-blue
vela-blue
CodeMirror
CodeMirror is a JavaScript library that can be used to create a relatively pleasant editor interface for code-like content ― computer programs, HTML markup, and similar. If a mode has been written for the language you are editing, the code will be coloured, and the editor will optionally help you with indentation.

CodeMirror Based on CodeMirror.js library by Marijn Haverbeke.

CodeMirror provides many languages for markup and themes for styling.

Following Modes are available:
  • apl
  • asciiarmor
  • asn.1
  • asterisk
  • brainfuck
  • clike
  • clojure
  • cmake
  • cobol
  • coffeescript
  • commonlisp
  • crystal
  • css
  • cypher
  • d
  • dart
  • diff
  • django
  • dtd
  • dylan
  • ebnf
  • ecl
  • eiffel
  • eml
  • erlang
  • fcl
  • fortran
  • freemarker
  • gas
  • gfm
  • gherkin
  • go
  • groovy
  • haml
  • haskell
  • haskell-literate
  • haxe
  • htmlembedded
  • htmlmixed
  • http
  • idl
  • javascript
  • jinja2
  • jsx
  • julia
  • lua
  • markdown
  • mathematica
  • mbox
  • mirc
  • mllike
  • modelica
  • mscgen
  • mumps
  • nginx
  • ntriples
  • octave
  • oz
  • pascal
  • pegjs
  • perl
  • php
  • pig
  • powershell
  • properties
  • protobuf
  • pug
  • puppet
  • python
  • q
  • r
  • rpm
  • rst
  • ruby
  • sass
  • scala
  • scheme
  • shell
  • sieve
  • slim
  • smalltalk
  • smarty
  • solr
  • soy
  • sparql
  • spreadsheet
  • sql
  • stex
  • stylus
  • swift
  • tcl
  • textile
  • tiddlywiki
  • tiki
  • toml
  • tornado
  • troff
  • ttcn
  • ttcn-cfg
  • turtle
  • twig
  • vb
  • vbscript
  • velocity
  • verilog
  • vhdl
  • vue
  • webidl
  • xml
  • xquery
  • yaml
  • yaml-frontmatter
  • z80
Components and more
Documentation pe:codeMirror
Attributes (move mouse over the names to see data types)
Name Description
accesskeyAccess key to transfer focus to the input element.
allowBlocksWhether to allow blocks to be included when secure=true and the HTML is sanitized.Default is true.
allowFormattingWhether to allow formatting to be included when secure=true and the HTML is sanitized.Default is true.
allowImagesWhether to allow images to be included when secure=true and the HTML is sanitized.Default is true.
allowLinksWhether to allow links to be included when secure=true and the HTML is sanitized.Default is true.
allowMediaWhether to allow audio/video to be included when secure=true and the HTML is sanitized.Default is true.
allowStylesWhether to allow styles to be included when secure=true and the HTML is sanitized.Default is true.
allowTablesWhether to allow tables to be included when secure=true and the HTML is sanitized.Default is true.
ariaDescribedByIdentifies the element(s) that describe the object, enhancing accessibility.
asyncWhen set to true, ajax requests are not queued. Default value: false.Default is false.
bindingAn EL expression referring to a server side UIComponent instance in a backing bean.Default is generated.
colsDefault is 0.
completeMethodMethod providing suggestions.
converterEL expression resolves to a converter instance or literal converter ID defining a component converter.
converterMessageCustom message to display when conversion fails.
dirDirection indication for text that does not inherit directionality.Default is ltr.
disabledSpecifies that an element should be disabled.Default is false.
electricCharsConfigures whether the editor should re-indent the current line when a character is typed that might change its proper indentation (only works if the mode supports indentation).Default is true.
escapeDefines if the content of the component should be escaped or not.Default is true.
escapeSuggestionsDefines if the suggestions should be escaped or not.Default is true.
extenderThe extender to use for the editor.
extraKeysCan be used to specify extra keybindings for the editor. When given, should be an object with property names like Ctrl-A, Home, and Ctrl-Alt-Left.
firstLineNumberAt which number to start counting lines.Default is 1.
fixedGutterWhen enabled (off by default), this will make the gutter stay visible when the document is scrolled horizontally.Default is false.
globalGlobal ajax requests are listened by ajaxStatus component, setting global to false will not trigger ajaxStatus.Default is true.
gutterCan be used to force a 'gutter' (empty space on the left of the editor) to be shown even when no line numbers are active. This is useful for setting markers.Default is false.
idUnique identifier of the component in a namingContainer.Default is generated.
immediateWhen set true, process validations logic is executed at apply request values phase for this component.Default is false.
indentUnitHow many spaces a block (whatever that means in the edited language) should be indented. The default is 2.
indentWithTabsIf Set false, indent using spaces instead of tabs.Default is true.
inputmodeSpecifies the type of data expected in the input, aiding virtual keyboards.
keyMapConfigures the keymap to use. The default is "default", which is the only keymap defined in codemirror.js itself. Extra keymaps are found in the keymap directory.
labelA localized user presentable name.
langSpecifies the language of the element's content.
lineNumbersWhether to show line numbers to the left of the editor.Default is false.
lineWrappingWhether CodeMirror should scroll or wrap for long lines.Default is false.
matchBracketsDetermines whether brackets are matched whenever the cursor is moved next to a bracket.Default is false.
maxlengthDefines the maximum number of characters allowed in the input.Default is Integer.MIN_VALUE.
modeThe mode to use. When not given, this will default to the first mode that was loaded. It may be a string, which either simply names the mode or is a MIME type associated with the mode. Alternatively, it may be an object containing configuration options for the mode, with a name property that names the mode (for example {name: "javascript", json: true}).
onblurFires when an element loses focus.
onchangeFires when the value of an element has been changed.
onclickFires when a mouse click on the element.
oncompleteJavascript handler to execute when ajax request is completed.
oncontextmenuScript to execute when the context menu is triggered.
oncopyScript to execute when content is copied from the element.
oncutScript to execute when content is cut from the element.
ondblclickFires when a mouse double-click on the element.
ondragScript to execute when an element is dragged.
ondragendScript to execute at the end of a drag operation.
ondragenterScript to execute when a dragged element enters a valid drop target.
ondragleaveScript to execute when a dragged element leaves a valid drop target.
ondragoverScript to execute when a dragged element is over a valid drop target.
ondragstartScript to execute at the start of a drag operation.
ondropScript to execute when a dragged element is dropped.
onerrorJavascript handler to execute when ajax request fails.
onfocusFires when an element gets focus.
oninputScript to execute when the element receives user input.
oninvalidScript to execute when the element's value is invalid.
onkeydownFires when a user is pressing a key.
onkeypressFires when a user presses a key.
onkeyupFires when a user releases a key.
onmousedownFires when a mouse button is pressed down on an element.
onmousemoveFires when the mouse pointer is moving while it is over an element.
onmouseoutFires when the mouse pointer moves out of an element.
onmouseoverFires when the mouse pointer moves onto an element.
onmouseupFires when a mouse button is released over an element.
onpasteScript to execute when content is pasted into the element.
onresetScript to execute when the form is reset.
onscrollScript to execute when the element is scrolled.
onsearchScript to execute when a search is performed.
onselectScript to execute when text is selected.
onstartJavascript handler to execute before ajax request is begins.
onsuccessJavascript handler to execute when ajax request succeeds.
onwheelScript to execute when the mouse wheel is used.
placeholderSpecifies a short hint describing the expected value of the input.
pollIntervalIndicates how quickly CodeMirror should poll its input textarea for changes. Most input is captured by events, but some things, like IME input on some browsers, doesn't generate events that allow CodeMirror to properly detect it. Thus, it polls. Default is 100 millis.
processComponent(s) to process partially instead of whole view.
readonlySpecifies that an input field is read-only.Default is false.
renderedBoolean value to specify the rendering of the component, when set to false component will not be rendered.Default is true.
requiredMarks component as required.Default is false.
requiredMessageCustom message to display when the required validation fails.
roleDefines the role of the element for accessibility purposes.
rowsDefault is 0.
secureSecure the component with the HTML Sanitizer library on the classpath.Default is true.
smartIndentWhether to use the context-sensitive indentation that the mode provides (or just indent the same as the line before).Default is true.
styleSpecifies an inline CSS style for an element.
styleClassSpecifies one or more CSS class names for an element.
tabSizeThe width of a tab character. Defaults to 4.
tabindexSpecifies the tab order of an element.
themeThe theme to style the editor with.
titleSpecifies extra information about an element (displayed as a tooltip).
toolbarThe toolbar to use for the editor.
undoDepthThe maximum number of undo levels that the editor stores. Defaults to 40.
validatorA method expression referring to a method validating the input.
validatorMessageCustom message to display when validation fails.
valueValue of the component.
valueChangeListenerA method binding expression referring to a method for handling a valuchangeevent.
widgetVarName of the client side widget.
workDelayHighlighting is done by a pseudo background-thread that will work for workTime milliseconds, and then use timeout to sleep for workDelay milliseconds. Defaults are 200 and 300, you can change these options to make the highlighting more or less aggressive.
workTimeHighlighting is done by a pseudo background-thread that will work for workTime milliseconds, and then use timeout to sleep for workDelay milliseconds. Defaults are 200 and 300, you can change these options to make the highlighting more or less aggressive.
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