Nocturnal Pumpkin Maelstrom


    2.2.7-b1 • Public • Published

    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


    npm i @granite-elements/ace-widget

    DownloadsWeekly Downloads






    Unpacked Size

    58.4 kB

    Total Files


    Last publish


    • lostinbrittany