AI导哈

JSX压缩工具

一个用于压缩React/Next.js文件、HTML和SVG的工具，优化AI助手的令牌使用。

  • by SebastianMaciel
  • JavaScript
  • 本地部署
  • 更新于
在 GitHub 查看 SebastianMaciel/jsx-notation

使用说明

jsx符号

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

尝试现场演示→

为什么

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

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：

<!-- Before: 340 chars -->
<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>

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

<!-- Before: 306 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"></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选择器一样工作。频繁使用的组件、道具和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.

服务器公开了四个工具：

工具 说明
read_jsxn 阅读a .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/.svg 用于HTML输出）

引导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 />)
  • 带逗号的值在props中引用： {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

贡献

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

免责声明

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

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

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

许可证

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

相关 MCP