HTML 转 JSX 工具

工具简介

一个在线 HTML 转 JSX 工具，可以把 HTML 片段转换为 React、Preact、Solid、Vue 和 Svelte 代码。适合复制设计稿 HTML、迁移旧项目模板，或者快速生成框架组件代码。

功能说明

多框架输出：支持 React JSX、Preact、Solid、Vue 模板和 Svelte 五种目标格式。

属性自动映射：React / Preact 自动将 class 转为 className，for 转为 htmlFor，colspan 转为 colSpan 等。

style 转换：可选项将内联 style 字符串转为框架需要的对象或保持字符串写法。

自闭合标签：对 img、input、br 等空元素使用自闭合写法。

属性换行：对多属性标签开启每个属性独占一行，方便阅读复杂组件。

示例模板：内置登录表单、卡片列表、表格等示例，一键加载体验。

使用方法

选择目标框架：在工具栏选择 React、Vue 等目标格式。

粘贴 HTML：在左侧输入框粘贴或输入 HTML 片段。

调整选项：根据需求开启 class 转换、style 转对象、自闭合标签等开关。

复制或下载：右侧实时显示转换结果，点击复制按钮或下载为文件。

隐私说明

所有数据处理都在浏览器中完成，不会上传到服务器。无需注册登录，不存储任何用户数据，关闭页面后数据自动清除。

常见问题

转换结果为什么会出现不存在的属性？ 工具基于浏览器 DOMParser 解析，会自动补全不严谨的 HTML。如果输入缺少闭合标签，浏览器可能自动修复，导致输出与原始文本略有差异。

Vue 和 Svelte 输出有什么区别？ 两者都保留 HTML 属性写法，当前输出基本一致。你可以根据项目规范再调整事件绑定和指令写法。

支持转换整个 HTML 页面吗？ 工具处理 body 下的子节点。如果粘贴完整 HTML 文档，只会转换 body 内的内容。

转换后的代码可以直接运行吗？ 可以直接作为组件模板使用，但可能需要根据项目补充 import、组件名和事件处理函数。

为什么选择这个工具？