**[ This description is mirrored from README.md at [github.com/Juicy/juicy-ace-editor](https://github.com//Juicy/juicy-ace-editor/blob/2.2.1/README.md) on 2019-05-10 ]** # <juicy-ace-editor> > Even more embeddable code editor. > Custom Element - just one tag, and no JS needed to provide > [Ace](http://ace.c9.io/) - The High Performance Code Editor ## Demo [Check it live!](http://juicy.github.io/juicy-ace-editor) [Play & Configure with kitchen sink](http://juicy.github.io/juicy-ace-editor/kitchen-sink.html) ## Features Besides Ace features, `` does: - provide extremely clean and easy way to embed it (see [Usage](#usage)) - observe DOM changes: - Update your code by just updating Element's text content - Change Editor's setting by changing DOM [attributes](#attributes) - Compatible with Shadow DOM v0 and v1 - Custom Elements v1 ([more](#web-components-v0-vs-v1)) You can still fiddle with Ace editor programmatically using `.editor`. ## Install Install the component using [Bower](http://bower.io/): ```sh $ bower install juicy-ace-editor --save ``` Or [download as ZIP](https://github.com/juicy/juicy-ace-editor/archive/master.zip). ## Usage 1. Import Web Components' polyfill (if needed): ```html ``` 2. Import Custom Element: ```html ``` 3. Start using it! ```html Type your code here... ``` ## Attributes Attribute | Options | Default | Description --- | --- | --- | --- `theme` | *String* | | `Editor#setTheme` at [Ace API](http://ace.c9.io/#nav=api&api=editor) `mode` | *String* | | `EditSession#setMode` at [Ace API](http://ace.c9.io/#nav=api&api=edit_session) `fontsize` | *String* | | `Editor#setFontSize` at [Ace API](http://ace.c9.io/#nav=api&api=editor) `softtabs` | *Boolean* | | `EditSession#setUseSoftTabs()` at [Ace API](http://ace.c9.io/#nav=api&api=edit_session) `tabsize` | *Boolean* | | `Session#setTabSize()` at [Ace API](http://ace.c9.io/#nav=api&api=edit_session) `readonly` | *Boolean* | | `Editor#setReadOnly()` at [Ace API](http://ace.c9.io/#nav=api&api=editor) `wrapmode` | *Boolean* | | `Session#setWrapMode()` at [Ace API](http://ace.c9.io/#nav=api&api=edit_session) `max-lines` | *Number* | | `renderer#$maxLines` at used to for [autoresizing](https://ace.c9.io/demo/autoresize.html) `min-lines` | *Number* | | `renderer#$minLines` at used to for [autoresizing](https://ace.c9.io/demo/autoresize.html `shadow-style` | *String* | | CSS selector for a `