Caret is a tiny code editor engine for the web. Built on the EditContext API, with Highlight.js, undo/redo, themes and read-only mode. The engine behind Lexius.
npm install @pfmcodes/caret
Live demo
In Chrome or Edge this is the real editor running on the page. Try Tab, Shift+Tab, Ctrl+Z and the arrow keys. Other browsers show a static preview.
Why Caret
Most web code editors ship megabytes. Caret lets the browser handle input through EditContext and does the rest in a few hundred lines.
Keyboard, IME and clipboard come from the browser's own EditContext API, not a hidden textarea.
Live highlighting through Highlight.js, with dark and light themes to pick from.
Full history with the cursor restored to where you were. Ctrl+Z, Ctrl+Y, Ctrl+Shift+Z.
A caret drawn with the Range API, so you can colour it and give it a focus glow.
Line numbers, Tab and Shift+Tab indent, column-preserving arrow keys, plain-text paste.
Set lock: true to display code without letting anyone change it.
| Editor | Size | Notes |
|---|---|---|
| Caret | ~32 KB | EditContext + Highlight.js. Chromium only for now. |
| CodeMirror 6 | ~400 KB | Modular, works in all browsers. |
| Monaco | ~5 MB | The VS Code editor. Feature-rich and heavy. |
Sizes are the author's rough figures from the launch write-up, not independent benchmarks.
Usage
Caret is ES modules only. Install it, give createEditor an element, some starting text and options.
API
createEditor(parent, content, options)| Option | Default | What it does |
|---|---|---|
id | required | Unique id per editor |
language | plaintext | Highlight.js language |
hlTheme | hybrid | Highlight theme name |
dark | — | Dark or light editor |
lock | false | Read-only mode |
theme | — | Custom colours, { dark, light } |
font | — | Font loaded from a URL |
focusColor, shadow, shadowColor | — | Focus glow styling |
| Method | Purpose |
|---|---|
getValue() / setValue(text) | Read or replace the content |
getCursor() / setCursor(pos) | Cursor position |
undo() / redo() | History |
onChange(fn) | Content changed |
onCursorMove(fn) | Cursor moved |
setLanguage(name) | Switch highlighting |
isFocused() | Is the editor focused |
delete() | Tear the editor down |
Check the README for the exact createEditor argument order, since the docs and examples differ on where id goes.
Pick any Highlight.js theme with hlTheme.
Compatibility
About
Caret started because Monaco felt slow and heavy for a small editor. It is the editor engine of Lexius, and it's open source under the MIT license, maintained by Kore Org.