🛠️ JSX Sanitizer

A high-performance utility to automatically convert legacy HTML/SVG code snippets into React-compatible JSX/TSX. No more manual className or viewBox fixes.

⚡ Quick Start

Fix a file in-place instantly:

bun repair my-component.tsx

Or use the CLI to see changes without modifying the file:

jsx-sanitizer snippet.html

🔥 Features

• Standard HTML Conversion: Automatically maps class → className, for → htmlFor, and dozens more.
• SVG Precision: Corrects viewBox, strokeWidth, fillRule, etc.
• Style Repair: Effortlessly converts string style="..." into React's double-curly style={{ ... }} objects.
• Event Handling: Maps onclick → onClick and supports dashed events like on-click.
• Stream Support: Pipe HTML directly into the tool:

  cat icon.svg | jsx-sanitizer | pbcopy

🚀 Installation

Install globally for easy access:

bun install -g jsx-sanitizer

Or just run it once via bunx:

bunx jsx-sanitizer <file>

🛠 Usage Examples

CLI (File-based)

# Preview changes in terminal
jsx-sanitizer icon.svg

# Repair file in-place
jsx-sanitizer icon.svg --in-place

Pipe-based (Snippet Repair)

# Fix an SVG from your clipboard (macOS example)
pbpaste | jsx-sanitizer | pbcopy

📦 API Usage

You can also use the sanitizer as a library in your own TypeScript projects:

import { sanitizeJsx } from 'jsx-sanitizer';

const htmlSnippet = '<div class="btn" style="color: blue;">Submit</div>';
const jsxSnippet = sanitizeJsx(htmlSnippet);

console.log(jsxSnippet);
// Output: <div className="btn" style={{ color: "blue" }}>Submit</div>

📜 License

MIT © manasdotdev