transform.tools

Transform（transform.tools）是一个在浏览器里直接使用的多语言、多格式代码转换器，由 @ritz078 创建，GitHub 上有对应入口。它的核心价值是：把一种代码或数据格式粘贴进去，立刻得到另一种格式的结果，不需要安装依赖、配置构建工具或写转换脚本。适合前端开发、数据格式迁移、代码生成这几类场景，尤其是临时性、一次性的转换需求。

它主要能转换什么

网站按大类组织转换器，首页可见的分类包括 SVG、HTML、JSON、JSON Schema、CSS，以及 JavaScript、GraphQL、TypeScript、Flow、MongoDB、JSON-LD、YAML、TOML、XML 等。每个分类下是一组具体的“从 A 到 B”转换器，例如：

从这份清单能看出它的定位：不是某个语言的专用工具，而是把常见开发场景里“格式互转”这件事集中到一个网页上。

怎么用

以 SVG 转 JSX 为例，典型流程是：

1. 打开对应转换器页面（例如 SVG 分类下的 SVG to JSX）。
2. 把源内容粘贴进输入区。
3. 页面会输出转换结果，点击复制按钮取走结果。

SVG 转换器有一个值得注意的设置：SVGO 优化默认开启。也就是说，转换过程中会先对 SVG 做一轮优化，可能改变路径数据或移除冗余属性。如果你需要保留原始 SVG 的完整结构，可以在设置里关掉它或调整配置。其他转换器大多没有这类额外处理，属于直接的语法/结构映射。

适合谁、什么情况下用

• 前端开发：把设计稿导出的 SVG 转成 JSX 或 React Native 组件，把 HTML 片段转成 JSX 或 Pug。
• 类型与 Schema 迁移：JSON 转 TypeScript、Zod、Go Struct、Java、Kotlin 等，或者 JSON Schema 转 OpenAPI、Protobuf。
• 数据格式转换：YAML、TOML、XML、JSON 之间互转，处理配置文件时很省事。
• GraphQL 工作流：从 schema 生成 TypeScript 类型、Resolvers 签名、Fragment Matcher 等。

不太适合的情况：需要批量、可重复、纳入 CI 的转换。这类需求更适合用命令行工具或脚本，网页转换器更适合一次性、少量、需要肉眼确认结果的场景。

使用前需要知道的事

• 转换在浏览器里完成，粘贴的内容不会经过服务器往返，但涉及敏感数据时仍建议自行判断。
• 转换结果是按通用规则生成的，复杂或带特殊语法的输入可能需要手工调整。
• 网站没有在资料中说明账号、付费或登录要求，可以直接访问使用。
• 项目由 @ritz078 创建，GitHub 上有仓库，遇到问题或想了解实现可以去那里看。

Transform（transform.tools）是一个多语言在线转换器，把一段源格式的代码或数据粘贴进去，选择目标格式，就能得到转换结果并复制使用。它适合开发中临时做格式迁移、生成类型定义或 Schema 的场景，比如把 JSON 转成 TypeScript、把 HTML 转成 JSX。转换在浏览器里完成，不需要安装依赖。

选择源格式与目标格式

网站按源格式分组，每组下列出可转换到的目标格式。根据页面内容，主要分组包括：

操作方式：先确定你手里内容的格式（源），再在对应分组里点选目标格式，进入该转换页面。

粘贴内容并获取结果

进入具体转换页面后：

1. 在输入区粘贴或输入待转换的源内容。
2. 页面会实时生成转换结果，显示在输出区。
3. 检查输出是否符合预期，尤其是字段命名、类型映射和缩进。

以 JSON 转 TypeScript 为例：输入一段 JSON 对象，输出会是对应的 TypeScript 接口或类型声明。如果 JSON 里嵌套层级较深，输出的类型也会相应嵌套，需要确认生成的类型名是否与你的项目命名习惯一致。

复制输出到项目中使用

结果区提供复制按钮（页面中可见 “Copy”），点击即可把转换结果复制到剪贴板，再粘贴进你的代码文件。复制前建议先通读一遍输出，确认：

• 类型或字段是否完整覆盖了输入内容；
• 目标格式的语法是否符合你项目所用版本；
• 是否需要手动调整命名、导入语句或注释。

