JSON to TypeScript

About

🚀 JSON to TypeScript – Interface Generator from API

Stop writing TypeScript interfaces by hand or using AI chats.

This extension helps you instantly generate TypeScript interfaces from real API responses — directly inside Chrome DevTools.

No more copying JSON. No more switching between tools. No more repetitive typing.

💡 What problem does it solve?

If you're a frontend developer, you know the pain:

* You open the Network tab
* Find an API request
* Copy JSON response
* Paste it into some online converter or AI chat
* Fix types manually
* Repeat… again and again

It’s slow, annoying, and error-prone.

JSON to TypeScript solves this in one click.

⚡ How it works

1. Open Chrome DevTools
2. Go to the "JSON to TypeScript" tab
3. Enable recording
4. Make an API call
5. Click any API request
6. Get a ready-to-use TypeScript interface instantly

Everything happens locally in your browser.

🔥 Key Features

🧠 Generate interfaces from real API responses
No fake data. No manual input.
Works directly with actual backend responses from the Network tab.

⚡ Live workflow inside DevTools
No need to leave your development environment.
Everything is integrated into Chrome DevTools.

🧩 Smart type detection
Automatically detects:

* primitives (string, number, boolean)
* nested objects
* arrays
* nullable fields
* mixed types (union types)

🏷 Custom interface naming
Configure how your interfaces are named:

* Prefix (e.g. IUser)
* Suffix (e.g. UserDTO)
* Full control over naming conventions

✏️ Editable output
Generated interface is fully editable:

* tweak types
* rename fields
* adjust structure

📋 One-click copy
Copy generated code instantly and paste into your project.

⭐ Favorites
Save important DTOs for later use.
No need to regenerate the same structures again.

🌙 Light & Dark mode
Choose your preferred theme.

🌍 Localization
Supports:

* English
* Russian

🔒 Privacy-first

* No data is sent anywhere
* No tracking
* Works 100% locally

🎯 Who is this for?

* Frontend developers (React, Vue, Angular, etc.)
* TypeScript users
* Developers working with REST APIs
* Anyone tired of writing DTOs manually

🆚 How is it different from other tools?

Most tools:

* require manual JSON input
* work as standalone converters
* break your workflow

This extension:
* works directly with API responses
* lives inside DevTools
* fits naturally into your development process

💬 Example

Instead of this JSON:

{
"user": {
"id": 1,
"name": "John"
}
}

You instantly get:

export default interface IUserDTO {
user: IUser;
}

interface IUser {
id: number;
name: string;
}

🏁 Summary

✔ No more manual DTO writing
✔ No more copy-paste workflows
✔ Faster development
✔ Cleaner TypeScript code

Build faster. Focus on logic — not on typing interfaces.