All-in-One Viewer

A fast, private, offline-capable web app for viewing multiple file formats directly in your browser — no upload, no server, no tracking. Everything runs locally on your device.

Author: gnort67 Built with: Claude (Anthropic)

Also available in Vietnamese: README.vi.md

---

Features

• Multi-format viewer — open and preview:
  • HTML — sandboxed rendered preview + syntax-highlighted source
  • JSON — collapsible tree view with syntax coloring, expand/collapse all
  • CSV / TSV — sortable, filterable table view with a proper quoted-field parser
  • Markdown — rendered preview (headings, lists, tables, code blocks, checkboxes, links, images, blockquotes) + raw source view
  • XML / SVG — pretty-printed and syntax-highlighted
  • YAML — structured, indented, syntax-highlighted display
  • Plain text / logs / code (.txt, .log, .js, .css, .ini, ...) — line numbers, word wrap toggle
  • Images (png, jpg, gif, webp, svg, ...) — checkerboard preview background, download
• Multiple tabs — open several files at once and switch between them
• In-file search — highlight and cycle through matches with Enter / Shift+Enter
• Global file search — quickly filter your opened files by name
• Zoom controls — increase/decrease text size per file
• Copy, download, and print any opened file
• Drag & drop anywhere on the page, or use the file picker
• Light / Dark / System theme, switched instantly with no flash
• English / Tiếng Việt language switch, fully localized UI
• Preferences remembered — theme, language, zoom, and view modes are saved to localStorage and restored on your next visit
• Installable PWA — add to home screen / desktop and use offline
• Responsive design — optimized layouts for desktop, tablet, and mobile
• Accessible — keyboard navigable, focus states, ARIA labels, reduced-motion support
• No emojis — a clean icon-based interface throughout
• 100% client-side — files never leave your device; nothing is uploaded anywhere

Keyboard shortcuts

Action	Shortcut
Open file	Ctrl / ⌘ + O
Focus search	Ctrl / ⌘ + K
Close active tab	Ctrl / ⌘ + W
Next / previous match (find in file)	Enter / Shift+Enter
Show shortcuts	?
Close dialog / sidebar	Esc

Getting started

This is a static site — no build step, no dependencies to install.

Option 1 — Open directly

Simply open index.html in a modern browser.

Option 2 — Serve locally (recommended, needed for full PWA/service-worker support)

# Using Python
python3 -m http.server 8080

# Or using Node
npx serve .

Then visit http://localhost:8080.

Deploying

Upload the whole folder to any static host (GitHub Pages, Netlify, Vercel, Cloudflare Pages, a plain Nginx/Apache server, etc.). No backend or database is required.

Project structure

all-in-one-viewer/
├── index.html          Main app shell
├── manifest.json        PWA manifest
├── sw.js                 Service worker (offline caching)
├── css/
│   └── style.css        All styling, themes, responsive rules
├── js/
│   ├── i18n.js           English / Vietnamese translations
│   ├── storage.js       localStorage preferences helper
│   ├── viewers.js       Format parsers & renderers (JSON, CSV, Markdown, XML, YAML, text)
│   └── app.js            App state, UI wiring, file handling
├── fonts/                 Self-hosted Be Vietnam Pro (woff2)
├── icons/                  Favicon & PWA app icons
├── README.md              This file (English)
└── README.vi.md          Vietnamese README

Adding a new format

The app is intentionally modular so new formats can be added easily:

1. Add the extension mapping in FORMATS inside js/viewers.js.
2. Write a small parser/renderer (see JSONViewer, CSVViewer, etc. as examples).
3. Add a case for it in renderActiveFile() inside js/app.js.
4. Add any new translation strings to js/i18n.js.

Privacy

All-in-One Viewer performs 100% of its work in your browser. Files you open are read with the browser's local FileReader API and are never transmitted to any server.

License

You are free to use, modify, and distribute this project for personal or commercial purposes.

---

Made by gnort67, with the assistance of Claude (Anthropic).