# Editor Code Codemirror

Light code editor with a language switcher for TypeScript, JSON, CSS, Markdown and Python.

- id: `editor-code-codemirror`
- Page: https://agentic-ui-kit.com/components/editor-code-codemirror
- Live preview: https://agentic-ui-kit.com/live/component/editor-code-codemirror?piece=editor-code-codemirror

## Install

```bash
agentic-ui add editor-code-codemirror
npx shadcn@4.17.0 add @agentic-ui/editor-code-codemirror
```

## Metadata

- **Level:** block
- **Category:** block
- **Installable in:** Radix UI (registry variant new-york), Base UI (registry variant base-vega)
- **Capabilities:** code-editing, codemirror, language-switch, syntax-highlighting, read-only-mode, diff-gutter, line-numbers, token-theme, escape-tab-focus-exit, dark-mode
- **Intents:** create-edit, configure
- **Suits domains:** devtools, ai-workspace, saas, operations, knowledge
- **Interaction:** typing, keyboard-navigation, selection, select-option, toggle
- **Screen role:** detail
- **Density:** comfortable
- **Dark mode:** yes
- **Use it for:** light code editor with a language switcher for TypeScript, JSON, CSS, Markdown and Python, CodeMirror 6 editor in React with read-only mode and a diff gutter showing changed lines, inline editor for config files, snippets or prompts with syntax highlighting that follows the theme, editable code block with line numbers and a reset to the original version
- **Avoid when:** a read-only side by side diff between two files (use code-diff-viewer), a full IDE with file tree, tabs and language servers, showing code on a marketing page without editing (use marketing-code-showcase), rich text with formatting (use editor-rich-text-tiptap)
- **Preserve when adapting:** escape-then-tab-exit, aria-readonly, token-colours, line-wrapping
- **Replace when adapting:** samples, languages, diff-baseline, control-bar
- **Adaptation effort:** medium
- **Coupling:** low
- **Quality breakdown:** visual 9/10, responsive 9/10, accessibility 9/10, code 9/10
- **Uses primitives:** button
- **npm dependencies:** @codemirror/state, @codemirror/view, @codemirror/commands, @codemirror/language, @codemirror/lang-javascript, @codemirror/lang-json, @codemirror/lang-css, @codemirror/lang-markdown, @codemirror/lang-python, @lezer/highlight, lucide-react
- **npm dependencies (registry):** @codemirror/commands@^6.8.0, @codemirror/lang-css@^6.3.0, @codemirror/lang-javascript@^6.2.0, @codemirror/lang-json@^6.0.0, @codemirror/lang-markdown@^6.3.0, @codemirror/lang-python@^6.1.0, @codemirror/language@^6.11.0, @codemirror/state@^6.5.0, @codemirror/view@^6.36.0, @lezer/highlight@^1.2.0, lucide-react@0.577.0
- **Registry dependencies:** lib-primitives