{
  "markdown": "# jsx-notation\n\n[![npm version](https://img.shields.io/npm/v/jsx-notation)](https://www.npmjs.com/package/jsx-notation)\n[![license](https://img.shields.io/npm/l/jsx-notation)](./LICENSE)\n\n**Compress React/Next.js files, HTML, and SVG by ~40% for AI assistants.** An MCP server and library that converts JSX/TSX, HTML, and SVG into JSXN — a compact notation optimized for LLM token consumption.\n\n**[Try the live demo →](https://sebastianmaciel.github.io/jsx-notation/)**\n\n## Why\n\nEvery 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.\n\nJSXN strips the redundancy while keeping the meaning:\n\n```jsx\n// Before: 278 chars\n<Modal isOpen={showModal} onClose={handleClose}>\n  <div className=\"modal-body\">\n    <h2>{title}</h2>\n    <Button disabled={!selected} onClick={handleSubmit}>Submit</Button>\n  </div>\n</Modal>\n```\n\n```scss\n// After: 170 chars\n@C Modal=M, Button=B\n@P onClick=k, disabled=x, isOpen=io, onClose=oc\n\nM {io:showModal, oc:handleClose}\n  .modal-body\n    h2 (title)\n    B {x:!selected, k:handleSubmit} \"Submit\"\n```\n\nWorks for HTML too:\n\n```html\n<!-- Before: 340 chars -->\n<table class=\"data-table\">\n  <thead>\n    <tr><th>Name</th><th>Email</th><th>Role</th></tr>\n  </thead>\n  <tbody>\n    <tr><td>Alice</td><td>alice@example.com</td><td>Admin</td></tr>\n    <tr><td>Bob</td><td>bob@example.com</td><td>User</td></tr>\n  </tbody>\n</table>\n```\n\n```scss\n// After: 188 chars\ntable.data-table\n thead\n  tr\n   th \"Name\"\n   th \"Email\"\n   th \"Role\"\n tbody\n  tr\n   td \"Alice\"\n   td \"alice@example.com\"\n   td \"Admin\"\n  tr\n   td \"Bob\"\n   td \"bob@example.com\"\n   td \"User\"\n```\n\nWorks for SVG too:\n\n```svg\n<!-- Before: 306 chars -->\n<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"none\"\n  stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\"\n  stroke-linejoin=\"round\">\n  <circle cx=\"12\" cy=\"12\" r=\"10\"></circle>\n  <line x1=\"12\" y1=\"8\" x2=\"12\" y2=\"12\"></line>\n  <line x1=\"12\" y1=\"16\" x2=\"12.01\" y2=\"16\"></line>\n</svg>\n```\n\n```scss\n// After: 251 chars\nsvg {xmlns:http://www.w3.org/2000/svg, viewBox:0 0 24 24, fill:none, stroke:currentColor, stroke-width:2, stroke-linecap:round, stroke-linejoin:round}\n circle {cx:12, cy:12, r:10}\n line {x1:12, y1:8, x2:12, y2:12}\n line {x1:12, y1:16, x2:12.01, y2:16}\n```\n\nIndentation 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.\n\n## Quick start: MCP server\n\nThe main use case — let your AI assistant read JSX/HTML/SVG files in compressed form.\n\n[![Install in VS Code](https://img.shields.io/badge/Install_in-VS_Code-007ACC?logo=visualstudiocode&logoColor=white)](https://vscode.dev/redirect/mcp/install?name=jsx-notation&config=%7B%22command%22%3A%22npx%22%2C%22args%22%3A%5B%22jsx-notation%22%5D%7D) [![Install in Cursor](https://img.shields.io/badge/Install_in-Cursor-blue?logo=cursor&logoColor=white)](https://cursor.com/en/install-mcp?name=jsx-notation&config=eyJjb21tYW5kIjoibnB4IiwiYXJncyI6WyJqc3gtbm90YXRpb24iXX0=)\n\n**Claude Code:**\n\n```bash\nclaude mcp add jsx-notation -- npx jsx-notation\n```\n\n> That's it. Restart Claude Code and the tools will be available. No `npm install` needed — `npx` downloads everything automatically.\n\n**VS Code** (`.vscode/mcp.json`):\n\n```json\n{\n  \"servers\": {\n    \"jsx-notation\": {\n      \"command\": \"npx\",\n      \"args\": [\"jsx-notation\"]\n    }\n  }\n}\n```\n\n> Add this file to your project and restart VS Code. It will detect the server on its own — no extra setup needed.\n\n**Cursor** (`~/.cursor/mcp.json` or `.cursor/mcp.json`):\n\n```json\n{\n  \"mcpServers\": {\n    \"jsx-notation\": {\n      \"command\": \"npx\",\n      \"args\": [\"jsx-notation\"]\n    }\n  }\n}\n```\n\n> Just add this to your config file and restart Cursor. It will pick up the server automatically — nothing else to install.\n>\n> **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\"`).\n\n**Windsurf** (`~/.codeium/windsurf/mcp_config.json`):\n\n```json\n{\n  \"mcpServers\": {\n    \"jsx-notation\": {\n      \"command\": \"npx\",\n      \"args\": [\"jsx-notation\"]\n    }\n  }\n}\n```\n\n> Same format as Cursor. Add it, restart Windsurf, and it's ready.\n\n> **Cline**, **Continue**, **Amazon Q**, and **JetBrains** IDEs (IntelliJ, WebStorm, etc.) also use the same `mcpServers` format. Paste the JSON above into your MCP settings.\n\n**Zed** (`~/.config/zed/settings.json`):\n\n```json\n{\n  \"context_servers\": {\n    \"jsx-notation\": {\n      \"command\": \"npx\",\n      \"args\": [\"jsx-notation\"]\n    }\n  }\n}\n```\n\n> Add this inside your Zed settings file and restart. Zed uses `context_servers` instead of `mcpServers`.\n\nThe server exposes four tools:\n\n| Tool | Description |\n|---|---|\n| `read_jsxn` | Reads a `.jsx/.tsx/.js/.ts/.html/.svg` file and returns its JSXN encoding |\n| `encode_jsxn` | Encodes raw code as a string (`file` or `snippet` mode, `jsx` or `html` format) |\n| `decode_jsxn` | Decodes JSXN back to JSX/TSX or HTML (`jsx` or `html` format) |\n| `write_jsxn` | Decodes JSXN and writes the result to a file (auto-detects `.html`/`.svg` for HTML output) |\n\n### Guiding the AI\n\nAdd this to your `CLAUDE.md` or `.cursorrules` so the assistant prefers JSXN:\n\n```text\nWhen you need to read .jsx, .tsx, .js, .ts, .html, or .svg files for context,\nuse the read_jsxn tool from the jsx-notation MCP server. It returns JSXN compact\nnotation (~40% fewer tokens) that you understand perfectly.\n```\n\n## Library usage\n\nFor programmatic use: `npm install jsx-notation` — exports `encode`, `encodeFile`, `encodeHTML`, `decode`, `decodeFile`.\n\n## Notation reference\n\n### Elements and attributes\n\n| JSX/HTML | JSXN |\n|---|---|\n| `<div className=\"a b\">` / `<div class=\"a b\">` | `.a.b` (implicit div) |\n| `<span id=\"x\">` | `span#x` |\n| `<h2>{title}</h2>` | `h2 (title)` |\n| `<span>Hello</span>` | `span \"Hello\"` |\n| `disabled` (boolean prop) | `{disabled}` |\n| `{...props}` (spread) | `{...props}` |\n\n### Patterns (JSX only)\n\n| JSX | JSXN |\n|---|---|\n| `{cond && <X/>}` | `?cond > X` |\n| `{a ? <A/> : <B/>}` | `?a > A \\| B` |\n| `{items.map(i => <X/>)}` | `*items > X` |\n| `<>...</>` | `_` |\n\n### File-level compression (`encodeFile`)\n\n| Code | JSXN |\n|---|---|\n| `import { X } from 'mod'` | `@I mod: X` |\n| `import type { T } from 'mod'` | `@T mod: T` |\n| `const [x, setX] = useState(0)` | `@state x = 0` |\n| `const ref = useRef(null)` | `@ref ref = null` |\n| `const x = expr` | `x = expr` |\n| JSX return boundary | `---` |\n\n### HTML/SVG-specific\n\n| HTML/SVG | JSXN |\n|---|---|\n| `<!DOCTYPE html>` | `!DOCTYPE html` |\n| `<br>` / `<img>` (void elements) | `br` / `img {src:...}` |\n| `class=\"foo bar\"` | `.foo.bar` |\n| `<circle cx=\"12\" />` (SVG self-closing) | `circle {cx:12}` |\n| `font-family=\"system-ui, sans-serif\"` | `font-family:\"system-ui, sans-serif\"` |\n\nWhen decoding with `{ format: 'html' }`:\n- `class` is used instead of `className`\n- All attribute values are strings (no `{expression}`)\n- Void elements use `<br>` (not `<br />`)\n- SVG elements without children use `<path ... />` (XML self-closing)\n- Empty non-void elements use `<div></div>` (not `<div />`)\n- Values with commas are quoted in props: `{key:\"val, val2\"}`\n\n### Alias headers\n\n| Header | Purpose | Example |\n|---|---|---|\n| `@C` | Component aliases | `@C Button=B, Modal=M` |\n| `@P` | Prop aliases | `@P onClick=k, onChange=g` |\n| `@S` | CSS class aliases (Tailwind) | `@S items-center=ic, font-medium=fm` |\n\n## Contributing\n\nFound a bug or have an idea? [Open an issue](https://github.com/sebastianmaciel/jsx-notation/issues).\n\n## Disclaimer\n\nThis software is provided \"as is\", without warranty of any kind. See the [MIT License](./LICENSE) for full terms.\n\nJSXN is an experimental tool that compresses JSX/TSX, HTML, and SVG source code into a compact notation for use with AI/LLM systems. The encoded output is a lossy representation and may not preserve all semantic details of the original code. The author makes no guarantees about the accuracy of the encoding, the behavior of AI systems consuming JSXN output, or fitness for any particular use case.\n\nThe MCP server component reads files from your local file system. Only `.jsx`, `.tsx`, `.js`, `.ts`, `.html`, and `.svg` files are accepted, with a 10 MB size limit. You are responsible for ensuring it is configured appropriately for your environment. Use at your own risk.\n\n## License\n\n[MIT](./LICENSE) - Sebastián Maciel\n",
  "bytes": 8720,
  "sha": "f524a31fe5b6319b710bc9f5eb1359226037a89b9261b496b285aa183ad0f30b",
  "repo_slug": "sebastianmaciel/jsx-notation",
  "fonte": "repo",
  "truncated": false,
  "api": "https://agentalog.com/api/listings/mcp_io_github_sebastianmaciel_jsx_notation_c93d9962/readme"
}