CodesBeautify

YAML to JavaScript Converter

Convert a YAML file into a JavaScript object literal you can import directly, or into classes and JSDoc types.

YAML
JavaScript
Runs locally in your browser

About the YAML to JavaScript Converter

Bundling a YAML file into a front end build means adding a loader, a plugin and a parser to ship a few kilobytes of settings. Converting the file to a JavaScript module once removes all of that: the values become source code, the bundler tree shakes them like anything else, and there is no parse cost at runtime.

Object literal mode prints the parsed document as JavaScript with unquoted keys wherever they are legal identifiers, real numbers and booleans rather than strings, and nested structures laid out on separate lines. YAML dates come through as new Date(...) calls so the value keeps its meaning instead of degrading to a string. The export checkbox decides between a local const and an exported one, so the result drops into a module or a script as you prefer.

The other two modes describe shape rather than content. ES classes give you one class per mapping with a constructor that destructures a plain object, useful when the config feeds a small model layer. JSDoc typedefs give a plain JavaScript project the editor autocompletion that a TypeScript project would get from an interface, without adding a compiler. Comments in the YAML are not carried over, since neither JavaScript literals nor typedefs have anywhere sensible to put them. For the data on its own, YAML to JSON is the direct route.

How to use

  1. Paste the YAML file you want as a JavaScript module.
  2. Name the constant, for example config or storefront.
  3. Choose object literal for the data, or classes and typedefs for the shape.
  4. Copy the module or download it as a .js file.

Common questions

Are my YAML comments kept?
No. Comments are metadata for the file, and neither an object literal nor a typedef has a natural place for them.
How is a YAML date represented?
As a new Date call with the ISO timestamp, so the value stays a date rather than becoming a plain string.
Can I import the result as an ES module?
Yes. Tick the export checkbox and the constant is exported, ready for a named import.
What about multi document YAML?
Only the first document is converted. Split the file on the three dash separator and run each part on its own.