Edit YAML without losing comments

How it works

1. Parse to a Document. parseDocument(str) returns a Document instead of plain data. The docs describe Documents as the second API layer, above parse and stringify. [1]
2. Change values. The code updates port with doc.set and adds a nested flag with doc.setIn. It also checks doc.errors, which collects parse problems. [1]
3. Write it back. String(doc) turns the document into YAML again. The comments and the blank line from the input are still there, next to the new values. [2]

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 { parseDocument } from 'yaml'

const src = `# Service settings
name: api # public name
port: 8080

# Feature flags
features:
  search: true
debug: false
`

const doc = parseDocument(src)
console.log('errors:', doc.errors.length)
console.log('port before:', doc.get('port'))

doc.set('port', 9090)
doc.setIn(['features', 'beta'], false)

console.log('port after:', doc.get('port'))
console.log('--- updated YAML ---')
String(doc).trimEnd().split('\n').forEach((line) => console.log(line))

Run ▶ResetCopyShareCtrl/⌘ + Enter runs

▶ Run the live exampleLoads yaml from esm.sh after you press Run.

✦ Change it with AI

Change

Free for signed-in members, with a daily limit. Describe the change in plain words; the new code runs only in your browser.

Add another comment to the source text and change a different key with doc.set. Code written by AgentGid [1].

Checked Oct 12, 2026: it starts without errors in Chromium with yaml 2.9.1. Needs WebGL.

More yaml examples

Parse YAML in JavaScript with yaml Convert an object to YAML with yaml Parse options and schemas in yaml Multi-document YAML with yaml