juicy-ace-editor | Vaadin

Custom Element with the Ace code editor

[ This description is mirrored from README.md at github.com/Juicy/juicy-ace-editor on 2019-05-10 ]


Even more embeddable code editor. Custom Element - just one tag, and no JS needed to provide Ace - The High Performance Code Editor


Check it live!

Play & Configure with kitchen sink


Besides Ace features, <juicy-ace-editor> does:

  • provide extremely clean and easy way to embed it (see Usage)
  • observe DOM changes:
  • Update your code by just updating Element's text content
  • Change Editor's setting by changing DOM attributes
  • Compatible with Shadow DOM v0 and v1
  • Custom Elements v1 (more)

You can still fiddle with Ace editor programmatically using <juicy-ace-editor>.editor.


Install the component using Bower:

$ bower install juicy-ace-editor --save

Or download as ZIP.


  1. Import Web Components' polyfill (if needed):

    <script src="bower_components/webcomponentsjs/webcomponents-lite.js"></script>
  2. Import Custom Element:

    <link rel="import" href="bower_components/juicy-ace-editor/juicy-ace-editor.html">
  3. Start using it!

<juicy-ace-editor theme="ace/theme/monokai">Type your code here...</juicy-ace-editor>


Attribute Options Default Description
theme String Editor#setTheme at Ace API
mode String EditSession#setMode at Ace API
fontsize String Editor#setFontSize at Ace API
softtabs Boolean EditSession#setUseSoftTabs() at Ace API
tabsize Boolean Session#setTabSize() at Ace API
readonly Boolean Editor#setReadOnly() at Ace API
wrapmode Boolean Session#setWrapMode() at Ace API
max-lines Number renderer#$maxLines at used to for autoresizing
min-lines Number renderer#$minLines at used to for [autoresizing](https://ace.c9.io/demo/autoresize.html
shadow-style String CSS selector for a <style> element, from the same (shadow)tree, to be injected to shadow root when stamped or attributeChanged


Name Description
editor Ace editor object.
value editor.get-/setValue()


Name Description
change Triggered when editor content gets changed
editor-ready Triggered once Ace editor instance is created.

Web Components v0 vs v1

Currently, this element supports both Shadow DOM v1 and v0, but only Custom Elements v1. If your environment uses Custom Elements v0 only, we strongly recommend to use lightweight v0 to v1 polyfill

bower install --save document-register-element

Who uses it?

Contributing and Development


For detailed changelog, check Releases.




Link to this version
ImportedReleased 06 November 2018MIT License
Framework Support
Polymer 1.0+
Browser Compatibility
Install with
bower install --save Juicy/juicy-ace-editor"#2.2.1"
Run the above Bower command in your project folder. If you have any issues installing, please contact the author.
Release notes - Version 2.2.1


  • webcomponentsjs#^1.0.0
  • ace-builds#^1.3.3