The part a text editor gets wrong
JSON quotes every key. JavaScript quotes almost none.
A find-and-replace pass over a JSON file produces source that either keeps noisy quotes on every property or strips quotes from keys that break the parser. The rule sits in the identifier grammar: a bare property name starts with a letter, an underscore, or a dollar sign, then continues with letters, digits, underscores, or dollar signs. Anything outside that shape stays quoted.
| JSON key | Generated property | Reason |
|---|---|---|
"userId" | userId | Valid identifier, so the quotes go. |
"first-name" | 'first-name' | A hyphen reads as subtraction. |
"2fa" | '2fa' | Identifiers never open with a digit. |
"class" | class | Reserved words became legal property names in ES5. |
"user name" | 'user name' | A space ends the identifier. |
Switch the keys control to Quote every key when the destination file follows a lint rule such as quote-props: always. The counter under the input panel reports how many keys carry quotes because JavaScript demands them, which is a fast signal that an API returns hyphenated or numeric field names.
Five destinations, five outputs
Match the shape to the file you are pasting into
Object literal
One declaration holding the parsed data. This fits a constants file, a test fixture, or a default configuration block. Turn on
Object.freezewhen the object represents settings that later code should not mutate.ES module
The same literal plus a named export and a default export, ready for
import data from './data.js'. The file downloads with an.mjsextension so Node treats the module syntax correctly outside a"type": "module"package.CommonJS
A
module.exportsassignment for older Node services, Jest setup files, ESLint configuration, and build scripts that still run onrequire().Class
A constructor that reads each field from an input object and falls back to the value in your sample, plus a
static from()helper for raw strings and atoJSON()method. Nested objects arrive as plain object defaults rather than child classes, which keeps the generated file readable.JSDoc typedef
A typedef block for the root object and one for every nested object, so a plain JavaScript project gets editor autocomplete without a build step. Nested typedef names come from the property they sit under, so
shippingAddressbecomesShippingAddress.
Where the two formats stop agreeing
Six values JSON cannot carry across
JSON describes a smaller world than a JavaScript object literal. The gap only shows up after generated code reaches a running program, so it is worth reading before pasting output into a branch.
Dates
An API sends "2026-03-14T09:00:00Z" as text. The ISO strings to Date switch rewrites matching values as new Date(...). Leave the switch off when the object stands in for a raw response body, because a real fetch() result holds the string.
Large integers
JSON.parse runs before any code generation, so an ID above 9007199254740991 loses its last digits before this page sees it. Snowflake IDs, ledger references, and 64-bit counters belong in strings on the server side.
Duplicate keys
{"region":"eu","region":"us"} parses to a single property holding us. The earlier value disappears with no warning from the parser, so audit a source document before treating generated output as complete.
undefined
JSON has no representation for it. A field intentionally absent from the payload stays absent from the generated object, which changes how Object.keys() and spread operations behave against a hand-written version.
NaN and Infinity
Neither is valid JSON. A payload carrying either was produced by a non-standard encoder, so the parse step fails and the error message points at the offending position.
The __proto__ key
Legal JSON, hazardous JavaScript. Written plainly inside an object literal, that name replaces the prototype rather than defining a property. Generation emits a computed key, ['__proto__'], which keeps an own property the way JSON.parse does, and the output panel says so.
A limit worth stating
Generated source is a poor home for large data
Conversion suits payloads measured in kilobytes: fixtures, seed records, feature flag defaults, sample responses for a component library. Past a few hundred kilobytes the tradeoff flips. A JavaScript file gets parsed and compiled by the engine, kept in the module graph, and shipped through the bundler. A .json file loaded at runtime skips that cost, and modern parsers read JSON faster than equivalent object literal source.
Browser memory sets the practical ceiling for this page. A multi-megabyte paste into a textarea slows typing long before the generation step struggles, so the conversion runs on a short delay after you stop typing rather than on every keystroke.
Three workflows this replaces
When hand-editing stops being reasonable
A captured response from a staging environment becomes a mock for a component story. Copying it straight into a .js file leaves quoted keys everywhere and single quotes fighting the project lint rules, so a formatter run follows. Setting the quote style and key policy up front removes that second pass.
A configuration migration is the second case. Teams moving from config.json to a JavaScript config file, the pattern used by Tailwind, ESLint, and Vite, need the same data expressed as source that accepts comments and computed values later. Generate the literal, then edit the parts that need logic.
The third is documentation. A plain JavaScript codebase with no TypeScript build still gets useful autocomplete from typedef comments. Generating them from a real payload beats writing property lists by hand, and the shape stays honest to what the API returned. For a project that already compiles TypeScript, JSON to TypeScript produces interfaces instead.
Before the commit
Read the output once, then let a parser read it
Three checks catch most trouble. Confirm the declaration name does not collide with an existing binding in the destination file. Confirm string values with apostrophes look right under the quote style you picked, since a value like "Ada's key" shifts the escaping between single and double quote modes. Then run the file through the project linter, which reports the quote-props and prefer-const decisions faster than reading.
If the source document has not been validated yet, start with the JSON Beautifier or the JSON Parser. Broken input stops this page at the parse step with the position of the fault, and no partial JavaScript gets written to the output panel. Going the other direction, JSON Stringify turns an object back into an escaped string literal.
