Registry / web-framework / monaco-jsx-highlighter

monaco-jsx-highlighter

library2.77.77jsnpmunverified

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.

web-framework

npm install monaco-jsx-highlighter

github ↗package ↗homepage ↗

INSTALL

IMPORT

SIG · MONACO-JSX-HIGHLIG

monaco-jsx-highlighter

web-frameworkjavascriptv2.77.77

Install

—

Import

—

Disk

—

Pass rate

0/ 6

Env Coverage0 / 6

glibc

18–22

musl

18–22

Install & Compatibility

Where this runs

tested against v? · npm install

Install × environment matrix

Each cell = how many times install + import succeeded across repeated harness runs. Partial = flaky.
glibc = Debian/Ubuntu slim · musl = Alpine Linux

musl

node 18–226 runs

build_error

glibc

node 18–226 runs

build_error

Code

Verified usage

Verified import paths — ran on the pinned version, not inferred.

MonacoJSXHighlighter

✓ import MonacoJSXHighlighter from 'monaco-jsx-highlighter'

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

Default export; ESM and CJS compatible.

makeBabelParse

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

✗ import makeBabelParse from 'monaco-jsx-highlighter'

Named export, not default. Available since v2.

parse

✓ import { parse } from '@babel/parser'

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

Peer dependency; used as argument to constructor.

traverse

✓ import traverse from '@babel/traverse'

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

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

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();

Debug

Known issues

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

affects: >=1.0.0

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

fix

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

affects: >=1.0.0

deprecatedThe dispose method may have defects; reported in v2.

fix

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

affects: >=2.0.0

gotchaMust 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

affects: >=0.0.0

Errors

Common errors & fixes

Cannot find module 'monaco-jsx-highlighter'

Package not installed or peer dependencies missing.

fix

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

TypeError: monacoJSXHighlighter.highlightOnDidChangeModelContent is not a function

Incorrect import or version mismatch; method renamed in v1.

fix

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

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

Peer dependency @babel/traverse is not installed.

fix

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

MonacoJSXHighlighter is not a constructor

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.

Upgrade

Version history

2.77.77latest on npm

Audit

Dependencies

@babel/parserrequiredPeer dependency for parsing JSX/TSX code

@babel/traverserequiredPeer dependency for traversing the AST

monaco-editorrequiredPeer dependency for the editor instance

Agent activity

2 hits · last 30 days

node

Resources

githubhttps://github.com/luminaxster/syntax-highlighter ↗

packagehttps://www.npmjs.com/package/monaco-jsx-highlighter ↗

homepagehttps://luminaxster.github.io/syntax-highlighter/ ↗