uiwjs/react-codemirror and the five workspaces behind its React wrapper
CodeMirror 6 component for React. @codemirror https://uiwjs.github.io/react-codemirror/
At a glance
- What is it?
- A React component for CodeMirror 6 that lives in a lerna monorepo of five workspaces. The README is a sponsor wall, so every command a contributor needs sits in the root package.json instead.
- Who is it for?
- Adopt uiwjs/react-codemirror when your team already ships React and wants CodeMirror 6 with the author's themes and language packs rather than assembling them. Stay away when you need a documented props contract, because the repository ships none of its own.
- Can I use it commercially?
- Yes. MIT is a permissive licence: you can use, modify and sell software built on it, as long as you keep its copyright and licence notices.
- Is it still maintained?
- Yes. The repository last received commits 29 days ago.
- What is it written in?
- Mainly TypeScript, according to GitHub's language statistics.
Answers come from the project's GitHub data, last synced on October 23, 2026, and from our analysis. They are not legal advice.
Editorial analysis
The promise is narrow, the README is a sponsor wall
The promise is narrow: a React component that renders CodeMirror 6, so an application does not assemble the editor itself. The audience is developers already on React and already decided on CodeMirror 6, which is what the topic list says: editor, ide, react, typescript, codemirror6. What that audience does not get from the repository is documentation. The README is a sponsor wall. It opens with an App Store link for SubList, a Bill Reminder & Renewal Alerts, and continues down a column of macOS apps, DockLift: Windows, Here, Zipora: Zip/RAR/7Z Unarchiver, Scap: Screenshot & Markup Edit for macOS, Screen Test for macOS, Deskmark for macOS and dozens more, every one a link out to wangchujiang.com or jaywcjlove.github.io. The page is also truncated in the middle of a URL. No install line appears in it, no example component, no props list. The repository description fills that hole in a single sentence, calling the project a CodeMirror 6 component for React and pointing at https://uiwjs.github.io/react-codemirror/ for the real thing. A project can have a documentation site full of examples and a README full of advertising. This one has both, and only the site answers questions.
Five workspaces and a build that ignores the docs site
The top level reads like a monorepo root. Next to .github/, .husky/, .lintstagedrc, .prettierrc, .prettierignore, .gitignore, README.md, SECURITY.md, lerna.json, renovate.json, tea.yaml and tsconfig.json sit five directories whose names the `workspaces` array spells out: themes/*, extensions/*, core, merge and www. That one array is the architecture. The React binding, the theme packages, the language packages, a merge helper and the documentation site are developed side by side but treated as separate products downstream. The build makes the split explicit, scoping to @uiw/* and react-codemirror-merge while passing --ignore www, so nothing under www/ is ever part of a package build. The docs site gets its own two scripts instead:
"build": "lerna exec --scope @uiw/* --scope react-codemirror-merge --ignore www -- npm run build",
"doc": "npm run-script build --workspace www",
"start": "npm run-script start --workspace www"That is the whole packaging story in three lines: one command fans out across every scoped package and skips the site, and two more rebuild the site alone. One wrinkle sits in the cleanup script, which filters on --scope website while the workspace directory is called www, two names that do not line up for anyone tracing scopes by directory.
What a fresh clone can actually run
There is no install command in this project to copy, and a tutorial that shows one has borrowed it from somewhere else. What can be copied is the root package.json, which defines the contributor's path rather than the consumer's. After a clone the file offers two shapes of work: build every package once, or watch a single workspace while you edit it. The build line reaches across the @uiw/* scope and skips the docs site, while the watch and bundle lines go through npm workspaces and name `@uiw/react-codemirror` directly.
"watch": "npm run-script watch --workspace @uiw/react-codemirror",
"bundle": "npm run-script bundle --workspace @uiw/react-codemirror"Those are the two to leave running in a second terminal while you work inside core/, and they exist separately because the component package is what changes when you edit the wrapper. Note what is missing: no install step and no publish step appear in the scripts block at all. Consuming the finished packages from npm is documented somewhere other than this repository.
Two task runners and a test path that never calls jest
Two runners appear in one file and they do not overlap. Build, test and coverage go through lerna exec with a --scope filter; watch, bundle, doc and start go through npm run-script with a --workspace filter. The tests pin a third tool of their own, running under tsbb with --no-watchman, and the coverage run adds --coverage --bail while widening the scope past the component to @uiw/codemirror-extensions-langs.
"test": "lerna exec \"tsbb test --no-watchman\" --scope @uiw/react-codemirror",
"coverage": "lerna exec \"tsbb test --coverage --bail --no-watchman\" --scope @uiw/react-codemirror --scope @uiw/codemirror-extensions-langs"jest sits in the dependency list at ^29.7.0, yet no script in the file calls it by name, so whatever consumes that dependency is not visible at the root. Two more keys in the scripts block are decoration rather than command, a banner of down-arrow blocks and a matching banner of up-arrow blocks, neither of which does anything and both of which turn up in any listing of available scripts.
An engine floor of 16 beside one frozen tool version
Only one runtime constraint is stated anywhere in this repository, and it sits on a single line: `"node": ">=16.0.0"` under `engines`. Everything else floats. @kkt/less-modules ^7.5.4, @kkt/ncc ^1.0.13, husky ^9.0.11, jest ^29.7.0, kkt ^7.5.4, lint-staged ^15.1.0, prettier ^3.0.2, react ~18.2.0, react-dom ~18.2.0, react-test-renderer ~18.2.0 and tsbb ^4.5.1 all carry a range prefix.
"engines": {
"node": ">=16.0.0"
},
"lerna": "8.0.0",
"tsbb": "^4.5.1"One refuses to. `"lerna": "8.0.0"` carries no range character at all, and the `version` script passes --exact so it stays that way when numbers move. So the file holds two claims pulling in opposite directions, a floor of 16 for the environment and one frozen build tool whose own requirement is never stated. The repository nowhere explains how the two were reconciled, which makes the engine field and that pin the first lines to read on a fresh machine, ahead of any prose.
A guard against theme packages growing runtime dependencies
Guard rails take up as much of this manifest as build steps do. Husky installs itself through the `prepare` script, so the git hooks land on any install, and those hooks are driven by .lintstagedrc while .prettierrc and .prettierignore set the formatting boundary for the whole tree. renovate.json takes the dependency side. Then there is the script nobody expects, `check:theme-dependencies`, which runs a plain node file at themes/_scripts/check-runtime-dependencies.cjs. That path says what it protects. A package sitting under themes/ is not meant to carry a runtime dependency of its own, and this check is the mechanism that fails when one turns up. Read it as a position rather than a chore: the themes are meant to stay light, and the language packs under extensions/ live under the same discipline, which is why the coverage script widens past the component package.
The version script stamps numbers and refuses to push
Upgrading means taking a number that moves on a calendar rather than on a list of behaviour changes, and the script that mints those numbers explains the shape. The `version` script runs lerna version --exact --force-publish --no-push --no-git-tag-version. Read the trailing flags as a boundary. --force-publish stamps every workspace with a new number whether or not its files changed, while --no-push and --no-git-tag-version mean the automation prepares everything and stops, leaving credentials and git to a person. The visible consequence is a flat series moving slowly: v4.25.10 on 2026-05-21, v4.25.11 on 2026-07-08, v4.25.12 on 2026-09-24. The last push was on 2026-09-24, the same day as the newest tag, so commits and numbers land together. Plan an upgrade cycle around roughly two months between the first two dates and a little under three months between the last two. On licensing, the repository ships an MIT LICENSE at the root while the root package.json is marked `"private": true`, which separates the terms covering the code from the question of what a consumer installs.
Where the wrapper ends and CodeMirror 6 begins
The wrapper is optional, and the workspace layout is honest about where its edge sits. The repository description calls the project a CodeMirror 6 component for React, and the workspaces separate the binding from the payloads. core is where the component lives, since the watch and test scripts both target `@uiw/react-codemirror`, while themes/* and extensions/* hold the themes and the language packs under scopes of their own, so a team needing one theme does not have to take the set. Writing the binding yourself over CodeMirror 6 keeps one dependency and one file, and the price is assembling extensions by hand. That trade is not obviously wrong, which is why the real limitation here is a documentation gap rather than a design flaw: the repository shows no props contract, no example component and no configuration reference, so every question about options, events and controlled value has to be answered on the hosted docs site. A blunter caution sits in the topic list, which still carries react-codemirror2 beside react-codemirror and @codemirror, along with hook and ide, two names no workspace claims. react-codemirror2 is the old package name, and someone searching for it lands here holding the wrong one.
Editorial conclusion
Adopt uiwjs/react-codemirror when your team already ships React and wants CodeMirror 6 with the author's themes and language packs rather than assembling them. Stay away when you need a documented props contract, because the repository ships none of its own. Before committing, check two lines: the `>=16.0.0` engine floor against your Node version, and the `@uiw/codemirror-extensions-langs` scope in the coverage script, which shows how far the workspace set reaches. Read the docs site first, since that is where the API is served.
Frequently asked questions
How do I install @uiw/react-codemirror?
The README gives no install command, so the place to look is the documentation site at https://uiwjs.github.io/react-codemirror/, which the repository description points to. Note that the root package.json is marked `"private": true`: what you consume is a workspace package such as `@uiw/react-codemirror`, not the monorepo root.
What Node version does uiwjs/react-codemirror need?
The root package.json sets `"node": ">=16.0.0"` under `engines`, while the toolchain pins `"lerna": "8.0.0"` with no range prefix and holds React at `"~18.2.0"`. Nothing in the repository explains how that lower bound relates to the tools its own scripts run.
Is uiwjs/react-codemirror still being worked on?
The last push was on 2026-09-24 and the newest tag listed is v4.25.12, dated the same day, after v4.25.11 on 2026-07-08 and v4.25.10 on 2026-05-21. The repository is not archived.
How is uiwjs/react-codemirror different from using CodeMirror 6 directly?
It packages CodeMirror 6 as a React component and splits the payloads into separate workspaces: core, themes/* and extensions/*. A hand-written wrapper over CodeMirror 6 keeps one dependency instead of a workspace set, at the cost of assembling themes and language packs yourself.
Where do I report a security issue in uiwjs/react-codemirror?
A SECURITY.md file sits at the repository root beside LICENSE and README.md. Which channel it names and what response time to expect are not stated anywhere else at the top level of the repository.
Official sources
Add this badge to your README
If you maintain this project, the badge below links readers to this analysis and shows its maintenance status from the daily GitHub snapshot. Paste the markdown into your README; add ?metric=license or ?metric=stars to the image URL for a different field.
[](https://hysenlabs.com/projects/uiwjs-react-codemirror)Was this useful?