ace-widget | Vaadin

Polymer wrap around Ace editor

Published on Vaadin  Directory Stars on Published on


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

Originally based on pjako's fork of PolymerLabs ace-element.

Polymer 3.x. element The legacy Polymer 2.x version is available here

Doc and demo

Usage example

<ace-widget placeholder="Write something... Anything..." initial-focus>


Install the component using npm:

$ npm i @granite-elements/ace-widget --save

Once installed, import it in your application:

import '@granite-elements/ace-widget/ace-widget.js';

Running demos and tests in browser

  1. Fork the ace-widget repository and clone it locally.

  2. Make sure you have npm and the Polymer CLI installed.

  3. When in the ace-widget directory, run npm install to install dependencies.

  4. Serve the project using Polyumer CLI:

    polymer serve --npm

  5. Open the demo in the browser


Attribute Type Default Description
theme String `` Editor#setTheme at Ace API
mode String `` EditSession#setMode at Ace API
font-size String `` Editor#setFontSize at Ace API
softtabs Boolean `` EditSession#setUseSoftTabs() at Ace API
tab-size Boolean `` Session#setTabSize() at Ace API
readonly Boolean `` Editor#setReadOnly() at Ace API
wrap Boolean `` Session#setWrapMode() at Ace API
autoComplete Object `` Callback for langTools.addCompleter like the example at Ace API
minlines Number 15 Editor.setOptions({minlines: minlines})
maxlines Number 30 Editor.setOptions({minlines: maxlines})
initialFocus Boolean `` If true, Editor.focus() is called upon initialisation
placeholder String `` A placeholder text to show when the editor is empty


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


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


  1. Fork it!
  2. Create your feature branch: git checkout -b my-new-feature
  3. Commit your changes: git commit -m 'Add some feature'
  4. Push to the branch: git push origin my-new-feature
  5. Submit a pull request :D


MIT License


Link to this version
ImportedReleased 30 August 2018MIT License
Framework Support
Polymer 3.0+
Also supported:
Polymer 1 (1.2.5)Polymer 2 (1.3.8)
Browser Independent
Install with
npm install @granite-elements/ace-widget"@2.2.7-b1"
Run the above npm command in your project folder. If you have any issues installing, please contact the author.
Release notes - Version 2.2.7-b1


  • @polymer/polymer#^3.0.0
  • ace-builds#^1.4.0