{"id":20224,"library":"monaco-jsx-highlighter","title":"monaco-jsx-highlighter","description":"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.","status":"active","version":"2.77.77","language":"javascript","source_language":"en","source_url":"https://github.com/luminaxster/syntax-highlighter","tags":["javascript","monaco","editor","babel","jsx","syntax","color","coding","highlighting"],"install":[{"cmd":"npm install monaco-jsx-highlighter","lang":"bash","label":"npm"},{"cmd":"yarn add monaco-jsx-highlighter","lang":"bash","label":"yarn"},{"cmd":"pnpm add monaco-jsx-highlighter","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"Peer dependency for parsing JSX/TSX code","package":"@babel/parser","optional":false},{"reason":"Peer dependency for traversing the AST","package":"@babel/traverse","optional":false},{"reason":"Peer dependency for the editor instance","package":"monaco-editor","optional":false}],"imports":[{"note":"Default export; ESM and CJS compatible.","wrong":"const MonacoJSXHighlighter = require('monaco-jsx-highlighter').default","symbol":"MonacoJSXHighlighter","correct":"import MonacoJSXHighlighter from 'monaco-jsx-highlighter'"},{"note":"Named export, not default. Available since v2.","wrong":"import makeBabelParse from 'monaco-jsx-highlighter'","symbol":"makeBabelParse","correct":"import { makeBabelParse } from 'monaco-jsx-highlighter'"},{"note":"Peer dependency; used as argument to constructor.","wrong":"const parse = require('@babel/parser').parse","symbol":"parse","correct":"import { parse } from '@babel/parser'"},{"note":"Default export from @babel/traverse; used as argument.","wrong":"const traverse = require('@babel/traverse').default","symbol":"traverse","correct":"import traverse from '@babel/traverse'"}],"quickstart":{"code":"import monaco from 'monaco-editor';\nimport { parse } from '@babel/parser';\nimport traverse from '@babel/traverse';\nimport MonacoJSXHighlighter, { makeBabelParse } from 'monaco-jsx-highlighter';\n\nconst babelParse = code => parse(code, {\n  sourceType: 'module',\n  plugins: ['jsx']\n});\n\nconst editor = monaco.editor.create(document.getElementById('editor'), {\n  value: 'const AB=<A x={d}><B>{\"hello\"}</B></A>;',\n  language: 'javascript'\n});\n\nconst monacoJSXHighlighter = new MonacoJSXHighlighter(monaco, babelParse, traverse, editor);\nmonacoJSXHighlighter.highlightOnDidChangeModelContent(100);\nmonacoJSXHighlighter.addJSXCommentCommand();","lang":"javascript","description":"Set up Monaco Editor, parse JSX with Babel, and activate JSX highlighting and commenting."},"warnings":[{"fix":"Replace jscodeshift with @babel/parser and @babel/traverse; update constructor arguments.","message":"Breaking change: removed jscodeshift dependency. Constructor signature changed from new MonacoJSXHighlighter(monaco, j, editor) to new MonacoJSXHighlighter(monaco, babelParse, traverse, editor).","severity":"breaking","affected_versions":">=1.0.0"},{"fix":"Update call: highlightOnDidChangeModelContent(debounceTime, afterHighlight) instead of highlightOnDidChangeModelContent(afterHighlight).","message":"highlightOnDidChangeModelContent method changed: first parameter is now debounceTime (number) instead of afterHighlight callback.","severity":"breaking","affected_versions":">=1.0.0"},{"fix":"Ensure cleanup logic is reliable; consider recreating the highlighter instead of reusing.","message":"The dispose method may have defects; reported in v2.","severity":"deprecated","affected_versions":">=2.0.0"},{"fix":"Install peer deps explicitly: npm install @babel/parser @babel/traverse monaco-editor","message":"Must pass all peer dependencies (monaco-editor, @babel/parser, @babel/traverse) as arguments; they are not auto-installed.","severity":"gotcha","affected_versions":">=0.0.0"}],"env_vars":null,"last_verified":"2026-04-25T00:00:00.000Z","next_check":"2026-07-24T00:00:00.000Z","problems":[{"fix":"Run npm install monaco-jsx-highlighter @babel/parser @babel/traverse monaco-editor","cause":"Package not installed or peer dependencies missing.","error":"Cannot find module 'monaco-jsx-highlighter'"},{"fix":"Use import MonacoJSXHighlighter from 'monaco-jsx-highlighter' and instantiate correctly.","cause":"Incorrect import or version mismatch; method renamed in v1.","error":"TypeError: monacoJSXHighlighter.highlightOnDidChangeModelContent is not a function"},{"fix":"Install @babel/traverse: npm install @babel/traverse","cause":"Peer dependency @babel/traverse is not installed.","error":"Module not found: Can't resolve '@babel/traverse'"},{"fix":"Use import MonacoJSXHighlighter from 'monaco-jsx-highlighter' for ESM, or const MonacoJSXHighlighter = require('monaco-jsx-highlighter').default for CJS.","cause":"Using default import incorrectly with require.","error":"MonacoJSXHighlighter is not a constructor"}],"ecosystem":"npm","meta_description":null,"install_score":null,"install_tag":null,"quickstart_score":null,"quickstart_tag":null}