I Built a Browser-Only YAML Formatter & Validator (No Dependencies, Works Offline)

#yaml #devtools #javascript #webdev

If you work with Kubernetes manifests, Docker Compose files, or GitHub Actions workflows, you know the pain: you kubectl apply something, and only then discover there's a bad indentation on line 47.

I built a YAML Formatter & Validator that catches those errors before you ever leave your browser tab.

👉 https://devnestio.pages.dev/yaml-formatter/

Why Yet Another YAML Tool?

Most online YAML validators do the job, but they send your config files to a server. When you're working with cloud infrastructure configs — Kubernetes secrets, Helm values, Terraform variables — sending those to a third-party feels wrong.

This tool runs entirely in the browser. No server, no external libraries, no network requests. Paste your YAML, get instant feedback.

What It Does

Format & Normalize Indentation

Paste any YAML with inconsistent indentation and it normalizes to clean 2-space format instantly:

# Input (messy indentation)
name: John
address:
 street: "123 Main St"
  city: Springfield

# Output (normalized)
name: John
address:
  street: 123 Main St
  city: Springfield

Validate with Line Numbers

When there's a syntax error, you get the exact line:

Error: bad indentation of a mapping entry at line 4, column 3

That's far more useful than kubectl apply's generic "Invalid YAML" message.

Bidirectional YAML ↔ JSON Conversion

Need your Kubernetes manifest in JSON? Or have terraform output -json output you want to convert to YAML? Both directions are one click.

# YAML
server:
  host: localhost
  port: 8080
  debug: true

{
  "server": {
    "host": "localhost",
    "port": 8080,
    "debug": true
  }
}

Minify

Strip comments and output compact JSON — handy for embedding values in CI/CD pipelines.

What YAML Structures Are Supported?

The parser is hand-written (no js-yaml), so here's the honest coverage:

✅ Nested mappings (deep Kubernetes spec nesting)
✅ Sequences (- item notation)
✅ Block scalars (| literal, > folded)
✅ Quoted strings (single and double)
✅ Inline comments
✅ Numbers, booleans, null with proper type detection
⚠️ Anchors (&anchor) and aliases (*alias) — partial support

Why No External Libraries?

js-yaml would make this trivially easy, but devnestio's rule is: single HTML file, zero external dependencies.

Two reasons:

Trust — CDN scripts could theoretically send your data somewhere. Removing all external scripts eliminates that concern.
Offline — After the first load, it works entirely from browser cache. Useful in VPN environments, airplanes, or restricted staging environments.

The parser was built with AI assistance (Claude Code sessions with detailed PRDs), validated with 114/114 passing tests.