YAML viewer
Explore YAML as a collapsible tree with YAML paths (like $.a.b[0]), type labels and statistics, plus key/value search, expand-to-depth and one-click collapse. Invalid YAML reports the line and column.
Runs in your browserEvery computation happens in your browser — your data never leaves this device.
Structure
Paste YAML to see the tree here
What this tool does
- Open a large Kubernetes, CI or application config and read the tree first: expanding to a given depth builds a mental model in seconds.
- Find out which level a value lives on: search a key or value, matches are highlighted and every ancestor path is expanded automatically.
- Confirm the types YAML actually produced — 2020-01-02 is a date, 1 is a number, true is a boolean — so the classic "string 'false' counted as truthy" bug never happens.
- Select any node to get its YAML path ($.items[0].id) and the value at that path, ready to paste into code or an assertion.
Example
Input
name: UniKit version: 1 stable: true released: 2020-01-02 features: - yaml - viewer
Output
$ object {name, version, stable, …}
name string "UniKit"
version number 1
stable boolean true
released date 2020-01-02T00:00:00.000Z
features array ["yaml", "viewer"]The first rows after Expand all (indentation stands in for nesting here). The stats read depth 2 · keys 5 · arrays 1 · scalars 6 · lines 7 · bytes 87, and the date node previews as an ISO string.
Frequently asked questions
Why does it only support a single document?
A viewer is meant to show one tree, and multiple documents would produce several trees, which makes expansion, search and paths ambiguous. Input separated by --- is rejected with a "single document only" message; remove the separators or open the parts one at a time. Use the YAML to JSON tool when you need multi-document handling.
What does the search match against?
Matching is case-insensitive: containers (objects and arrays) match on the key only, while scalars match both key and value. That avoids false hits from container previews like {id, label}. Matches expand their ancestor nodes automatically and the match count is shown above the tree.
What does a path like $.a["b-c"] mean?
That is the YAML path. Plain identifiers (letters, digits, underscore, $) are joined with dots, while keys such as b-c or ones containing spaces are written as ["b-c"], and array items use [0], [1] subscripts. You can paste the path straight into most YAML or JSON libraries.
What happens with very large documents?
At most 2000 rows are rendered at once, with a notice that only the first 2000 are shown and search should be used to narrow it down; input over 500,000 characters is rejected as too long. Search and expansion still run over the complete tree — only the display is truncated.
Does a parse error show the position, and is my input uploaded?
Yes — errors are classified as bad indentation, duplicate key, tab character, multiple documents and so on, with the line, column and js-yaml reason. Parsing runs entirely in your browser, the page makes no network requests, and your input is never uploaded or logged.
Keywords：yamlyaml 查看yaml vieweryml树形浏览tree viewyaml 路径折叠collapse