yaml Examples You Can Edit and Run
5 small yaml examples written by AgentGid from the official docs, one feature each. Every one runs in your browser: change the code and see the result at once, or describe a change and let AI rewrite it. The screenshots are taken from the same code by our server, which also checks that each example starts without errors.
yaml: usage and stats 193 AI-built projects use it
Parse YAML in JavaScript with yamlAdd a new key to the YAML text and print it, or change port to a quoted string to see its type change.
Convert an object to YAML with yamlAdd a nested array of objects to config and watch how stringify lays it out.
Parse options and schemas in yamlTry other values such as 'yes', 'on' or '0o14' with and without version: '1.1'.
Multi-document YAML with yamlAdd a fourth document to the stream and watch the count change.
Edit YAML without losing commentsAdd another comment to the source text and change a different key with doc.set.
Try them all in one place
import { parse } from 'yaml'
const src = `
app: demo
port: 8080
debug: false
tags: [api, web]
owner:
name: Ada
team: platform
ratio: 3.14159
nothing: null
`
const data = parse(src)
console.log('app:', data.app)
console.log('port:', data.port, '(' + typeof data.port + ')')
console.log('port + 1:', data.port + 1)
console.log('debug:', data.debug, '(' + typeof data.debug + ')')
console.log('tags:', JSON.stringify(data.tags), Array.isArray(data.tags) ? '(array)' : '')
console.log('owner.name:', data.owner.name)
console.log('owner.team:', data.owner.team)
console.log('ratio:', data.ratio)
console.log('nothing:', data.nothing)
console.log('flow sequence:', JSON.stringify(parse('[ true, false, maybe, null, 3.14159 ]')))
Add a new key to the YAML text and print it, or change port to a quoted string to see its type change. Code written by AgentGid [1]. How it works, with a screenshot →
Add a new key to the YAML text and print it, or change port to a quoted string to see its type change. Code written by AgentGid [1]. How it works, with a screenshot →Add a nested array of objects to config and watch how stringify lays it out. Code written by AgentGid [2]. How it works, with a screenshot →Try other values such as 'yes', 'on' or '0o14' with and without version: '1.1'. Code written by AgentGid [1]. How it works, with a screenshot →Add a fourth document to the stream and watch the count change. Code written by AgentGid [1]. How it works, with a screenshot →Add another comment to the source text and change a different key with doc.set. Code written by AgentGid [1]. How it works, with a screenshot →Checked Oct 12, 2026: each example starts without errors in Chromium with yaml 2.9.1. Needs WebGL.
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.