Skip to content

YAML to JavaScript Object Converter

Convert YAML to a JavaScript object online, for free. This tool turns YAML — .yaml or .yml — directly into an exported JavaScript object literal you can drop straight into a module, ready to import without a YAML parser at runtime.

Drop your YAML file here

or

Supports .yaml and .yml files, processed entirely on your device

Untitled.yaml0 B0 lines0 characters
YAML →JSON
Your converted output will appear here.
Waiting for YAML input.

What to expect

  • Outputs a ready-to-use `export default { ... }` module.
  • Object keys are unquoted where they're valid identifiers.
  • Strings are safely quoted and escaped for you.

Example

Input (YAML)
site:
  name: Aperture Docs
  version: 1.4.2
  active: true
tags:
  - web
  - cli
  - tools
author:
  name: Jane Doe
  email: jane@example.com
Output (javascript)
export default {
  site: {
    name: "Aperture Docs",
    version: "1.4.2",
    active: true
  },
  tags: [
    "web",
    "cli",
    "tools"
  ],
  author: {
    name: "Jane Doe",
    email: "jane@example.com"
  }
};

When a JavaScript module beats a YAML file

Shipping a YAML file means shipping a YAML parser too. If the data is static, such as navigation links, feature flags or content for a front-end, it is simpler to turn it into a JavaScript module once and import it like any other file. Bundlers can then tree-shake it, and there is no parsing work at runtime.

Unlike JSON, a JavaScript object literal doesn't need quotes around most keys, so the result reads naturally in code. The converter uses unquoted keys wherever they are valid identifiers and quotes only those that need it, which keeps the file easy to scan and edit by hand.

  • Front-end content

    Turn authored YAML into a module your React, Vue or Svelte app imports directly.

  • Node scripts and tooling

    Skip adding a YAML dependency to a small build or CLI script.

  • Feature flags and constants

    Create a typed-by-usage configuration object for client code.

  • Test data

    Export fixtures that tests can import without any parsing step.

How YAML maps to JavaScript Object

These are the exact rules this converter applies. Each result below was generated by the tool itself, so it matches what you will see in the output panel.

Mappings become object literals

Keys are unquoted when they are valid identifiers, and values follow after a colon.

YAML
name: Beacon
port: 8080
active: true
JavaScript Object
export default {
  name: "Beacon",
  port: 8080,
  active: true
};

Awkward keys are quoted

Keys with hyphens or spaces can't be bare identifiers, so they are written as strings.

YAML
"api-key": abc123
max_size: 10
JavaScript Object
export default {
  "api-key": "abc123",
  max_size: 10
};

Lists become arrays

Nested lists and lists of objects keep their order and nesting.

YAML
matrix:
  - [1, 2]
  - [3, 4]
JavaScript Object
export default {
  matrix: [
    [
      1,
      2
    ],
    [
      3,
      4
    ]
  ]
};

Null and empty collections

Null stays null, and empty mappings and lists are written compactly.

YAML
token: null
items: []
meta: {}
JavaScript Object
export default {
  token: null,
  items: [],
  meta: {}
};

A trickier example: quoted keys, nulls and nested arrays

A configuration with a hyphenated name, a key containing a space, a null rollout value and a small matrix.

Input (YAML)
app-name: Beacon
port: 8080
"feature flags":
  beta: true
  rollout: null
matrix:
  - [1, 2]
  - [3, 4]
Output (JavaScript Object)
export default {
  "app-name": "Beacon",
  port: 8080,
  "feature flags": {
    beta: true,
    rollout: null
  },
  matrix: [
    [
      1,
      2
    ],
    [
      3,
      4
    ]
  ]
};

Only the two keys that can't be identifiers are quoted. Everything else is written bare, and the whole object is exported as the default export of an ES module, ready to import.

Importing the module

Save the output as config.js and import it. Because the output uses export default, switch to module.exports = if you need CommonJS:

javascript
import config from "./config.js";

console.log(config.port);
console.log(config["feature flags"].beta);

for (const row of config.matrix) {
  console.log(row.join(", "));
}

YAML vs JavaScript Object at a glance

Both describe the same data, but one needs a parser and the other is already code.

FeatureYAMLJavaScript Object
Needs a parser at runtimeYesNo
Comments# comment// comment or /* */
Quoting of keysRarely neededOnly for non-identifiers
Can contain codeNoYes, though this tool only writes data
BundlingLoaded as text or a pluginImported and tree-shaken

Things to watch for when converting to JavaScript Object

  • Strings are always written with double quotes and escaped, so they may differ slightly from your YAML style.
  • The output is plain data only. It does not add functions, dates or other JavaScript-only values.
  • Large files become part of your bundle, so avoid exporting very big data sets this way.
  • YAML comments are not carried over; add them manually if the file will be maintained by hand.

YAML to JavaScript Object Converter FAQ

Can I use this output in Node.js and the browser?

Yes, the generated ES module export works in any modern JavaScript environment.

Does it support CommonJS instead of ESM?

The default output uses `export default`; replace that with `module.exports =` if you need CommonJS.

Will special characters in strings break the output?

No, string values are serialized safely so quotes and special characters are escaped automatically.

Why export default instead of const?

A single default export is the simplest way to import a whole configuration object. Change the first line to a named export if you prefer, such as export const config = ...

Can I use this output in the browser?

Yes. The result is a standard ES module, so any modern bundler or a script with type="module" can import it without a YAML library.

Does it differ from the JSON output?

The data is the same, but the JavaScript version uses unquoted keys where possible, can be imported as a module, and is a good fit when the file is edited by hand afterwards.

Is there a difference between .yml and .yaml?

No. ".yml" and ".yaml" are just two file extensions for the exact same format — this converter accepts either one, so a "yml to JavaScript" conversion and a "yaml to JavaScript" conversion produce identical results.

Related conversions

YAML to TypeScript

Add compile-time safety by generating an interface for the same data.

Try it

YAML to JSON

Need a language-neutral file other tools and services can read.

Try it

YAML to HTML Table

Rendering the data as a static table instead of loading it in a script.

Try it

Getting an error? Check your input with theYAML Validator, or tidy it first with theYAML Formatter. You can also browse all YAML converters.