About the JSON to JavaScript
Generate JSDoc type definitions that give you autocomplete and type checking in plain JavaScript, or ES classes whose constructors build nested objects from raw JSON.
Key features
- JSDoc @typedef definitions for editor autocomplete
- Works with VS Code type checking (// @ts-check)
- Or ES6 classes that build nested objects from raw JSON
- Optional properties marked with [brackets]
- Keys like "first-name" handled with object-literal types
- No build step or TypeScript required
Types for plain JavaScript
Not every project uses TypeScript, but everyone benefits from autocomplete. JSDoc type definitions give JavaScript editors the same knowledge of your data's shape, with zero build tooling. Or generate ES6 classes that turn raw JSON into model objects you can extend with methods.
JSDoc example
/**
* @typedef {Object} Root
* @property {number} id
* @property {string} name
* @property {Address} address
* @property {string} [nickname]
*/
/** @type {Root} */
const user = await (await fetch("/api/user")).json();
user.address.city; // autocompleted
Class example
export class Root {
/** @param {Record<string, any>} data */
constructor(data) {
/** @type {number} */
this.id = data.id;
/** @type {Address} */
this.address = new Address(data.address);
}
}
Which output should I choose?
| Need | Choose |
|---|---|
| Autocomplete and type checking only | JSDoc @typedef |
Models with methods (e.g. fullName()) | ES6 classes |
| Smallest footprint | JSDoc (comments only, no runtime code) |
Enable type checking
Add this to the top of a file:
// @ts-check
or set "checkJs": true in jsconfig.json to check the whole project.
Related tools
Prefer TypeScript? Use JSON to TypeScript. Inspect your data first with the JSON Viewer.
How to use the JSON to JavaScript
- Paste your data into the input box, upload a file, or click Sample to try it out.
- Adjust the options above the editor if you need to (indentation, delimiter, and so on).
- The JavaScript appears instantly in the output panel. Any errors are shown with their line and column.
- Click Copy to copy the result, or Download to save it as a file.