@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.

Usage

'use client';

import Editor from '@willbooster/monaco-react';

export default function Page() {
  return <Editor height="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

import Editor, { 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

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

DiffEditor

<DiffEditor height="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 * as monaco from '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.