Update a YAML config with js-yaml
A common task is changing one setting in a YAML file: load it, edit the object, and dump it again.
How it works
- Load the config.
loadturns the YAML text into an object that the code can change like any other JavaScript object. [1] - Edit and dump. The code bumps the version, changes the port, adds a list entry and a new key, then calls
dumpto get YAML text back. [1] - Check the round trip. Loading the dumped text again gives the edited values, which the code prints to confirm the change survived. [1]
Run and edit it
It runs in your browser, in a sandboxed frame that cannot see this site; the packages load from esm.sh only after you press Run.
import { load, dump } from 'js-yaml'
const original = `
app: shop
version: 1
server:
port: 3000
hosts:
- shop.local
`
const config = load(original)
console.log('before: version', config.version, '| port', config.server.port)
// edit the plain object
config.version += 1
config.server.port = 8080
config.server.hosts.push('shop.internal')
config.debug = false
const updated = dump(config)
console.log('--- updated YAML ---')
updated.trimEnd().split('\n').forEach((line) => console.log(line))
const check = load(updated)
console.log('--- after reload ---')
console.log('version:', check.version, '| port:', check.server.port)
console.log('hosts:', check.server.hosts.join(', '))
Change a different field before dumping, for example set debug to true. Code written by AgentGid [1].
Change a different field before dumping, for example set debug to true. Code written by AgentGid [1].Checked Oct 12, 2026: it starts without errors in Chromium with js-yaml 5.4.3. Needs WebGL.
More js-yaml examples
Parse YAML with js-yaml load() Write YAML with js-yaml dump() Handle YAML parse errors in js-yaml
Sources
Explanations written by AgentGid from the official docs; the numbers in brackets point here. The code marked "written by AgentGid" is ours and free to copy.