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:
<Modal isOpen={showModal} onClose={handleClose}>
<div className="modal-body">
<h2>{title}</h2>
<Button disabled={!selected} onClick={handleSubmit}>Submit</Button>
</div>
</Modal>
@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:
<table class="data-table">
<thead>
<tr><th>Name</th><th>Email</th><th>Role</th></tr>
</thead>
<tbody>
<tr><td>Alice</td><td>alice@example.com</td><td>Admin</td></tr>
<tr><td>Bob</td><td>bob@example.com</td><td>User</td></tr>
</tbody>
</table>
table.data-table
thead
tr
th "Name"
th "Email"
th "Role"
tbody
tr
td "Alice"
td "alice@example.com"
td "Admin"
tr
td "Bob"
td "bob@example.com"
td "User"
Works for SVG too:
<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>
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"}
| 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