Github SebastianMaciel Jsx NotationGithub SebastianMaciel Jsx Notation

Every time an AI assistant reads your React components, HTML, or SVG files, it wastes tokens on closing tags, repeated className/class attributes, and verbose props. That's context window space that could be used for actual reasoning.

JSXN strips the redundancy while keeping the meaning:

Indentation replaces closing tags. .class and #id work like CSS selectors. Frequent components, props, and CSS classes get short aliases. Values with commas are quoted to avoid delimiter confusion.

The main use case — let your AI assistant read JSX/HTML/SVG files in compressed form.

> That's it. Restart Claude Code and the tools will be available. No npm install needed — npx downloads everything automatically.

> Add this file to your project and restart VS Code. It will detect the server on its own — no extra setup needed.

> Just add this to your config file and restart Cursor. It will pick up the server automatically — nothing else to install. > Troubleshooting: If the server shows "No tools or prompts" with a red dot, Cursor can't find npx in its PATH (common with nvm). Fix it by replacing "npx" with the full path — run which npx in your terminal and use that value (e.g. "/Users/you/.nvm/versions/node/v22.22.0/bin/npx").

> Same format as Cursor. Add it, restart Windsurf, and it's ready.

> Cline, Continue, Amazon Q, and JetBrains IDEs (IntelliJ, WebStorm, etc.) also use the same mcpServers format. Paste the JSON above into your MCP settings.