Documentation

Learn JSONFiddle by workflow

Short guides for viewing, querying, editing, converting, and exporting structured data in the browser.

Type Generation

The Type Generation feature analyzes the structure of your JSON data and produces type definitions you can paste directly into your codebase. Instead of manually writing interfaces, schemas, or structs, let JSONFiddle derive them from real data.

Click the Generate Types button (braces icon) in the bottom bar, or access it from the overflow menu on narrow screens.

Type generation overview Screenshot: The bottom bar with the Generate Types button visible.


Privacy note

Type generation runs through JSONFiddle's protected /api/generate-types route so the quicktype engine can execute server-side with body-size caps, language allowlists, and timeouts. Do not submit secrets, credentials, customer records, or production-only payloads to this tool.

For fully local workflows, use the browser-only exploration views or run the quicktype CLI inside your own environment.


Prerequisites

  • Valid JSON data in the editor (the "Valid" badge should be green).
  • The Generate Types button is disabled when the content is invalid or empty.

How to Use

  1. Paste your JSON data into the editor.
  2. Make sure it is valid (green "Valid" badge).
  3. Click the Generate Types button in the bottom bar.
  4. Select the target language from the dropdown.
  5. The generated code appears in the output area.
  6. Click Copy to copy the generated code to your clipboard.
  7. Paste it into your project.

Type generation workflow Screenshot: The bottom bar ready for type generation.


Supported Languages

TypeScript Interfaces

Generates TypeScript interface declarations with proper typing.

Input JSON:

{
  "id": 1,
  "name": "Alice Johnson",
  "email": "alice@example.com",
  "age": 30,
  "active": true,
  "address": {
    "street": "123 Main St",
    "city": "Seattle",
    "zip": "98101"
  },
  "tags": ["admin", "verified"]
}

Generated TypeScript:

interface Root {
  id: number;
  name: string;
  email: string;
  age: number;
  active: boolean;
  address: Address;
  tags: string[];
}

interface Address {
  street: string;
  city: string;
  zip: string;
}

TypeScript generation Screenshot: The Generate Types button in the bottom bar.

Zod Schemas

Generates Zod schema definitions for runtime validation.

Generated Zod:

import { z } from 'zod';

const AddressSchema = z.object({
  street: z.string(),
  city: z.string(),
  zip: z.string(),
});

const RootSchema = z.object({
  id: z.number(),
  name: z.string(),
  email: z.string(),
  age: z.number(),
  active: z.boolean(),
  address: AddressSchema,
  tags: z.array(z.string()),
});

type Root = z.infer<typeof RootSchema>;

Go Structs

Generates Go struct definitions with JSON struct tags.

Generated Go:

type Address struct {
    Street string `json:"street"`
    City   string `json:"city"`
    Zip    string `json:"zip"`
}

type Root struct {
    ID      int      `json:"id"`
    Name    string   `json:"name"`
    Email   string   `json:"email"`
    Age     int      `json:"age"`
    Active  bool     `json:"active"`
    Address Address  `json:"address"`
    Tags    []string `json:"tags"`
}

Python Dataclasses

Generates Python @dataclass definitions with type annotations.

Generated Python:

from dataclasses import dataclass
from typing import List

@dataclass
class Address:
    street: str
    city: str
    zip: str

@dataclass
class Root:
    id: int
    name: str
    email: str
    age: int
    active: bool
    address: Address
    tags: List[str]

Java Classes

Generates Java class definitions with fields and types.

Generated Java:

public class Address {
    private String street;
    private String city;
    private String zip;
}

public class Root {
    private int id;
    private String name;
    private String email;
    private int age;
    private boolean active;
    private Address address;
    private List<String> tags;
}

Rust Structs

Generates Rust struct definitions with serde derive macros.

Generated Rust:

use serde::{Deserialize, Serialize};

#[derive(Debug, Serialize, Deserialize)]
pub struct Address {
    pub street: String,
    pub city: String,
    pub zip: String,
}

#[derive(Debug, Serialize, Deserialize)]
pub struct Root {
    pub id: i64,
    pub name: String,
    pub email: String,
    pub age: i64,
    pub active: bool,
    pub address: Address,
    pub tags: Vec<String>,
}

Rust generation Screenshot: The Generate Types button ready to generate Rust structs.


Type Mapping

JSON TypeTypeScriptZodGoPythonJavaRust
Stringstringz.string()stringstrStringString
Number (int)numberz.number()intintinti64
Number (float)numberz.number()float64floatdoublef64
Booleanbooleanz.boolean()boolboolbooleanbool
Nullnullz.null()*stringNonenullOption<String>
ArrayType[]z.array()[]TypeList[Type]List<Type>Vec<Type>
Objectinterfacez.object()struct@dataclassclassstruct

Tips for Better Output

TipWhy
Use realistic sample dataThe type generator infers types from the values. 0 infers as number/int; "hello" infers as string.
Include all possible fieldsFields missing from some objects may not appear in the generated type. Include every possible field in at least one object.
Use representative arraysIf an array contains objects of different shapes, the generator merges the shapes.
Check for optional fieldsIf some objects have a field and others do not, the field may need to be marked optional (? in TypeScript, Option in Rust).

Troubleshooting

"The Generate Types button is disabled"

The content is either empty or invalid. Check the "Valid" badge and fix any syntax errors first.

"The generated types do not match my data exactly"

Type generation is based on heuristics. If your data has edge cases (mixed types in an array, optional fields, union types), adjust the output manually.

"Numbers are all typed as int but some should be float"

The generator checks if the number has a decimal point. 42 maps to int; 42.5 maps to float. Include a float example in your sample data.

"Nested types have generic names"

The generated type names are derived from JSON keys. Rename them in your code to be more descriptive.


FAQ

Q: Can I generate types from YAML or XML? A: Yes. JSONFiddle reads YAML and XML as structured data first, then generates types from the resulting shape.

Q: Can I customize the output (e.g., different naming conventions)? A: Not currently. Adjust naming conventions manually after generating.

Q: Does it handle circular references? A: JSON does not support circular references, so this is not an issue.

Q: Can I generate types for an array? A: Yes. If the root element is an array of objects, the generator creates a type for the array element.

Q: Is the generated code production-ready? A: It is a strong starting point. Review the output, adjust optional fields, add validation logic, and rename types as needed.