Jsx Notation

jsx符号

](https://www.npmjs.com/package/jsx-notation) 

为AI助手将React/Next.js文件、HTML和SVG压缩约40%。 一个MCP服务器和库，将JSX/TSX、HTML和SVG转换为JSXN——一种针对LLM令牌消费进行优化的紧凑符号。

尝试现场演示→

为什么

每次AI助手读取你的React组件、HTML或SVG文件时，它都会在关闭标签上浪费标记，重复 className/class 属性和冗长的道具。这是可用于实际推理的上下文窗口空间。

JSXN在保留含义的同时去除了冗余：

// Before: 278 chars

  

    
{title}

    Submit
  

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

  
    NameEmailRole
  
  
    Alicealice@example.comAdmin
    Bobbob@example.comUser
  

// After: 188 chars
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"

也适用于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选择器一样工作。频繁使用的组件、道具和CSS类会得到短别名。带逗号的值被引用以避免分隔符混淆。

快速入门：MCP服务器

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

克劳德代码：

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/mcp.json 或 .cursor/mcp.json):

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

只需将此添加到您的配置文件中，然后重新启动Cursor。它将自动启动服务器，无需安装其他任何东西。 故障排除： 如果服务器显示带红点的“无工具或提示”，则游标找不到 npx 在其路径中（与nvm相同）。通过更换来修复它 "npx" 使用完整路径--run which npx 在终端中使用该值（例如。 "/Users/you/.nvm/versions/node/v22.22.0/bin/npx").

帆板运动 (~/.codeium/windsurf/mcp_config.json):

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

格式与游标相同。添加它，重新启动Windsurf，它就准备好了。

克莱恩, 继续, 亚马逊Q，以及 捷脑 IDE（IntelliJ、WebStorm等）也使用相同的 mcpServers 格式。将上面的JSON粘贴到MCP设置中。

泽德 (~/.config/zed/settings.json):

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

将此添加到Zed设置文件中并重新启动。Zed使用 context_servers 而不是 mcpServers.

服务器公开了四个工具：

引导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.

符号参考

元素和属性

/ | .a.b （隐式div）| | | span#x | | {title} | h2 (title) | | Hello | span "Hello" | | disabled （布尔属性）| {disabled} | | {...props} （传播）| {...props}` |

模式（仅限JSX）

文件级压缩(encodeFile)

HTML/SVG特定

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

• class 使用代替 className
• 所有属性值都是字符串（否 {expression})
• 使用空心元件 `

（不是 `)

• 不带子元素的SVG元素 `

` （XML自动关闭）

• 使用空的非空元素 `

（不是 `)

• 带逗号的值在props中引用： {key:"val, val2"}

别名标题

贡献

发现bug还是有想法？ 打开一个问题.

免责声明

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

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

MCP服务器组件从本地文件系统读取文件。仅 .jsx, .tsx, .js, .ts, .html，以及 .svg 文件被接受，大小限制为10 MB。您有责任确保它针对您的环境进行了适当的配置。使用风险自负。

许可证

麻省理工学院 -塞巴斯蒂安·马西埃尔