SVG 转换的 SVGO 优化开关

SVG 相关的转换页面带有额外设置。页面提示：SVGO optimization is turned on. You can turn it off or configure it in settings（SVGO 优化默认开启，可以关闭或在设置中配置）。

这意味着把 SVG 转成 JSX 或 React Native 时，输出默认经过 SVGO 压缩优化，可能移除冗余属性、合并路径或调整数值。如果你需要保留原始 SVG 的完整结构，应在设置里关闭 SVGO 或调整其配置，再复制结果。

常见卡点

• 格式选错：源格式分组很多，JSON、JSON Schema、TypeScript 容易混淆，选错会导致输入无法解析或输出不符合预期。
• 输出被优化：SVG 转换默认开启 SVGO，未关闭时可能丢失你需要的属性。
• 复杂嵌套：深层嵌套的 JSON 或 Schema 转出的类型/结构较长，需自行核对命名与层级。
• 单向转换：页面按源格式组织，某些目标格式没有反向入口，需要换到对应源格式分组再操作。

Transform.tools 是一个在线“多语言转换器”，把一种格式的代码或数据粘贴进去，直接得到另一种格式的结果。它最适合前端开发、数据建模和 Schema 定义场景：比如把 SVG 图标转成 React 组件、把 JSON 样本转成 TypeScript 类型、把 JSON Schema 转成 OpenAPI 或 Zod。转换在浏览器里完成，不需要安装依赖，适合临时、零散的格式搬运。

前端相关转换

这一组是它最常用的部分，围绕 JSX / React 生态：

• SVG：SVG 转 JSX、转 React Native。页面显示 SVG 转换默认开启 SVGO 优化，可以在设置里关闭或调整。
• HTML：HTML 转 JSX、转 Pug。
• CSS：CSS 转 JS Objects、转 TailwindCSS、转 template literal。

适用条件：你手上有一段现成的 SVG / HTML / CSS，想直接塞进 React 项目或换成另一种写法。注意 SVG 默认会经过 SVGO 压缩，如果对原始路径、属性有精确要求，先关掉优化再转。

数据与 Schema 转换

JSON 及其衍生 Schema 是覆盖最广的一类，输入一种、输出多种：

适用条件：你有一段 JSON 样本或一份 Schema，想生成对应语言的类型定义、ORM 模型或校验器。典型用法是拿接口返回的 JSON 直接生成 TypeScript 接口或 Zod 校验。注意生成结果依赖输入样本的完整性——JSON 里没出现的字段，转出的类型通常也不会包含。

GraphQL 相关转换

GraphQL 一侧支持从 Schema 或查询出发，转成多种工程产物：

• GraphQL 转 Components、Flow、Fragment Matcher、Introspection JSON、JAVA、Resolvers Signature、Schema AST、TypeScript。
• GraphQL 转 TypeScript 是常见用法，用于给查询结果补类型。

适用条件：你在做 GraphQL 客户端或服务端代码生成，想快速拿到类型或签名，而不是配置完整的 codegen 工具链。

其他格式互转

• 配置与数据：TOML 转 JSON、TOML 转 YAML、YAML 转 JSON、YAML 转 TOML、XML 转 JSON。
• 文档：Markdown 转 HTML。
• MongoDB JSON-LD：转 Compacted、Expanded、Flattened、Framed、N-Quads、Normalized。
• 其他：Cadence 转 Go。

适用条件：处理配置文件、文档或 JSON-LD 结构化数据时做一次性转换。

怎么判断它能不能满足你的需求

• 如果你的转换发生在上面列出的方向内，直接打开对应页面粘贴即可，无需登录或安装。
• 如果目标是反向（比如 TypeScript 转 JSON、Zod 转 JSON Schema），先确认列表里有没有对应入口——它按“输入 → 输出”成对组织，不是任意两种格式都能互转。
• 如果转换涉及运行时行为（比如 GraphQL Resolvers 的实际逻辑），工具只生成签名或骨架，业务代码仍需自己补全。

网站由 @ritz078 创建，定位是“省时间的多语言 Web 转换器”，适合开发过程中的临时转换，不适合当作构建流程里的自动化环节。

