monaco-jsx-highlighter

2.77.77 verified Sat Apr 25 auth: no javascript

An extensible library for highlighting JSX syntax in the Monaco Editor using Babel. Current stable version: 2.77.77. Released on npm with active maintenance. Key differentiators: directly uses Babel for parsing (not jscodeshift), exposes AST for custom highlighting, supports JSX commenting, and provides debounced highlight updates. Requires peer dependencies: @babel/parser, @babel/traverse, and monaco-editor (>=0.21). Suitable for React JSX and TSX projects using Monaco Editor.

Common errors

error Cannot find module 'monaco-jsx-highlighter' ↓

cause Package not installed or peer dependencies missing.

fix

Run npm install monaco-jsx-highlighter @babel/parser @babel/traverse monaco-editor

error TypeError: monacoJSXHighlighter.highlightOnDidChangeModelContent is not a function ↓

cause Incorrect import or version mismatch; method renamed in v1.

fix

Use import MonacoJSXHighlighter from 'monaco-jsx-highlighter' and instantiate correctly.

error Module not found: Can't resolve '@babel/traverse' ↓

cause Peer dependency @babel/traverse is not installed.

fix

Install @babel/traverse: npm install @babel/traverse

error MonacoJSXHighlighter is not a constructor ↓

cause Using default import incorrectly with require.

fix

Use import MonacoJSXHighlighter from 'monaco-jsx-highlighter' for ESM, or const MonacoJSXHighlighter = require('monaco-jsx-highlighter').default for CJS.

Warnings

breaking Breaking change: removed jscodeshift dependency. Constructor signature changed from new MonacoJSXHighlighter(monaco, j, editor) to new MonacoJSXHighlighter(monaco, babelParse, traverse, editor). ↓

fix Replace jscodeshift with @babel/parser and @babel/traverse; update constructor arguments.

breaking highlightOnDidChangeModelContent method changed: first parameter is now debounceTime (number) instead of afterHighlight callback. ↓

fix Update call: highlightOnDidChangeModelContent(debounceTime, afterHighlight) instead of highlightOnDidChangeModelContent(afterHighlight).

deprecated The dispose method may have defects; reported in v2. ↓

fix Ensure cleanup logic is reliable; consider recreating the highlighter instead of reusing.

gotcha Must pass all peer dependencies (monaco-editor, @babel/parser, @babel/traverse) as arguments; they are not auto-installed. ↓

fix Install peer deps explicitly: npm install @babel/parser @babel/traverse monaco-editor

Install

npm install monaco-jsx-highlighter

yarn add monaco-jsx-highlighter

pnpm add monaco-jsx-highlighter

Imports

MonacoJSXHighlighter

wrong

const MonacoJSXHighlighter = require('monaco-jsx-highlighter').default

correct

import MonacoJSXHighlighter from 'monaco-jsx-highlighter'

Default export; ESM and CJS compatible.

makeBabelParse

wrong

import makeBabelParse from 'monaco-jsx-highlighter'

correct

import { makeBabelParse } from 'monaco-jsx-highlighter'

Named export, not default. Available since v2.

parse

wrong

const parse = require('@babel/parser').parse

correct

import { parse } from '@babel/parser'

Peer dependency; used as argument to constructor.

traverse

wrong

const traverse = require('@babel/traverse').default

correct

import traverse from '@babel/traverse'

Default export from @babel/traverse; used as argument.

Quickstart

Set up Monaco Editor, parse JSX with Babel, and activate JSX highlighting and commenting.

import monaco from 'monaco-editor';
import { parse } from '@babel/parser';
import traverse from '@babel/traverse';
import MonacoJSXHighlighter, { makeBabelParse } from 'monaco-jsx-highlighter';

const babelParse = code => parse(code, {
  sourceType: 'module',
  plugins: ['jsx']
});

const editor = monaco.editor.create(document.getElementById('editor'), {
  value: 'const AB=<A x={d}><B>{"hello"}</B></A>;',
  language: 'javascript'
});

const monacoJSXHighlighter = new MonacoJSXHighlighter(monaco, babelParse, traverse, editor);
monacoJSXHighlighter.highlightOnDidChangeModelContent(100);
monacoJSXHighlighter.addJSXCommentCommand();