Transform - JSON → YAML
Converts a JSON into YAML. Fully processed in your browser.
Options
Input
Output
Click "Transform" to see the result here.
What Transform is for
Transform converts data and code from one format to another without leaving your browser. Paste a JSON and get back the matching TypeScript interfaces, Zod schema or JSON Schema; convert config files between YAML, JSON and TOML; turn CSS into Tailwind classes. Everything is processed locally, without sending your content to any server.
How to use it
- Click the Transformation picker and choose the conversion. You can search by name, and your recently used and favorited ones stay within reach.
- Paste the content into the Input field (or use the Paste button). For JSON, the Format button indents the text.
- If the conversion has options, like the root type's name, adjust them in the panel above the editors.
- Click Transform. The result appears in Output, where you can copy it or download the file.
Example: JSON to TypeScript
The JSON → TypeScript conversion reads the JSON's structure and generates an interface for each object, including nested ones. This is the tool's real output for the JSON below:
{
"id": 1,
"name": "Ana Souza",
"email": "ana@example.com",
"active": true,
"tags": ["admin", "beta"],
"address": { "city": "São Paulo", "zip": "01310-100" }
}interface Address {
city: string;
zip: string;
}
interface User {
id: number;
name: string;
email: string;
active: boolean;
tags: string[];
address: Address;
}Need to validate the data at runtime, not just type it? The same input can become a Zod schema by choosing JSON → Zod in the picker.
Available conversions
JSON
- JSON → TypeScriptConverts a JSON into TypeScript interfaces.
- JSON → ZodConverts a JSON into a Zod schema.
- JSON → JSON SchemaConverts a JSON into a JSON Schema document (draft 2020-12).
- JSON → YAMLConverts a JSON into YAML.
- JSON → XMLConverts a JSON into XML.
- JSON → GraphQLConverts a JSON into a GraphQL type (SDL). Fields named "id" become ID.
TOON
- JSON → TOONConverts a JSON into TOON (Token-Oriented Object Notation), a compact format for reducing tokens in LLM prompts.
- TOON → JSONConverts TOON (Token-Oriented Object Notation) back into JSON, losslessly.
YAML
- YAML → JSONConverts YAML into JSON.
- YAML → TOMLConverts YAML into TOML.
XML
- XML → JSONConverts XML into JSON.
TypeScript
- TypeScript → JavaScriptStrips the type annotations, producing the equivalent JavaScript.
- TypeScript → ZodConverts a TypeScript interface or type into an equivalent Zod schema.
- TypeScript → JSON SchemaConverts a TypeScript interface or type into a JSON Schema document (draft 2020-12).
CSS
- CSS → TailwindConverts CSS properties into Tailwind (v3.1+) utility classes, using arbitrary values when there's no exact class.
- CSS → JS ObjectConverts CSS into a JavaScript object of styles (React inline styles / styled-components).
- CSS → Template LiteralWraps the CSS in a `css`...`` template literal (styled-components / emotion), reformatted.
Before using the result
Review what was generated
Types and schemas are inferred from a single example. They're a great starting point, but they don't replace your API's official contract: check optional fields, null values and unions before shipping to production.Frequently asked questions
Is my data sent to any server?
No. Conversion happens in your browser, and whatever you paste or type is never sent anywhere. For conversions involving TypeScript, the compiler is downloaded from the site itself the first time you use it — only the compiler's own code is downloaded, your content never leaves the browser.
Which conversions are available?
17 conversions: from JSON to TypeScript, Zod, JSON Schema, YAML, XML, GraphQL and TOON (the compact format for LLM prompts); from TOON back to JSON; from YAML to JSON and TOML; from XML to JSON; from TypeScript to JavaScript, Zod and JSON Schema; and from CSS to Tailwind classes, a JavaScript object, and a template literal.
What's the maximum content size?
The input field accepts up to 10,000,000 characters. If you paste something larger, the tool warns you about the size and pastes nothing, so the browser doesn't freeze.
Why does my JSON throw an error?
The error message points to the exact position of the problem (line and column). The most common causes are single quotes instead of double quotes, a trailing comma after the last item, unquoted keys, and comments — none of which the JSON format allows.
How does Transform handle lists with different objects?
When a list's items have different shapes, the tool generates a type for each shape and combines them into a union (for example, Order | Order1). If you'd rather have a single type with optional fields, adjust it manually after generating.
Are the generated types final?
They're inferred from the example you provide. A null field in the example becomes null, an empty list becomes unknown[], and a field missing from some items isn't marked optional. Use a representative example and review the result before using it in production.
Does the TypeScript → Zod conversion cover everything?
It preserves objects, arrays, optional fields (key?: T or T | undefined), nullable values (T | null becomes .nullable()), literal-value unions (become z.enum) and type aliases used in the interfaces. Still simplified to z.unknown() are generics, TypeScript utility types (Partial, Pick, Record), intersections (&), tuples, TypeScript enums, and the Date type. Review the generated schema.
Is the tool free?
Yes, it's free and requires no sign-up or account.