Transform.tools 适合把一段结构化的代码或数据快速转成另一种格式，比如 JSON 转 TypeScript、HTML 转 JSX、YAML 转 JSON。它本质是一个浏览器端的 polyglot 转换器，覆盖的格式组合很多，但转换结果需要人工核对，尤其是复杂 Schema 和类型定义；同时它更适合快速验证和一次性转换，不建议把敏感或私有数据贴进去。

它是什么

Transform.tools 是一个网页版的多语言格式转换工具，由 @ritz078 创建，定位是“节省时间的 polyglot web converter”。你在一侧输入源内容，选择目标格式，另一侧得到转换结果，再复制走。

从页面可见的转换入口看，它覆盖的范围大致分为几类：

其中 JSON 相关分支尤其多，例如 JSON 可以转到 BigQuery Schema、Flow、Go Bson、Go Struct、GraphQL、io-ts、Java、JSDoc、JSON Schema、Kotlin、MobX-State-Tree Model、Mongoose Schema、MySQL、React PropTypes、Rust Serde、Scala Case Class、TOML、TypeScript、YAML、Zod Schema 等。

使用时的注意事项

转换结果需要人工核对

这是最重要的一条。自动转换能处理大部分机械映射，但遇到下面这些情况容易出问题：

• 复杂嵌套 Schema：多层嵌套、联合类型、可选字段、递归结构，转换后可能丢失约束或语义。
• 类型定义：TypeScript 的泛型、条件类型、映射类型，转成别的类型系统时未必有一一对应。
• 命名与风格：生成的字段名、大小写、缩进、引号风格，通常不会自动匹配你项目的 lint 规则。

所以把结果当成草稿而不是成品，粘贴进项目前先跑一遍类型检查或校验。

不同目标格式的覆盖深度不一致

页面列出的转换项很多，但每个转换的成熟度并不相同。常见组合（如 JSON ↔ YAML、HTML → JSX）通常比较稳；冷门组合或涉及复杂类型系统的转换，可能需要更多手工修正。选择前先想清楚：这个转换是“省掉大部分体力活”，还是“几乎要重写”。

敏感数据不要贴

这是一个在线网页工具，输入内容会经过浏览器和网络。私有 API 响应、含密钥的配置、内部 Schema、客户数据都不适合直接粘贴。这类场景用本地脚本或离线工具更稳妥。

部分转换带可配置项

例如 SVG 转换默认开启了 SVGO 优化，页面提示可以关闭或在设置里配置。这意味着默认输出可能已经过压缩或改写，如果你需要保留原始结构，记得先调整设置。

什么情况适合用

• 快速验证：想看看某个 JSON 转成 TypeScript 大概长什么样，先跑一遍再决定手写还是采用。
• 一次性转换：临时把一份 YAML 配置转成 JSON，用完即走。
• 学习参考：对照源格式和目标格式，理解两种类型系统或数据格式的映射关系。
• 非敏感数据：公开示例、文档片段、自己写的测试数据。

什么情况不适合用

• 敏感或私有数据：改用本地工具。
• 需要严格符合项目规范：生成后仍需按 lint 和风格指南调整，或直接用项目内的代码生成器。
• 复杂类型系统之间的转换：人工核对成本可能接近手写。
• 需要可重复、可自动化的流程：在线工具不适合放进 CI，应该用脚本或 CLI。

怎么用（通用步骤）

1. 打开 transform.tools，在左侧选择源格式，右侧选择目标格式。
2. 把源内容粘贴进输入区。
3. 检查是否有可配置项（如 SVG 的 SVGO 优化），按需调整。
4. 查看输出区结果，复制到本地。
5. 在本地验证：跑类型检查、Schema 校验或格式化，修正不符合预期的部分。

第 5 步是关键。在线转换省的是打字时间，不是核对时间。

小结

Transform.tools 是一个覆盖面很广的在线格式转换器，适合快速验证和一次性转换非敏感内容。它的价值在于省去机械的格式改写，但转换结果——尤其是复杂 Schema 和类型定义——必须人工核对后再使用。涉及私有数据或需要严格符合项目规范的场景，应改用本地工具或项目内的代码生成方案。