jsx-notation

jsx-notation

为 AI 助手压缩 React/Next.js 文件、HTML 和 SVG，体积减少约 40%。 这是一个 MCP 服务和库，可将 JSX/TSX、HTML 和 SVG 转换为 JSXN——一种针对大模型 token 消耗优化的紧凑表示法。

试用在线演示 →

为什么要用

每当 AI 助手读取你的 React 组件、HTML 或 SVG 文件时，都会把 token 浪费在闭合标签、重复的 className/class 属性和冗长的 props 上。这些上下文窗口空间本可以用于真正的推理。

JSXN 会去除冗余，同时保留含义：

// 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"

HTML 也适用：

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

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"></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}

缩进取代闭合标签。.class 和 #id 的用法类似 CSS 选择器。常见组件、props 和 CSS 类会获得短别名。包含逗号的值会加引号，以避免分隔符造成混淆。

快速开始：MCP 服务

主要用途——让你的 AI 助手以压缩格式读取 JSX/HTML/SVG 文件。

Claude Code：

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

就这么简单。重启 Claude Code 后即可使用这些工具。无需 npm install——npx 会自动下载所有内容。

VS Code（.vscode/mcp.json）：

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

将此文件添加到项目中并重启 VS Code。它会自动检测服务，无需额外设置。

Cursor（~/.cursor/mcp.json 或 .cursor/mcp.json）：

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

只需将此内容添加到配置文件并重启 Cursor。它会自动识别服务，无需安装其他内容。

故障排除： 如果服务显示“No tools or prompts”并带有红点，说明 Cursor 无法在 PATH 中找到 npx（使用 nvm 时很常见）。解决方法是将 "npx" 替换为完整路径——在终端运行 which npx，并使用该命令的输出（例如 "/Users/you/.nvm/versions/node/v22.22.0/bin/npx"）。

Windsurf（~/.codeium/windsurf/mcp_config.json）：

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

格式与 Cursor 相同。添加配置并重启 Windsurf，即可使用。

Cline、Continue、Amazon Q 和 JetBrains IDE（IntelliJ、WebStorm 等）也使用相同的 mcpServers 格式。将上面的 JSON 粘贴到 MCP 设置中即可。

Zed（~/.config/zed/settings.json）：

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

将此内容添加到 Zed 设置文件中并重启。Zed 使用 context_servers，而不是 mcpServers。

该服务提供四个工具：

工具	描述
read_jsxn	读取 .jsx/.tsx/.js/.ts/.html/.svg 文件，并返回其 JSXN 编码
encode_jsxn	将原始代码编码为字符串（file 或 snippet 模式，jsx 或 html 格式）
decode_jsxn	将 JSXN 解码回 JSX/TSX 或 HTML（jsx 或 html 格式）
write_jsxn	解码 JSXN 并将结果写入文件（输出为 HTML 时会自动检测 .html/.svg）

引导 AI

将以下内容添加到 CLAUDE.md 或 .cursorrules，让助手优先使用 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.

库的用法

用于编程调用：npm install jsx-notation——导出 encode、encodeFile、encodeHTML、decode、decodeFile。

表示法参考

元素和属性

JSX/HTML	JSXN
<div className="a b"> / <div class="a b">	.a.b（隐式 div）
<span id="x">	span#x
<h2>{title}</h2>	h2 (title)
<span>Hello</span>	span "Hello"
disabled（布尔属性）	{disabled}
{...props}（展开）	{...props}

模式（仅限 JSX）

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

文件级压缩（encodeFile）

代码	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 返回边界	---

HTML/SVG 专用

HTML/SVG	JSXN
<!DOCTYPE html>	!DOCTYPE html
<br> / <img>（空元素）	br / img {src:...}
class="foo bar"	.foo.bar
<circle cx="12" />（SVG 自闭合）	circle {cx:12}
font-family="system-ui, sans-serif"	font-family:"system-ui, sans-serif"

使用 { format: 'html' } 解码时：

• 使用 class 而不是 className
• 所有属性值都是字符串（无 {expression}）
• 空元素使用 <br>（而不是 <br />）
• 没有子元素的 SVG 元素使用 <path ... />（XML 自闭合）
• 空的非空元素使用 <div></div>（而不是 <div />）
• 属性中含逗号的值会加引号：{key:"val, val2"}

别名标头

标头	用途	示例
@C	组件别名	@C Button=B, Modal=M
@P	属性别名	@P onClick=k, onChange=g
@S	CSS 类别名（Tailwind）	@S items-center=ic, font-medium=fm

贡献

发现错误或有想法？提交问题。

免责声明

本软件按“原样”提供，不提供任何形式的保证。完整条款请参阅 MIT 许可证。

JSXN 是一款实验性工具，可将 JSX/TSX、HTML 和 SVG 源代码压缩为紧凑记法，以供 AI/LLM 系统使用。编码后的输出是有损表示，可能无法保留原始代码的所有语义细节。作者不保证编码的准确性、使用 JSXN 输出的 AI 系统的行为，也不保证其适用于任何特定用途。

MCP 服务组件会读取本地文件系统中的文件。仅接受 .jsx、.tsx、.js、.ts、.html 和 .svg 文件，大小限制为 10 MB。你有责任确保其配置适合你的环境。使用风险自负。

许可证

MIT - Sebastián Maciel