React CodeMirror

@uiw/react-codemirror wraps CodeMirror 6 in a single React component so applications can drop in a syntax-highlighted, extensible code editor without hand-rolling the imperative CodeMirror setup themselves. It exposes both a <CodeMirror /> component and a useCodeMirror hook, forwarding CodeMirror’s extension system directly through props so language support, linting, autocompletion, and custom themes are all configured declaratively.

The package is the hub of a larger monorepo of companion packages — dozens of prebuilt themes (Dracula, GitHub, Monokai, Nord, VS Code, and more), reusable extensions (basic setup, hyperlinks, mentions, zebra stripes, relative line numbers), and a separate merge-view package for side-by-side diffing — all versioned and released together, letting consumers pull in only what they need.

What You Get

• A <CodeMirror /> component with value, onChange, theme, extensions, and sizing props that map directly onto CodeMirror 6 concepts
• A standalone useCodeMirror hook for teams that want to control the container and lifecycle themselves
• A ReactCodeMirrorRef imperative handle exposing the live EditorView and EditorState for advanced integrations
• Companion packages for dozens of prebuilt syntax themes, language extension bundles, and a side-by-side merge/diff editor
• Full TypeScript typings generated alongside the source, including typed extension and theme options

Common Use Cases

• Embedding a syntax-highlighted code editor in developer tools, admin panels, or documentation playgrounds
• Building in-browser IDEs or code-sandbox experiences with live language support (JS, Python, Go, Markdown, SQL, and more via CodeMirror language packages)
• Adding a themeable JSON/YAML/config editor to a settings or CMS UI
• Rendering a read-only, syntax-highlighted code viewer with custom decorations or line highlighting
• Building diffing/merge UIs via the companion react-codemirror-merge package

Under The Hood

Architecture — The package centers on useCodeMirror (core/src/useCodeMirror.ts), a hook that owns the CodeMirror EditorState/EditorView lifecycle via useLayoutEffect/useEffect. It builds an extension array by merging an updateListener (which drives onChange/onStatistics/onUpdate), a dimension theme computed from height/width props, and the caller’s own extensions prop, then reconciles changes to that array on prop changes via StateEffect.reconfigure. The <CodeMirror /> component (core/src/index.tsx) is a thin forwardRef wrapper that renders the mount <div>, delegates all state to the hook, and exposes editor/state/view through useImperativeHandle. External value changes are diffed against the live document and dispatched as annotated transactions to avoid re-triggering onChange in a loop.

Tech Stack — Written in TypeScript, built with tsbb (a Babel/Rollup-based bundler) into separate cjs/esm outputs, and managed as a Lerna monorepo (lerna.json, npm workspaces spanning core, themes/*, extensions/*, and merge). CodeMirror 6 packages (@codemirror/state, @codemirror/view, @codemirror/commands, @codemirror/theme-one-dark) and React are declared as peer dependencies, so consumers control their own CodeMirror and React versions; the sibling @uiw/codemirror-extensions-basic-setup package is a regular dependency providing the default keymap/gutter/search extension bundle.

Code Quality — The core/src/__tests__/index.test.tsx suite uses Testing Library and react-test-renderer, and goes to real lengths to make CodeMirror work under JSDOM — mocking Range.getClientRects, IntersectionObserver, ResizeObserver, and MutationObserver, and stubbing element layout getters — indicating the maintainers actively fight the gap between a real browser and CodeMirror 6’s layout assumptions rather than skipping coverage. Source files are small and single-purpose (useCodeMirror.ts, getDefaultExtensions.ts, timeoutLatch.ts, utils.ts), each under 210 lines, with consistent TypeScript interfaces for every prop surface.

API Design — The public API stays close to CodeMirror 6’s own vocabulary (extensions, EditorView, EditorState) rather than inventing a parallel abstraction, which keeps the learning curve low for anyone who has read CodeMirror’s own docs, while props like theme: 'light' | 'dark' | 'none' | Extension and basicSetup: boolean | BasicSetupOptions give a simple default path plus an escape hatch into full CodeMirror configuration. Getting started requires only value, onChange, and an extensions array for language support, as shown directly in the README’s copy-pasteable example.