io.github.SebastianMaciel/jsx-notation

Decodes JSXN compact notation back into standard JSX/TSX or HTML source code. Use "snippet" mode for JSXN body fragments (just the template). Use "file" mode for complete JSXN files with imports, types, hooks, etc. Use format "html" to decode to HTML output.

Encodes raw JSX/TSX source code or HTML into JSXN compact notation (~40% fewer tokens). Use "snippet" mode for JSX fragments (just the template). Use "file" mode for complete React/Next.js files with imports, types, hooks, etc. Use format "html" to encode HTML source.

Reads a React/Next.js file (.jsx, .tsx, .js, .ts), HTML file (.html), or SVG file (.svg) from disk and returns its JSXN-compressed representation (~40% fewer tokens). Use this instead of reading JSX/TSX files directly when you need to understand component structure, props, and rendering logic. For full files with imports/hooks/logic, the file-level encoding is used automatically. For .html and .svg files, the HTML encoder is used.

Decodes JSXN notation and writes the resulting JSX/TSX or HTML to a file on disk. Creates parent directories if needed. Writes to .jsx/.tsx/.js/.ts/.html/.svg files. For .html and .svg files, decodes with HTML format (class attrs, void elements, SVG self-closing, etc.). ## JSXN Format Reference JSXN is a compact notation for React/Next.js code that saves ~40% tokens. ### File-level headers - `@I module: default Name, x, y` → `import Name, { x, y } from "module"` - `@I "styles.css"` → `import "styles.css"` - `@T module: Type1` → `import type { Type1 } from "module"` ### Directives - `"use client"` / `"use server"` → passed through as-is ### Types - `Name { field: Type }` → `interface Name { field: Type }` - `Name = Type | Other` → `type Name = Type | Other` ### Function blocks - `export default Name(params)` → function signature - `@state count = 0` → `const [count, setCount] = useState(0)` - `@ref inputRef = null` → `const inputRef = useRef(null)` - `name = useHook(args)` → `const name = useHook(args)` - `variable = expr` → `const variable = expr` - `let variable = expr` → preserved as `let` - `---` → separator; everything after is the JSX return body ### JSX body notation - **Alias headers** (optional): `@C Button=B`, `@P onClick=k`, `@S items-center=ic` - **Elements**: `tag.class1.class2#id {prop:val, flag} "text"` or `(expr)` - **Implicit div**: `.className` (div is omitted when it has selectors) - **Nesting**: 1-space indentation per level - **Fragments**: `_` → `<>...</>` - **Conditionals**: `?cond > Element` → `{cond && (<Element />)}` - **Ternaries**: `?cond > A | B` → `{cond ? (<A />) : (<B />)}` - **Maps**: `*items > Element` → `{items.map(item => (<Element />))}` - **Text nodes**: `"Hello"` → raw text - **Expressions**: `(expr)` → `{expr}` - **Props**: `{key:value}` string for HTML attrs, `{key:expr}` expression otherwise - **Boolean props**: `{disabled}` → `disabled` - **Spread**: `{...props}` → `{...props}` - **Self-closing**: element with no chi…