粘贴 HTML,得到能直接用的 React JSX：class 改 className、内联样式转对象、标签自闭合。浏览器本地完成。
- 本地处理
- 分类 开发运维
- 适合 格式化、校验、压缩或检查和代码相关的文本。
完全在浏览器里通过 DOMParser 跑(只读 —— 不执行、不上传)。你的输入会同步进 URL,分享链接可复现;含密钥的 HTML 请手动复制输出。
这个工具能做什么
免费在线 HTML 转 JSX 工具。粘贴原始 HTML（从落地页复制的代码、一段 Bootstrap 片段、邮件模板、设计师交付的静态稿）, 立刻得到能直接塞进 React(或 Preact 等)组件、不会被编译器报错的 JSX。我们把 `class` 改成 `className`、`for` 改成 `htmlFor`,把 React 要求驼峰写法的属性全部 驼峰化(`tabindex` 转 `tabIndex`、`maxlength` 转 `maxLength`、`srcset` 转 `srcSet`,所有 `on*` 事件、SVG 属性也一并处理),把 `style="color:red;margin-top:8px"` 转成真正的样式对象 `style={{ color: 'red', marginTop: '8px' }}`,给 void 元素和空元素补上 自闭合斜杠,把 `<!-- 注释 -->` 转成 `{/* JSX 注释 */}`,并丢掉 `<!DOCTYPE>`。解析走浏览器原生 DOMParser 的只读模式。你的 HTML 永远 不会被注入到当前页面,所以即使粘进来一段带 `<script>` 或 `onerror` 的 代码也不会被执行。可选把结果包成一个函数组件,缩进自己挑。100% 在浏览器 本地完成,不上传、不记录。
工具细节
- 输入
- 文本 + 结构化内容
- 页面会根据工具类型展示文本框、数值控件、文件选择或结构化输入。
- 输出
- 即时结果 + 复制 + 预览
- 结果区优先给出可操作结果，支持项会显示复制、下载或可视化预览。
- 隐私
- 浏览器本地处理
- 主工具逻辑未发现外部 API 调用，输入通常留在当前标签页内处理。
- 保存 / 分享
- 可分享链接状态
- 关键设置会进入 URL，复制链接后别人能复现同一组参数。
- 性能预算
- 首屏 JS ≤ 18 KB
- 没有声明 WASM 依赖，适合快速打开和移动端使用。
- 适用场景
- 开发运维 · 程序员
- 分类和职业标签用于推荐相关工具、组织内链，并帮助用户快速判断是否适合当前任务。
怎么用
-
1. 输入
把内容粘贴或拖入工具面板。
-
2. 处理
点击按钮,在浏览器内本地处理,文件不上传。
-
3. 复制 / 下载
一键复制结果或下载到本地。
HTML 转 JSX 适合怎么用
适合穿插在写代码、查问题、做 Review、上线前的小任务里。
适合开发场景
- 格式化、校验、压缩或检查和代码相关的文本。
- 把片段整理好再放进文档、工单、提交或交接材料。
- 不切换工具,快速检查一个小 payload。
开发检查项
- 压缩、混淆这类不可逆处理,先对副本操作。
- 除非确认工具本地处理,不要粘贴密钥和敏感片段。
- 转换后的代码上线前,仍要跑自己的测试或 lint。
下一步可以接着做
这些入口会把当前任务接到更完整的工具链里。
真实使用场景
把一个静态落地页迁成 React 组件
你接手了一份手写的 `index.html`,需要把它做成 `<Landing />` 组件。直接粘进 `.jsx` 文件,第一个 `class=` 和第一个内联 `style="..."` 就编译报错。流程:复制 `<body>` 里的标记,粘到 这里,勾上"包成组件",选 2 空格缩进,复制结果。你得到一个 `export default function Component() { return (...) }`,每个 `class` 已是 `className`,每个 `style` 是真对象,void 标签都 自闭合了。塞进去、改个名,直接开始把静态文案换成 props,而不是 先跟编译器斗十分钟。
把邮件或 CMS 片段搬进你的设计系统
市场同学甩给你一段 CMS 或邮件构建器导出的 HTML：表格、内联 样式、每个 label 上都是 `for`。你想把它做成真正能接 props 的 组件。粘进来转一下,`for="email"` 变 `htmlFor="email"`,内联的 `style="padding:12px 16px"` 变 `style={{ padding: '12px 16px' }}`,散落的 HTML 注释变成 `{/* */}`。接下来把写死的文案换成 `{props.heading}`,而结构早 已能编译通过。
把 Bootstrap / Tailwind 的 HTML 示例转成 JSX
组件库文档给的是 HTML 示例(`class="btn btn-primary"`、`aria-*`、 `data-*`)。复制示例粘到这里,class 列表落成 `className="btn btn-primary"`,而 `aria-label`、`data-toggle` 原样保留(React 对带连字符的 `aria-`/`data-` 属性是原样透传的, 我们不会去驼峰它们)。从"我找到一段代码"到"它进了我的代码库", 这是最快的路。
用设计师导出的 HTML 快速搭原型
设计师从 Figma、Webflow 或某个无代码工具导出 HTML/CSS。结构上 没问题,但满是 JSX 不收的 `class`、`tabindex`、内联样式。一次 性把整份导出转掉,再手工拆成组件。你省掉了通常吃掉原型前半小时 的那一轮繁琐查找替换(`class`→`className`、每一条 style 字符串)。
讲解或文档化 HTML 与 JSX 的差异
带一个刚上手 React 的同事?粘一小段 HTML 给他看 diff:`class` 对 `className`、为什么 `style` 是对象、自闭合是什么、注释写哪。 左右对照让"JSX 不是 HTML"这条规则在十秒内变具体,胜过一整段 文档。把 URL 分享给他(输入就在链接里),他能自己重放并改输入。
常见踩坑
粘了一整页文档,还指望把 `<html>` / `<head>` 当组件渲染。JSX 组件返回的是一棵可渲染元素树。改取 `<body>` 里的内容,或者选"包成组件"后把文档级的外层标签删掉。
以为工具会替你做净化。它只转换,不清洗。源码里的 `onclick` 会变成输出里的 `onClick`,`<script>` 还是 `<script>`。发布前要审一遍 JSX,尤其当 HTML 来自不可信来源时。
忘了 `aria-*` 和 `data-*` 属性是不驼峰化的。React 保留它们的连字符写法(`aria-label`、`data-id`),所以我们故意不动。你要是手工把它们驼峰了反而会把属性写坏。只有 React 专属的那一套(`className`、`htmlFor`、`tabIndex`、事件处理器等)才会被改名。
隐私说明
转换是纯 JavaScript,完全在你的浏览器标签页里跑。你的 HTML 用原生 DOMParser 在一个惰性文档里解析。没有网络请求、不上传、不记录你粘了 什么。唯一会"出门"的东西:你的输入会同步到页面 URL 的 query string 里, 这样"分享链接"能复现同一份转换。这对协作很方便,但也意味着输入里的 任何内容都会进浏览器历史和接收方的服务器日志。如果 HTML 里含密钥、 令牌或不想被记录的内部标记,请手动复制输出,而不是分享 URL。
常见问题
类似工具组合
做你这行的人, 还会一起用这些。