Skip to content


Folders and files

Last commit message
Last commit date

Latest commit



56 Commits

Repository files navigation



A web component that allows you to easily add code editor(s) to your web page powered via Ace Editor
Show your support!

Example and usage

You can view a demo of the Ace Editor web component in use here.

How to use the Ace Editor Web Component:

Set a language attribute to a supported programming language you prefer to use - example below

<ace-editor language="python"></ace-editor>

include this script in your HTML document.

  <script src="" defer></script> 

and include this CSS file in your HTML document.

  <link rel="stylesheet" href="">

Note: you can easily customize the look of this web component by hosting your own customized CSS file.

How to use the Ace Editor Web Component with Pre-Defined Code:

You can pre-define a code example inside the editor, simply by inserting the code inside of a ace-editor element like so -

<ace-editor language="python">print('hello world')</ace-editor>


Attribute Meaning Default Required
language The language mode to use for Ace Editor Undefined Yes
max-lines The max number of lines to set Ace Editor height too Undefined No
editor-title The editor title to use Language No
editor-theme The Ace Editor theme to use Monokai No
editor-options Set the ace editor options example - editor-options='{ "maxLines" : "10" }'. NOTE: This will over-write max-lines attribute (if used) Undefined No

Supported Languages

ABAP, ABC, ActionScript, ADA, Apache_Conf, AsciiDoc, Assembly_x86, AutoHotKey, BatchFile, C9Search, C_Cpp, Cirru, Clojure, Cobol, coffee, ColdFusion, CSharp, CSS, Curly, D, Dart, Diff, Dockerfile, Dot, Dummy, DummySyntax, Eiffel, EJS, Elixir, Elm, Erlang, Forth, FTL, Gcode, Gherkin, Gitignore, Glsl, golang, Groovy, HAML, Handlebars, Haskell, haXe, HTML, HTML_Ruby, INI, Io, Jack, Jade, Java, JavaScript, JSON, JSONiq, JSP, JSX, Julia, LaTeX, LESS, Liquid, Lisp, LiveScript, LogiQL, LSL, Lua, LuaPage, Lucene, Makefile, Markdown, Mask, MATLAB, MEL, MUSHCode, MySQL, Nix, ObjectiveC, OCaml, Pascal, Perl, pgSQL, PHP, Powershell, Praat, Prolog, Properties, Protobuf, Python, R, RDoc, RHTML, Ruby, Rust, SASS, SCAD, Scala, Scheme, SCSS, SH, SJS, Smarty, snippets, Soy_Template, Space, SQL, Stylus, SVG, Tcl, Tex, Text, Textile, Toml, Twig, Typescript, Vala, VBScript, Velocity, Verilog, VHDL, XML, XQuery, YAML

Note: the web component will still work with an un-supported language mode for the Ace Editor - tho syntax highlighting, auto-indentation features & etc.. will not work.

Loading extensions

To load & use extensions / plugins for Ace Editor. You will need to define a variable / list called AceEditor_WC_Ace_Editor_EXTS. Each URL / file path in this list will be loaded to the page. Example below -

let AceEditor_WC_Ace_Editor_EXTS = ['']

Install locally

The web component loads all resources for Ace Editor via CDN. You can change this to load all the resource / file paths from a local path. To set files to be loaded from your local path define a variable AceEditor_WC_Ace_Editor_Path with the path to load the files from. Example below -

let AceEditor_WC_Ace_Editor_Path = "path/to/files/"

You can download / find the version of Ace Editor used in the web-component here

Contributing GitHub

Want to improve this? Create a pull request with detailed changes / improvements! If approved you will be added to the list of contributors of this awesome project!

See also the list of contributors who participate in this project.

License GitHub

This project is licensed under the MIT License - see the file for details.