
Jsx Notation
If you're feeding React components or HTML to an LLM and watching your context window vanish, this server compresses JSX, TSX, HTML, and SVG files by around 40% into a compact notation. It exposes four tools: read_jsxn to pull files in compressed form, encode_jsxn and decode_jsxn for string conversion, and write_jsxn to decode and save. Indentation replaces closing tags, CSS-style shorthand handles classes and IDs, and frequently used components get aliased. Works across Claude Code, VS Code, Cursor, Windsurf, and Zed via npx. You get more room for reasoning without touching your source files. The library exports encode, decode, and their file-based variants if you need programmatic access.
- tools
- 4
- transport
- STDIO
- last updated
- Feb 25, 2026
Tools
4 toolsPublic tool metadata for what this MCP can expose to an agent.
read_jsxnReads a `.jsx/.tsx/.js/.ts/.html/.svg` file and returns its JSXN encoding
Reads a `.jsx/.tsx/.js/.ts/.html/.svg` file and returns its JSXN encoding
No parameter schema in public metadata yet.
encode_jsxnEncodes raw code as a string (`file` or `snippet` mode, `jsx` or `html` format)
Encodes raw code as a string (`file` or `snippet` mode, `jsx` or `html` format)
No parameter schema in public metadata yet.
decode_jsxnDecodes JSXN back to JSX/TSX or HTML (`jsx` or `html` format)
Decodes JSXN back to JSX/TSX or HTML (`jsx` or `html` format)
No parameter schema in public metadata yet.
write_jsxnDecodes JSXN and writes the result to a file (auto-detects `.html`/`.svg` for HTML output)
Decodes JSXN and writes the result to a file (auto-detects `.html`/`.svg` for HTML output)
No parameter schema in public metadata yet.
Sponsors
Readme
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.
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
Details
- Repository
- github.com/sebastianmaciel/jsx-notation
- Package
jsx-notation- Transport
- STDIO
- Registry
- MCP registry, active