JSON Tree Viewer

A React/Next.js and TypeScript-based application that renders any valid JSON structure as a collapsible tree. The application supports expanding and collapsing JSON objects and arrays, and allows users to copy the JSON path of any property to the clipboard.

Features

• Collapsible Tree Structure: Any object or array can be expanded or collapsed. The root object is expanded by default, while child properties are collapsed.
• Copy JSON Path: Easily copy the "json path" of any property with a single click on the "create column" button.
• State Persistence: Nested properties retain their expanded/collapsed state even when their parent properties are toggled.
• Responsive Design: A clean and responsive UI following provided designs.
• Bonus Animations: Smooth transitions for expanding and collapsing tree nodes.

Technical Stack

• Frontend: React/Next.js, TypeScript
• State Management: Zustand
• Icons: Tabler Icons
• UI Framework: Mantine

How to Run the Project

1. Clone the repository:

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

2. Install dependencies:

   npm install

3. Start the development server:

   npm run dev

   The application should now be running on http://localhost:3000.

4. Run the app in production mode:

   npm run build
   npm start

How to Use

• Input JSON: Paste your JSON in the textbox on the left side.
• View JSON: The structured JSON will be displayed in a tree format on the right.
• Expand/Collapse: Click on any object or array to expand or collapse its children.
• Copy Path: Click the "create column" button next to any property to copy its JSON path.

Demo

You can check out the live version of this project here.

Design & Prototype

• Design: Figma Design
• Prototype: Figma Prototype

Deployment

This project can be easily deployed on Vercel, Netlify, or Render. Follow their respective documentation for details on deploying React projects.