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
- Select JSON text in any editor
- Right-click on the selection
- 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
- Select JSON text in the editor
- Open Command Palette (
Ctrl+Shift+P
/ Cmd+Shift+P
)
- 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 |
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! 🎉