YAML Viewer

A self-contained, single-file YAML viewer and static HTML exporter. No install. No dependencies. Works offline.

Quick Start

1. Open yaml-viewer.html in any browser
2. Drop a .yaml file, click "Choose File", or paste YAML
3. Browse the interactive tree

Static Export (Primary Use Case)

1. Load your YAML file
2. Click Export HTML
3. Share the downloaded .html file with anyone

The exported file is fully standalone: recipients open it in any browser with no tools or internet required. It includes expand/collapse, depth controls, search, dark/light mode, and breadcrumb navigation.

Features

Feature	Viewer	Export
Tree view with expand/collapse	Yes	Yes
Depth controls (1, 2, 3)	Yes	Yes
Search keys & values	Yes	Yes
Dark/light mode toggle	Yes	Yes
Multi-document tabs	Yes	Yes
Breadcrumb on hover	Yes	Yes
Copy path / copy value	Yes	Yes
Node count display	Yes	Yes
Long string truncation (500+ chars)	Yes	Yes
Drag & drop / file picker / paste	Yes	--
Export HTML button	Yes	--
Raw YAML view	Yes	--

Keyboard Shortcuts

Key	Action
/	Focus search box
Escape	Clear search, unfocus
Ctrl/Cmd + O	Open file picker

Type Indicators

Types are distinguished by color and shape/style (accessible in grayscale):

Type	Indicator
String	"quoted"
Number	# prefix
Boolean	? prefix + italic
Null	-- prefix + italic

Performance

• Files under 2000 nodes render immediately
• Larger files use lazy rendering (top 2 levels, deeper on demand)
• 5000+ node files supported without freezing

Browser Support

• Chrome 90+
• Firefox 90+
• Safari 14+
• Edge 90+

File Structure

yaml-viewer.html     Main application (single file, ~90KB)
test/                Test fixtures
  test-basic.yaml      Flat key-value pairs
  test-nested.yaml     Deep nesting
  test-multidoc.yaml   Multi-document (3 docs)
  test-types.yaml      All YAML data types
  test-large.yaml      1500+ nodes for performance testing
  test-edge-cases.yaml Unicode, deep nesting, edge cases
dev/
  embed-js-yaml.sh     Helper to re-fetch js-yaml for embedding

Accessibility

• WCAG AA contrast ratios (4.5:1 minimum)
• Full keyboard navigation
• ARIA tree structure (role="tree", role="treeitem", aria-expanded)
• prefers-reduced-motion support
• Focus-visible outlines on all interactive elements
• Type indicators work in grayscale