@willbooster/monaco-react

React components for Monaco Editor, powered by @willbooster/monaco-loader.

This package is a maintained fork of suren-atoyan/monaco-react published as @willbooster/monaco-react.

Installation

yarn add @willbooster/monaco-react

react and react-dom are peer dependencies. monaco-editor is a direct dependency for Monaco type resolution. This package supports React 19.x, Node.js 24 or newer, and is tested with Next.js 16.

TypeScript consumers need a moduleResolution of bundler, node16, or nodenext. monaco-editor 0.56.0 exposes its types only through its exports map — its legacy typings field points at a file that is not in the published tarball — so the legacy node10 resolution cannot find them.

Usage

'use client';importEditorfrom'@willbooster/monaco-react';exportdefaultfunctionPage(){return<Editorheight="90vh"defaultLanguage="typescript"defaultValue="const answer = 42;"/>;}

Editor, DiffEditor, and useMonaco use React client-side hooks. In Next.js App Router projects, import and render them from a Client Component.

API

importEditor,{DiffEditor,loader,useMonaco}from'@willbooster/monaco-react';

• Editor: Monaco standalone code editor component.
• DiffEditor: Monaco standalone diff editor component.
• useMonaco: React hook returning the initialized Monaco instance after hydration. Wrap components that call it in Suspense.
• loader: the @willbooster/monaco-loader instance used by the components.

Editor

<Editorheight="90vh"defaultLanguage="javascript"defaultValue="// hello"onMount={(editor,monaco)=>{editor.focus();monaco.editor.setTheme('vs-dark');}}onChange={(value)=>{console.log(value);}}/>

DiffEditor

<DiffEditorheight="90vh"language="typescript"original="const value = 1;"modified="const value = 2;"/>

Loader Configuration

By default Monaco is loaded from the CDN configured by @willbooster/monaco-loader. You can provide your own Monaco instance or loader paths before rendering an editor.

import*asmonacofrom'monaco-editor';import{loader}from'@willbooster/monaco-react';loader.config({ monaco });

Development

yarn install
yarn check-for-ai
yarn test

yarn test runs unit tests, builds the library, builds the Next.js e2e app, and runs Playwright against it.