Hex Viewer App

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 supports dark mode, is fully tested with Vitest, and can be easily deployed to GitHub Pages.

Features

• 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.
• Dark Mode: Toggle between light and dark modes for better readability.
• Clean and Intuitive UI: Hex and ASCII columns are styled for clarity.
• Responsive Design: Works well on desktop and tablet screens.

Live Demo

The live demo is deployed here:

• GitHub Pages: Hex Viewer

Installation

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:

## or: npm test
npm run test

5. Test Coverage:

npm run coverage

6. Format code:

npm run format     # Check formatting
npm run format:fix # Automatically fix formatting

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

Usage

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. Toggle Light/Dark Mode using the 🌞/🌙 button.
4. Scroll to explore the full file content.

Contributing

Contributions are welcome!

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

git checkout -b feature-branch

3. Commit your changes:

git commit -am 'Add new feature'

4. Push to your fork:

git push origin feature-branch

5. Open a Pull Request.

License

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

Extra Documentation

AI generated document can be found here

Acknowledgments

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