Modern JSON Viewer

A clean and modern desktop application for viewing, formatting, and manipulating JSON data. Built with Electron, React, and TypeScript.

Features

• 🎨 Clean, modern interface
• 📝 Multiple tabs support
• 🔄 Format and minify JSON
• 📋 Copy formatted JSON to clipboard
• 🌙 Dark mode by default
• 💻 Cross-platform (Windows, macOS, Linux)

Development

Prerequisites

• Node.js (v18 or higher)
• npm (v9 or higher)

Installation

1. Clone the repository

git clone https://github.com/groobybugs/json-viewer.git
cd json-viewer

2. Install dependencies

npm install

3. Start the development server

npm run electron:dev

Building

To create a production build for your current platform:

npm run electron:build

The built application will be available in the release directory.

Project Structure

json-viewer/
├── src/                   # Source code
│   ├── components/        # UI components
│   └── lib/              # Utilities and helpers
├── electron/              # Electron main process
└── dist/                  # Built files

Technology Stack

• Electron - Cross-platform desktop framework
• React - UI framework
• TypeScript - Type safety
• Vite - Build tool
• Tailwind CSS - Styling
• Radix UI - UI primitives
• Lucide Icons - Icons

Scripts

• npm run electron:dev - Start the development server
• npm run electron:build - Create a production build
• npm run lint - Run ESLint
• npm run build - Build the application without packaging
• npm run preview - Preview the built application

Contributing

1. Fork the repository
2. Create your feature branch (git checkout -b feature/AmazingFeature)
3. Commit your changes (git commit -m 'Add some AmazingFeature')
4. Push to the branch (git push origin feature/AmazingFeature)
5. Open a Pull Request

License

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

Acknowledgments

• Design inspired by modern development tools
• Built using electron-vite
• Icons from Lucide