Skip to content
| Marketplace
Sign in
Visual Studio Code>Programming Languages>JSON Schema StudioNew to Visual Studio Code? Get it now.
JSON Schema Studio

JSON Schema Studio

istalri

|
22 installs
| (0) | Free
Convert JSON to TypeScript interfaces and generate JSON schemas with ease. Features smart format detection, right-click context menu, and multiple output options.
Installation
Launch VS Code Quick Open (Ctrl+P), paste the following command, and press enter.
Copied to clipboard
More Info

JSON Schema Studio

A powerful VS Code extension for converting JSON to TypeScript interfaces and generating JSON schemas with advanced format detection and flexible output options.

✨ Features

🔄 JSON Schema Generation

  • Smart Format Detection: Automatically detects and formats emails, URLs, and date-time strings
  • Nested Object Support: Handles complex nested structures with proper schema generation
  • Null Value Handling: Correctly processes null values and optional fields

🎯 TypeScript Interface Generation

  • Clean Interface Generation: Creates well-structured TypeScript interfaces
  • Nested Interface Support: Automatically generates separate interfaces for nested objects
  • Array Type Detection: Intelligently handles arrays with proper type inference

📋 Multiple Access Methods

  • Command Palette: Traditional VS Code command access
  • Right-Click Context Menu: Convenient access when text is selected
  • Flexible Output Options: Choose where to display generated content

🖥️ Output Flexibility

  • New Column: Opens generated content in a new editor column (default)
  • Current Tab: Replaces current tab with generated content
  • Save to File: Directly saves JSON schema to a file of your choice

🚀 Usage

Method 1: Right-Click Context Menu (Recommended)

  1. Select JSON text in any editor
  2. Right-click on the selection
  3. Choose from the JSON Schema Studio options:
    • Generate JSON Schema from Selection (New Column)
    • Generate TypeScript Interface from Selection (New Column)
    • Generate JSON Schema from Selection (Current Tab)
    • Generate TypeScript Interface from Selection (Current Tab)
    • Save JSON Schema to File

Method 2: Command Palette

  1. Select JSON text in the editor
  2. Open Command Palette (Ctrl+Shift+P / Cmd+Shift+P)
  3. Type "JSON Schema Studio" and select your desired command

📝 Example

Input JSON:

{
  "name": "John Doe",
  "age": 30,
  "active": true,
  "email": "john.doe@example.com",
  "website": "https://johndoe.com",
  "hobbies": ["reading", "coding", "hiking"],
  "address": {
    "street": "123 Main St",
    "city": "Anytown",
    "zipCode": "12345"
  },
  "metadata": {
    "created": "2024-01-01T00:00:00Z",
    "lastUpdated": "2024-07-04T18:30:00Z"
  }
}

Generated JSON Schema:

{
  "$schema": "http://json-schema.org/draft-07/schema#",
  "type": "object",
  "properties": {
    "name": { "type": "string" },
    "age": { "type": "integer" },
    "active": { "type": "boolean" },
    "email": { "type": "string", "format": "email" },
    "website": { "type": "string", "format": "uri" },
    "hobbies": {
      "type": "array",
      "items": { "type": "string" }
    },
    "address": {
      "type": "object",
      "properties": {
        "street": { "type": "string" },
        "city": { "type": "string" },
        "zipCode": { "type": "string" }
      },
      "required": ["street", "city", "zipCode"]
    },
    "metadata": {
      "type": "object",
      "properties": {
        "created": { "type": "string", "format": "date-time" },
        "lastUpdated": { "type": "string", "format": "date-time" }
      },
      "required": ["created", "lastUpdated"]
    }
  },
  "required": ["name", "age", "active", "email", "website", "hobbies", "address", "metadata"]
}

Generated TypeScript Interface:

export interface RootObject {
  name: string;
  age: number;
  active: boolean;
  email: string;
  website: string;
  hobbies: string[];
  address: Address;
  metadata: Metadata;
}

export interface Address {
  street: string;
  city: string;
  zipCode: string;
}

export interface Metadata {
  created: string;
  lastUpdated: string;
}

🎛️ Available Commands

Command Description
JSON Schema Studio: Generate JSON Schema from Selection (New Column) Generate schema in new editor column
JSON Schema Studio: Generate JSON Schema from Selection (Current Tab) Generate schema in current tab
JSON Schema Studio: Generate TypeScript Interface from Selection (New Column) Generate interface in new editor column
JSON Schema Studio: Generate TypeScript Interface from Selection (Current Tab) Generate interface in current tab
JSON Schema Studio: Save JSON Schema to File Save schema directly to a file

🔧 Smart Format Detection

The extension automatically detects and applies appropriate JSON Schema formats:

  • Email addresses: john@example.com → { "type": "string", "format": "email" }
  • URLs: https://example.com → { "type": "string", "format": "uri" }
  • Date-time strings: 2024-01-01T00:00:00Z → { "type": "string", "format": "date-time" }
  • Numbers: Distinguishes between integers and floats
  • Arrays: Infers item types from first element

💡 Tips

  • Select the entire JSON object for best results
  • Use the right-click context menu for quickest access
  • Choose "New Column" to compare original JSON with generated output
  • Use "Save to File" when you need to persist the schema for later use

🔧 Requirements

  • VS Code: 1.99.3 or higher
  • File types: Works with any file type containing JSON text

🐛 Known Issues

None currently known. If you encounter any issues, please report them on the GitHub repository.

📄 License

This extension is released under the MIT License.

🤝 Contributing

Contributions are welcome! Please feel free to submit issues and pull requests on the GitHub repository.


Enjoy using JSON Schema Studio! 🎉

  • Contact us
  • Jobs
  • Privacy
  • Manage cookies
  • Terms of use
  • Trademarks
© 2025 Microsoft