EditArea — Lightweight Embeddable Code Editor for the Browser

What is EditArea

EditArea is a lightweight, embeddable code editor for the browser. It’s designed to turn a regular HTML <textarea> into a practical editing surface for source code — directly inside your application, admin panel, CMS, or documentation site. If you need a simple client-side editor that feels like “just a better textarea”, EditArea is built for that job.

Unlike hosted editors or server-based IDEs, EditArea runs in the page. You include the scripts, point it at a textarea, and initialize it with a small JavaScript configuration. From that moment, your users can edit code with syntax highlighting, line numbers, indentation support, and the tools expected in everyday workflows.

Quick start

Include files

Add the required JavaScript and assets to your page (locally hosted, or via your build pipeline). Keep assets versioned so deployments remain stable.

Initialize with editAreaLoader.init

Target a textarea by id and enable the features you need (syntax mode, toolbar, resizing, initial height).

<textarea id="code" name="code">function hello() {
  console.log("Hello, EditArea!");
}</textarea>

<script src="/js/editarea-loader.js"></script>
<script>
  editAreaLoader.init({
    id: "code",
    syntax: "js",
    start_highlight: true,
    allow_resize: "both",
    min_height: 280,
    toolbar: "search, go_to_line, fullscreen"
  });
</script>

For a working example, open the full demo page. For configuration details, see the documentation section (options, events, themes, and language strings).

Demo and documentation

Full example page

The legacy demo URL is preserved for backlinks: /editarea/editarea/exemples/exemple_full.html.

Documentation

Docs are available here: /editarea/editarea/docs/.

Downloads and releases

A plain-text changelog is available at /editarea/editarea/change_log.txt.