sebastianmaciel avatar

Jsx Notation

sebastianmaciel/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 tools

Public 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

npm version license

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

View the full README on GitHub

Details

Repository
github.com/sebastianmaciel/jsx-notation
Package
jsx-notation
Transport
STDIO
Registry
MCP registry, active