Hex Viewer App

CI Coverage Deploy License: MIT Node.js Code style: Prettier PRs Welcome JavaScript Top Language Repo Size Last Commit Commit Activity Open Issues Open PRs Stars Forks Watchers Ask DeepWiki

A simple React web app that lets you upload or drag & drop any file and view its contents in hexadecimal and ASCII format. The project is available in 26 languages, supports dark mode, is fully tested with Vitest, and can be easily deployed to GitHub Pages.

• Hex Viewer: Displays the hex bytes of a file alongside their ASCII representation, 16 bytes per row.
• Drag & Drop or Upload: Easily load files via file input or drag & drop.
• Search / Filter: Instantly filter rows by hex (spaces optional), ASCII text, or offset.
• Copy & Download: Copy the formatted hex dump to your clipboard or download it as a .txt file.
• 26 Languages: Fully internationalized UI with an in-app language selector and automatic browser-language detection (including Traditional Chinese and right-to-left support for Arabic and Urdu).
• Dark Mode: Toggle between light and dark modes for better readability.
• Privacy-first: Files are parsed entirely in your browser — nothing is ever uploaded. See PRIVACY.md.
• Clean and Intuitive UI: Hex and ASCII columns are styled for clarity.
• Responsive Design: Works well on desktop and tablet screens.

The live demo is deployed here:

• GitHub Pages: Hex Viewer

To run the app locally:

1. Clone the repository:

git clone https://github.com/doctorlai/hex-viewer.git
cd hex-viewer

2. Install dependencies:

npm install

3. Start the development server:

npm run dev

4. Run tests:

npm run test # Run once
npm run coverage # Run with coverage (enforces minimum thresholds)

5. Lint & format code:

npm run lint # Check for lint errors
npm run lint:fix # Auto-fix lint errors
npm run format # Check formatting
npm run format:fix # Automatically fix formatting

6. Run everything at once (format, lint, coverage, build):

 npm run check

7. Open http://localhost:5173/ in your browser.

1. Upload a file or drag & drop it into the app.
2. View the file’s hexadecimal bytes and ASCII representation side by side.
3. Use the search box to filter rows by hex (e.g. 48 65 or 4865), ASCII text, or offset.
4. Copy 📋 the hex dump to your clipboard or download 💾 it as a .txt file.
5. Change the language 🌐 from the selector in the top toolbar.
6. Toggle Light/Dark Mode using the 🌞/🌙 button.
7. Press 🗑️ Clear to reset and load another file.

Hex Viewer ships with 26 UI languages, including Traditional Chinese. Translation strings live in src/locales/ and are generated from a single source of truth in scripts/generate-locales.mjs. To add or update a translation, edit the generator and run:

 npm run locales:generate

See CONTRIBUTING.md for details.

Contributions are welcome! Please read the Contributing Guide and our Code of Conduct before getting started.

1. Fork the repository.
2. Create a feature branch:

git checkout -b feature-branch

3. Make your changes and ensure npm run check passes.
4. Commit your changes:

git commit -am 'Add new feature'

5. Push to your fork:

git push origin feature-branch

6. Open a Pull Request.

• 📘 Contributing Guide
• 🛟 Support
• 🔒 Security Policy
• 🕵️ Privacy Policy
• 🤝 Code of Conduct
• 📝 Changelog
• 🤖 AI-generated docs (DeepWiki)

This project is licensed under the MIT License - see the LICENSE file for details.

• Built with ❤️ by @justyy
• Initial boilerplate provided by ChatGPT.
• If you found this tool useful, consider buying me a coffee ☕ Thank you!