Data Viewer
A fast, mobile-first, single-file data viewer. Drag & drop a JSON, YAML,
CSV, or XML file anywhere on the page and explore it as a collapsible tree
or a table — one tap flips to the syntax-highlighted source. It's a
viewer, not an editor — no toolbars, no accounts, no uploads. Everything
runs locally in your browser.
🔗 Live: https://data-viewer.us/
Part of the File Viewer family — HTML, Markdown,
ePUB, PDF, and Data each have their own dedicated viewer. Use the ☰ menu
in the header to jump between them.
Features
- 🌳 Tree view — JSON, JSONC, JSON5, JSON-LD, NDJSON, and YAML parse into a
collapsible, type-colored tree with key/item counts.
- 📊 Table view — CSV and TSV render as a table (sticky header, zebra
rows, quoted-field aware).
- 🧬 XML view — XML, RSS, and ATOM render as a collapsible element tree.
</> Source view — every file also has a syntax-highlighted, line-numbered
source view. TOML and GraphQL open straight into it.- ✨ Format — a
{ } toggle pretty-prints the raw source (JSON, NDJSON,
YAML, XML) — great for minified data — and flips back to raw.
- 🔀 Drop to replace — drop a new file while one is open and it replaces the
current view (drag & drop anywhere, or paste).
- ☰ Family menu — a hamburger flyout links to every viewer (Home, HTML,
Markdown, ePUB, Data, PDF).
- ✅ File-type checking — only data types are accepted; other files are
politely declined so you land in the right viewer.
- 🎨 Pick any background color — text, borders, and syntax colors adapt for
contrast (light and dark), remembered across visits.
- 🫥 Distraction-free — the header hides on scroll-down and returns on
scroll-up, after 5 s, or at the top edge; the footer has a × to hide it.
- 📱 Mobile-first, safe-area aware, keyboard-accessible.
- 🪶 One file, no build —
index.html is self-contained (~240 KB, libraries
inline) and works offline, even from file://.
- 📊 Privacy-friendly analytics — self-hosted, cookieless
Plausible; your files never leave your device.
Supported file types
| View | Types |
|---|
| Tree | .json .jsonc .json5 .jsonld .ndjson .yaml .yml |
| Table | .csv .tsv |
| XML tree | .xml .rss .atom |
| Source only | .toml .graphql .gql |
Any other type is declined with a brief notice. A file that fails to parse
falls back to the source view automatically.
Quick start
Just open it. Download index.html, double-click it — no
server, no build, no internet needed. Prefer a local server?
python3 -m http.server 8080 # then open http://localhost:8080
Deploy to Cloudflare Pages
Connect the repo (Workers & Pages → Create → Pages → Connect to Git),
framework preset None, build command blank, output directory /. The
_headers file applies a strict CSP automatically. Add the custom
domain data-viewer.us under the project's Custom domains tab.
How it works
Everything is in index.html — app logic plus three inline
libraries, so parsing, highlighting, and formatting all work offline:
- highlight.js
v11.9.0
(BSD-3-Clause) — source-view syntax highlighting.
- js-yaml
v4.1.0 (MIT) — YAML
parsing and formatting.
- JSON5
v2.2.3 (MIT) — JSON5 parsing.
The tree, table, and XML views are built as escaped DOM (never innerHTML of
untrusted text), and the viewer never renders arbitrary HTML — so its CSP is
strict (default-src 'none', no external assets).
Credits
The file-type icon (favicon and header icon) is from
vscode-icons (MIT). Analytics by
Plausible.
License
MIT © 2026 Michal Ferber, aka TechGuyWithABeard. Bundled
components retain their own licenses — see LICENSE and
Credits.
