TypeScript icon, indicating that this package has built-in type declarations

    1.6.5 • Public • Published

    Ace Custom Element

    npm version Published on

    This is a custom element wrapper for the Ace code editor.

    The primary reason for this package over other similar packages is to make it easier to use with by including a single script resource so that it can be accessed using services like



    Using a CDN like

    <!-- pin to a specific version if required -->
    <script type="module" src=""></script>
    <ace-editor theme="ace/theme/monokai" value="console.log('hello world');"></ace-editor>

    Try it out on JSFiddle.


    Using a local file:

    npm install ace-custom-element
    <script type="module" src="./node_modules/ace-custom-element/dist/index.min.js"></script>
    <ace-editor theme="ace/theme/monokai" value="console.log('hello world');"></ace-editor>

    Supported properties

    Property Attribute Type Default value Description
    editor - Ace.Editor - A reference to the ace editor.
    value value string "" Editor text value.
    mode mode string ace/mode/javascript Editor mode.
    theme theme string ace/theme/eclipse Editor theme.
    tabSize tab-size number 2 Editor tab size.
    readonly readonly boolean false Places editor in readonly mode.
    softTabs soft-tabs boolean false Sets editor to use soft tabs.
    wrap wrap boolean false Sets editor to wrap text.
    wrap wrap boolean false Sets editor to wrap text.
    valueUpdateMode value-update-mode "start", "end", or "select" "select" Specifies the selection behavior after the value has been updated.
    hideGutter hide-gutter boolean false Hides the editor gutter.
    hideGutterLineHighlight hide-gutter-line-highlight boolean false Hides gutter highlight for the current line.
    hidePrintMargin hide-print-margin boolean false Hides the print margin (vertical ruler).
    basePath base-path string ace/ folder relative to module import path. Specifies the location to load additional ACE resources.

    Supported events

    Event Description
    change Triggered when the editor's value changes (will trigger for each keystroke).
    ready Triggered after the ace editor has been initialized.
    blur Triggered when the editor loses focus.


    npm i ace-custom-element

    DownloadsWeekly Downloads






    Unpacked Size

    10.4 MB

    Total Files


    Last publish


    • socsieng