{"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.","language":"javascript","status":"active","last_verified":"Sat Apr 25","install":{"commands":["npm install monaco-jsx-highlighter"],"cli":null},"imports":["import MonacoJSXHighlighter from 'monaco-jsx-highlighter'","import { makeBabelParse } from 'monaco-jsx-highlighter'","import { parse } from '@babel/parser'","import traverse from '@babel/traverse'"],"auth":{"required":false,"env_vars":[]},"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.","tag":null,"tag_description":null,"last_tested":null,"results":[]},"compatibility":null}