Home/JSON → JavaScript Class
JSON · JS

JSON → JavaScript Class

Generate ES6 classes from JSON · with JSDoc type comments

Indent
Generation Options
Input JSONJSON
Lines: 0Chars: 0
Generated resultJS
Lines: 0Chars: 0

Overview: The JSON → JavaScript Class generator produces ES6 class definitions from sample JSON, complete with JSDoc type comments so even untyped JavaScript projects can enjoy editor autocomplete and static analysis. It suits legacy projects that cannot adopt TypeScript, Node.js CLI tools and browser extensions.

How to use: Step 1 — paste sample JSON on the left, or click "Sample" to load an example. Step 2 — fill in the root class name (default RootObject). Step 3 — the right editor produces ES6 class code live: the constructor takes a plain object and copies properties onto the instance, and JSDoc @typedef or @property annotations at the top declare field types. Step 4 — copy the code or download it as a .js file. Nested objects are split into multiple classes automatically and array element shapes are merged.

Typical scenarios: Node.js back-end projects generate response models when integrating with third-party APIs; Vue / React front-ends add type hints for business objects without adopting TypeScript; Electron apps wrap IPC protocols; Chrome extensions declare storage structures; Firebase / MongoDB documents can be turned into object-oriented entities for easier manipulation.

Technical notes: Primitives map to string / number / boolean, arrays become Type[], and null becomes * (JSDoc’s any). Class names use PascalCase while field names keep the original JSON spelling and support quoted keys. Generated classes only contain data fields and the constructor — no business methods; add a toJSON() method manually when needed. JSDoc comments are recognised by VS Code, WebStorm and other major IDEs for smart hints and diagnostics.

Privacy: Class generation runs entirely in your browser. The JSON you enter is never uploaded, so it is safe to use with production API responses.

Frequently Asked Questions

How do I use JSON → JavaScript Class?
Step 2 — fill in the root class name (default RootObject ). Step 3 — the right editor produces ES6 class code live: the constructor takes a plain object and copies properties onto the instance, and JSDoc @typedef or @property annotations at the top declare field types.
What can JSON → JavaScript Class do?
Typical scenarios: Node.js back-end projects generate response models when integrating with third-party APIs; Vue / React front-ends add type hints for business objects without adopting TypeScript; Electron apps wrap IPC protocols; Chrome…
Is my data private when I use JSON → JavaScript Class?
The JSON you enter is never uploaded, so it is safe to use with production API responses. The JSON you enter is never uploaded, so it is safe to use with production API responses.
What technical details should I know about JSON → JavaScript Class?
Class names use PascalCase while field names keep the original JSON spelling and support quoted keys. Generated classes only contain data fields and the constructor — no business methods; add a toJSON() method manually when needed.