# Code Editor

Source: https://lumeo.nativ.sh/components/code-editor

# Code Editor

A lightweight source-code editor built on CodeMirror 6 — much smaller download than Monaco (≈150KB core + on-demand language packs vs. Monaco's 5MB WASM bundle), with the same essentials: syntax highlighting, line numbers, bracket matching, autocomplete, history, and search.

**Why CodeMirror, not Monaco?** Monaco's WebAssembly + worker bundle weighs ~5MB — awkward on static hosts (Cloudflare Pages caps single assets at 25MB and you stack up fast). CodeMirror 6 is modular ESM: a tiny core plus per-language packs (5–30KB each) that are dynamic-imported only when needed. A page that only edits JSON pays 150KB + ~10KB; a page that edits Python pays for the Python pack, not the C# one.

## When to Use

-   Inline source-code editing — JSON config blobs, SQL snippets, code samples, Markdown drafts
-   Admin surfaces that need a code field but don't want a full IDE-sized download
-   Documentation pages with editable, runnable examples
-   Anywhere a `<Textarea>` is too primitive but Monaco is too heavy

Preview Code

Basic — JSON

Copy Code

Preview Code

C#

Copy Code

Preview Code

JavaScript / TypeScript

JavaScript

TypeScript

Copy Code

Preview Code

HTML / CSS

Copy Code

Preview Code

Markdown

Copy Code

Preview Code

SQL

Copy Code

Preview Code

Python

Copy Code

Preview Code

XML

Copy Code

Preview Code

Read-only

Copy Code

Preview Code

Forced dark theme

Copy Code

Preview Code

Word wrap + tabs

Copy Code

Preview Code

Bound value

Current length: **20** characters

Copy Code