jsx-notation

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.

Try the live demo →

Why

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:

// Before: 278 chars
<Modal isOpen={showModal} onClose={handleClose}>
  <div className="modal-body">
    <h2>{title}</h2>
    <Button disabled={!selected} onClick={handleSubmit}>Submit</Button>
  </div>
</Modal>

// After: 170 chars
@C Modal=M, Button=B
@P onClick=k, disabled=x, isOpen=io, onClose=oc

M {io:showModal, oc:handleClose}
  .modal-body
    h2 (title)
    B {x:!selected, k:handleSubmit} "Submit"

Works for HTML too:

<!-- Before: 340 chars -->
<table class="data-table">
  <thead>
    <tr><th>Name</th><th>Email</th><th>Role</th></tr>
  </thead>
  <tbody>
    <tr><td>Alice</td><td>[email protected]</td><td>Admin</td></tr>
    <tr><td>Bob</td><td>[email protected]</td><td>User</td></tr>
  </tbody>
</table>

// After: 188 chars
table.data-table
 thead
  tr
   th "Name"
   th "Email"
   th "Role"
 tbody
  tr
   td "Alice"
   td "[email protected]"
   td "Admin"
  tr
   td "Bob"
   td "[email protected]"
   td "User"

Works for SVG too:

<!-- Before: 306 chars -->
<svg 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">
  <circle cx="12" cy="12" r="10"></circle>
  <line x1="12" y1="8" x2="12" y2="12"></line>
  <line x1="12" y1="16" x2="12.01" y2="16"></line>
</svg>

// After: 251 chars
svg {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}
 circle {cx:12, cy:12, r:10}
 line {x1:12, y1:8, x2:12, y2:12}
 line {x1:12, y1:16, x2:12.01, y2:16}

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.

Quick start: MCP server

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

Claude Code:

claude mcp add jsx-notation -- npx jsx-notation

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

VS Code (.vscode/mcp.json):

{
  "servers": {
    "jsx-notation": {
      "command": "npx",
      "args": ["jsx-notation"]
    }
  }
}

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

Cursor (~/.cursor/mcp.json or .cursor/mcp.json):

{
  "mcpServers": {
    "jsx-notation": {
      "command": "npx",
      "args": ["jsx-notation"]
    }
  }
}

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").

Windsurf (~/.codeium/windsurf/mcp_config.json):

{
  "mcpServers": {
    "jsx-notation": {
      "command": "npx",
      "args": ["jsx-notation"]
    }
  }
}

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.

Zed (~/.config/zed/settings.json):

{
  "context_servers": {
    "jsx-notation": {
      "command": "npx",
      "args": ["jsx-notation"]
    }
  }
}

Add this inside your Zed settings file and restart. Zed uses context_servers instead of mcpServers.

The server exposes four tools:

| Tool | Description | |---|---| | read_jsxn | Reads a .jsx/.tsx/.js/.ts/.html/.svg file and returns its JSXN encoding | | encode_jsxn | Encodes raw code as a string (file or snippet mode, jsx or html format) | | decode_jsxn | Decodes JSXN back to JSX/TSX or HTML (jsx or html format) | | write_jsxn | Decodes JSXN and writes the result to a file (auto-detects .html/.svg for HTML output) |

Guiding the AI

Add this to your CLAUDE.md or .cursorrules so the assistant prefers JSXN:

When you need to read .jsx, .tsx, .js, .ts, .html, or .svg files for context,
use the read_jsxn tool from the jsx-notation MCP server. It returns JSXN compact
notation (~40% fewer tokens) that you understand perfectly.

Library usage

For programmatic use: npm install jsx-notation — exports encode, encodeFile, encodeHTML, decode, decodeFile.

Notation reference

Elements and attributes

| JSX/HTML | JSXN | |---|---| | <div className="a b"> / <div class="a b"> | .a.b (implicit div) | | <span id="x"> | span#x | | <h2>{title}</h2> | h2 (title) | | <span>Hello</span> | span "Hello" | | disabled (boolean prop) | {disabled} | | {...props} (spread) | {...props} |

Patterns (JSX only)

| JSX | JSXN | |---|---| | {cond && <X/>} | ?cond > X | | {a ? <A/> : <B/>} | ?a > A \| B | | {items.map(i => <X/>)} | *items > X | | <>...</> | _ |

File-level compression (encodeFile)

| Code | JSXN | |---|---| | import { X } from 'mod' | @I mod: X | | import type { T } from 'mod' | @T mod: T | | const [x, setX] = useState(0) | @state x = 0 | | const ref = useRef(null) | @ref ref = null | | const x = expr | x = expr | | JSX return boundary | --- |

HTML/SVG-specific

| HTML/SVG | JSXN | |---|---| | <!DOCTYPE html> | !DOCTYPE html | | <br> / <img> (void elements) | br / img {src:...} | | class="foo bar" | .foo.bar | | <circle cx="12" /> (SVG self-closing) | circle {cx:12} | | font-family="system-ui, sans-serif" | font-family:"system-ui, sans-serif" |

When decoding with { format: 'html' }:

• class is used instead of className
• All attribute values are strings (no {expression})
• Void elements use <br> (not <br />)
• SVG elements without children use <path ... /> (XML self-closing)
• Empty non-void elements use <div></div> (not <div />)
• Values with commas are quoted in props: {key:"val, val2"}

Alias headers

| Header | Purpose | Example | |---|---|---| | @C | Component aliases | @C Button=B, Modal=M | | @P | Prop aliases | @P onClick=k, onChange=g | | @S | CSS class aliases (Tailwind) | @S items-center=ic, font-medium=fm |

Contributing

Found a bug or have an idea? Open an issue.

Disclaimer

This software is provided "as is", without warranty of any kind. See the MIT License for full terms.

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

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

License

MIT - Sebastián Maciel