Skip to content

Latest commit

 

History

History
124 lines (92 loc) · 4.52 KB

File metadata and controls

124 lines (92 loc) · 4.52 KB

🔧 JSON2TS - Transform JSON API Responses into TypeScript Interfaces

JSON2TS Interface

Live Demo License: MIT GitHub Stars

✨ Features

  • ⚡ Lightning Fast - Convert JSON to TypeScript interfaces in under a second
  • 🎯 Type Safe - Generate accurate TypeScript interfaces that catch errors at compile time
  • 🔧 Customizable - Unwrap nested data structures and customize interface names
  • 🌐 API Ready - Works with any REST API endpoint - just paste the URL
  • 📱 Mobile Friendly - Responsive design that works perfectly on all devices
  • 🎨 Modern UI - Clean, intuitive interface with syntax highlighting
  • 📋 One-Click Copy - Copy generated interfaces directly to your clipboard

🚀 Quick Start

Online Tool

Simply visit JSON2TS and start converting!

Local Development

# Clone the repository
git clone https://github.com/slayercode1/Convert-Json-To-Typescript.git

# Navigate to the project directory
cd Convert-Json-To-Typescript

# Open index.html in your browser
open index.html

🎯 How It Works

  1. Enter API URL - Paste your JSON API endpoint
  2. Name Your Interface - Choose a descriptive name for your TypeScript interface
  3. Configure Options - Optionally unwrap nested data structures
  4. Generate & Copy - Get your TypeScript interface instantly

Example

Input JSON:

{
  "userId": 1,
  "id": 1,
  "title": "delectus aut autem",
  "completed": false
}

Generated TypeScript Interface:

interface Todo {
  userId: number;
  id: number;
  title: string;
  completed: boolean;
}

🛠️ Technical Features

  • Smart Type Detection - Automatically detects and converts JavaScript types to TypeScript
  • Nested Object Support - Handles complex nested structures and arrays
  • Data Unwrapping - Optional feature to unwrap API response wrappers
  • Error Handling - Robust error handling for invalid URLs or malformed JSON
  • Syntax Highlighting - Beautiful code display with highlight.js
  • Responsive Design - Works seamlessly across desktop, tablet, and mobile

🎨 Modern Design

  • SaaS-inspired Interface - Clean, professional design
  • Dark/Light Syntax - Optimized code highlighting
  • Smooth Animations - Polished user experience
  • Accessibility - Designed with accessibility in mind

🔧 Configuration Options

  • Interface Naming - Custom names for your TypeScript interfaces
  • Data Unwrapping - Toggle to unwrap data properties from API responses
  • Array Handling - Smart detection of array types and their elements

🌟 Why JSON2TS?

  • Save Time - No more manual typing of interface definitions
  • Reduce Errors - Eliminate typos and type mismatches
  • Improve Productivity - Focus on building features, not writing boilerplate
  • Type Safety - Ensure your TypeScript code is properly typed from the start

🤝 Contributing

We welcome contributions! Here's how you can help:

  1. Fork the repository
  2. Create a feature branch (git checkout -b feature/amazing-feature)
  3. Commit your changes (git commit -m 'Add amazing feature')
  4. Push to the branch (git push origin feature/amazing-feature)
  5. Open a Pull Request

📝 License

This project is licensed under the MIT License - see the LICENSE file for details.

🙏 Acknowledgments

  • Built with vanilla JavaScript for maximum compatibility
  • Syntax highlighting powered by highlight.js
  • Icons by Ionicons
  • Inspired by the TypeScript and developer tool communities

Made with ❤️ for the TypeScript community

Star this repo Follow on GitHub