CodeEditor
A CodeMirror-backed JSX/JavaScript editor with syntax highlighting, dark/light theming, and Tab-to-indent.
Installation
npx dafink-ui add code-editorRequires: @uiw/react-codemirror, @codemirror/lang-javascript, @codemirror/autocomplete
Demo
Props
| Name | Type | Default | Description |
|---|---|---|---|
| value | string | - | Required. The current code string. |
| onChange | (value: string) => void | - | Required. Fires with the updated value on every edit. |
| extensions | Extension[] | [] | Extra CodeMirror extensions layered on top of the built-ins, e.g. a project-specific autocompletion({ override: [...] }) call. |
| aria-label | string | - | Accessible name for the editor region. |
| className | string | "" | Additional Tailwind classes merged onto the root wrapper. |
| minHeight | string | - | CSS min-height for the editor surface (e.g. "200px"). Keeps the editor from collapsing to a single line on short content. |