jsx-notation

jsx-notation

AI アシスタント向けに、React／Next.js ファイル、HTML、SVG を約 40% 圧縮します。 JSX/TSX、HTML、SVG を、LLM のトークン消費に最適化されたコンパクトな記法 JSXN に変換する MCP サーバー兼ライブラリです。

ライブデモを試す →

理由

AI アシスタントが React コンポーネント、HTML、SVG ファイルを読むたびに、閉じタグ、繰り返される 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 は mcpServers ではなく context_servers を使います。

サーバーは 4 つのツールを提供します：

ツール	説明
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 のガイド

アシスタントが JSXN を優先的に使うよう、これを CLAUDE.md または .cursorrules に追加してください：

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（ブール型の prop）	{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 の return 境界	---

HTML/SVG 固有

HTML/SVG	JSXN
<!DOCTYPE html>	!DOCTYPE html
<br> / <img>（void 要素）	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' } でデコードする場合：

• className ではなく class が使用されます
• すべての属性値は文字列です（{expression} は使用されません）
• void 要素には <br /> ではなく <br> が使用されます
• 子要素のない SVG 要素には XML の自己終了タグ <path ... /> が使用されます
• 空の非 void 要素には <div /> ではなく <div></div> が使用されます
• カンマを含む値は props 内で引用符で囲まれます：{key:"val, val2"}

エイリアスヘッダー

ヘッダー	用途	例
@C	コンポーネントのエイリアス	@C Button=B, Modal=M
@P	prop のエイリアス	@P onClick=k, onChange=g
@S	CSS クラスのエイリアス（Tailwind）	@S items-center=ic, font-medium=fm

コントリビューション

バグを見つけた場合やアイデアがある場合は、Issue を作成してください。

免責事項

このソフトウェアは「現状有姿」で提供され、いかなる種類の保証もありません。すべての条件についてはMIT Licenseをご覧ください。

JSXN は、JSX/TSX、HTML、SVG のソースコードを圧縮し、AI/LLM システムで使用するための簡潔な記法に変換する実験的なツールです。エンコードされた出力は情報が失われる表現であり、元のコードの意味上の詳細がすべて保持されるとは限りません。エンコードの正確性、JSXN の出力を利用する AI システムの動作、または特定の用途への適合性について、作者はいかなる保証も行いません。

MCP サーバーのコンポーネントは、ローカルファイルシステムからファイルを読み取ります。使用できるのは .jsx、.tsx、.js、.ts、.html、.svg ファイルのみで、サイズ上限は 10 MB です。ご利用の環境に合わせて適切に設定する責任はユーザーにあります。自己責任でご使用ください。

ライセンス

MIT - Sebastián Maciel