Free and open-source React code editor component with syntax highlighting, line numbers, indentation, bracket auto-close and diagnostics. No editor dependency; styled with Tailwind CSS.
It uses the overlay technique: a transparent textarea sits exactly on top of a syntax-highlighted pre. The textarea owns the text, caret, selection, undo history and form value; the pre only paints the colours. Highlighting comes from the same dependency-free tokeniser as CodeSnippet, so the language prop accepts javascript, typescript, jsx, tsx, json, bash, shell and plaintext.
Press Escape, then Tab (or Shift+Tab). Escape arms a one-shot escape hatch so the next Tab moves focus instead of inserting indentation. The instruction is attached to the textarea with aria-describedby. In read-only mode Tab is never captured.
Tab and Shift+Tab indent and outdent the current line or every selected line, Enter keeps the current indentation and opens an indented block between brackets, and with autoCloseBrackets (on by default) opening brackets and quotes insert their pair, wrap a selection, and are stepped over when typed again.
Pass diagnostics as an array of { line, column?, severity, message }. Each line is tinted and marked in the gutter, the messages are listed under the code with their line numbers, the list is linked to the textarea with aria-describedby, and any error sets aria-invalid.
Either. Pass value and onChange to control it, or defaultValue to let it manage its own state. minRows sets the minimum height and maxHeight caps it before the code area scrolls.