JSON Tools

A simple web application that provides various JSON tools to help you work with JSON data more effectively. The app includes features like JSON Formatting, JSON Path Evaluation, a JSON Viewer, and a Difference Editor for comparing JSON data.

Online Demo

Live Demo

Features

• JSON Formatting: Easily format and beautify your JSON data for better readability.

• JSON Path Evaluation: Extract specific data from JSON using JSONPath expressions. Provides autocompletion for possible JSON Path.

• JSON Schema Validation: Validate / Edit your JSON Data against your JSON Schema.

• JSON Tree: Visualize your JSON data in a tree view, making it easier to navigate through nested structures.

• Difference Editor: Compare two sets of JSON data side by side to quickly identify differences.

• JWT Sign/Verify : A ReactFlow-based utility for visualizing the signing and verification of JSON Web Tokens (JWT).

• JWT Decode: Simple Utility to decode your JWT Token's payload & header.

Built With

• Framework: React + TypeScript + Vite
• Styling:
  • @emotion/react
  • @emotion/styled
  • @mui/material
  • @mui/icons-material
• Editor: @monaco-editor/react
• React Flow: @xyflow/react
• Jose: jose
• Routing: react-router-dom
• HTTP Client: axios
• JSON Editor: json-edit-react
• JSON Path: jsonpath-plus
• JSON Repair: jsonrepair
• JWT Decode: jwt-decode
• JSON Schema Validator: ajv
• JSON Flatten / Unflatten: flat
• Local Storage: react-use
• Draggable Dialogs: react-draggable
• React Helmet: react-helmet

Getting Started

To get a local copy of the project up and running, follow these steps:

Prerequisites

Make sure you have the following installed on your system:

• Node.js
• npm (or yarn)

Installation

1. Clone the repository:

   git clone https://github.com/uniquedm/json-tools.git
   cd json-tools

2. Install the dependencies:

   npm install

   Or, if you're using yarn:

   yarn install

Running the App

To start the development server, run:

npm run dev

Or, if you're using yarn:

yarn dev

The app will be available at http://localhost:5173/json-tools

Building for Production

To build the app for production, run:

npm run build

Or, if you're using yarn:

yarn build

The optimized and minified files will be generated in the dist/ directory.

Contributing

Contributions are welcome! Please feel free to submit a Pull Request or open an Issue to suggest improvements or report bugs.

License

This project is licensed under the GNU General Public License v3.0