uiwjs/react-codemirror

Summary

@uiw/react-codemirror is a React component that wraps CodeMirror 6, written in TypeScript and designed to work without other uiw packages. It exposes the editor through a Hook-friendly API and ships with a family of companion packages for language packs, extensions, and themes. The project targets React 16.8+ so it can use Hooks natively.

What it is useful for

This package is useful when a React application needs an embeddable code or text editor that benefits from CodeMirror 6's modular architecture. The README lists several concrete scenarios: configuring the editor through component props, writing editor integrations in TypeScript with type hints, and using the bundled browser build to drop the editor into a page without a build step. Theme customization is also a focus, with a separate theme editor and ready-made themes such as dracula, abcdef, abyss, atomone, bespin, and copilot.

For more specialized needs, the project ships companion packages that plug into the same component. Examples documented in the README include react-codemirror-merge for diff/merge views, @uiw/codemirror-extensions-color for color-aware behavior, @uiw/codemirror-extensions-mentions for @-style mentions, and @uiw/codemirror-extensions-line-numbers-relative for relative line numbers. Languages are bundled separately through @uiw/codemirror-extensions-langs, and there is also a SwiftUI wrapper for CodeMirror 6.

A documented limitation is that the package requires React 16.8 or newer because it relies on Hooks. The v4 series is also tied to CodeMirror 6, so teams that specifically need CodeMirror 5 will not find that supported here.

How engineers can use it

The documented install is:

npm install @uiw/react-codemirror --save

The README states that this single package is "not dependent on uiw," so the core editor works without installing any other @uiw/* packages. Engineers add companion packages only when they need specific functionality — for example, language support via @uiw/codemirror-extensions-langs, additional extensions like @uiw/codemirror-extensions-hyper-link or @uiw/codemirror-extensions-zebra-stripes, or a particular theme such as @uiw/codemirror-theme-dracula. The README points readers to the demo at uiwjs.github.io/react-codemirror for component props, available extensions, and theme options. Because the README itself does not include a minimal code example, the demo site and the package's API documentation are the best starting points for wiring the component into an app.