YAML Formatter
FormattersFormat and validate YAML with configurable indent and optional key sorting. Explore structure in an interactive tree or D3 graph. Export as SVG or PNG. Browser-based.
About YAML Formatter
The YAML Formatter is a js-yaml-powered, browser-based tool that instantly formats and validates YAML documents with configurable indentation and optional alphabetical key sorting. It supports multi-document YAML files (separated by `---`), anchor/alias syntax (`&defaults` / `*defaults` / `<<: *merge`), and produces output conformant to YAML 1.1/1.2. After formatting, an interactive Tree View lets you collapse and expand nodes, while the card-based Graph View renders document structure as a hierarchical node graph — exportable as SVG or PNG. All processing runs client-side; your documents never leave the browser.
Features
- ✓Powered by js-yaml — the most widely used YAML parser and serialiser in JavaScript
- ✓Full YAML 1.1/1.2 support including anchors, aliases, and merge keys (<<:)
- ✓Multi-document YAML support — handles files with multiple --- separators
- ✓Optional alphabetical key sorting (toggle 'Sort keys') for normalising config files
- ✓Configurable indentation: 2 spaces or 4 spaces
- ✓Unlimited (lineWidth: -1) output lines — no forced wrapping
- ✓Validation with clear, actionable parse error messages
- ✓Interactive Tree View — collapse and expand YAML nodes by depth
- ✓Interactive Graph View — visualise document structure as a card-based hierarchical node graph
- ✓Export graph as SVG (vector, lossless) or PNG (raster, high-resolution)
- ✓Syntax-highlighted editor for both input and output
- ✓One-click clipboard copy of formatted output
- ✓Real-time byte-savings stats (input vs output size)
- ✓Language picker — instantly switch to JSON, TOML, XML, or 20+ other formatters
- ✓Mobile-responsive layout with a dedicated Format button
- ✓100% client-side — your documents never leave the browser
Common Use Cases
- Formatting Kubernetes manifests, Helm values, and kustomization.yaml files
- Normalising Docker Compose files with consistent key ordering and indentation
- Validating GitHub Actions workflow files before committing
- Visualising complex YAML configuration hierarchies with the tree or graph view
- Sorting keys alphabetically in OpenAPI / Swagger YAML specs
- Formatting Ansible playbooks, CircleCI configs, and Railway deploy files
- Exploring multi-document YAML files produced by Kubernetes `kubectl get -o yaml`
- Exporting YAML structure diagrams as SVG or PNG for runbooks and architecture docs
Frequently Asked Questions
QDoes this support multi-document YAML?
Yes — files containing multiple YAML documents separated by --- are each parsed and re-serialised individually, then joined with --- separators in the output.
QWhat does 'Sort keys' do?
When enabled, all mapping keys are output in alphabetical order. This is useful for normalising configuration files and reducing diff noise in version control.
QDoes it support anchors and aliases?
js-yaml parses anchors (&anchor), aliases (*alias), and merge keys (<<: *anchor) and resolves them. The output is the fully resolved document, without anchors (noRefs: true).
QIs my YAML sent to a server?
No. All formatting, tree parsing, and graph rendering happens locally inside your browser. Nothing is transmitted to any server.
QWhat is the Graph View?
The Graph tab renders document key-value relationships as an interactive card-based hierarchical node graph — ideal for understanding deeply nested configuration structures at a glance. It can be exported as SVG or PNG.