demo · v144
Insert vs Overwrite
vi, vim, emacs evil-mode, and every retro terminal switch caret shape between insert (bar) and overwrite (block). Press Insert on your keyboard to toggle modes — caret-shape changes with a CSS attribute selector, no script touching the caret.
caret-shape: checking…
mode:
Press Insert to flip between insert & overwrite. Type into the editor.
The quick brown fox jumps over the lazy dog. Place your cursor anywhere here and switch modes.
Mode readout loading…
the API
.editor[data-mode="insert"] { caret-shape: bar; }
.editor[data-mode="overwrite"] { caret-shape: block; }
.editor[data-mode="otp"] { caret-shape: underscore; }
// then in script just flip the attribute — no caret math
editor.addEventListener("keydown", (e) => {
if (e.key === "Insert") {
editor.dataset.mode = editor.dataset.mode === "insert" ? "overwrite" : "insert";
}
});