Installation Clone this repository:

git clone https://github.com/siddharthh12/visual-tree-visualizer Install dependencies:

npm install or

yarn install Running the App Start the development server:

npm run dev or

yarn dev Then visit http://localhost:3000 in your browser.

Usage Paste or type JSON in the input panel on the left. Click Visualize Tree to generate the interactive tree. Use the Search bar to find and highlight nodes. Click the Clear button to reset everything. Use the theme toggle in the navbar for light/dark mode.

Technologies Used- React / Next.js Tailwind CSS for styling React Flow (for tree visualization) TypeScript Lucide React (for icons)

Screenshots

Folder Structure

. ├── src/components/JsonInput.tsx ├── src/components/SearchBar.tsx ├── src/components/TreeVisualizer.tsx ├── utils/jsonToTree.ts ├── app/page.tsx ├── public/ ├── README.md └── package.json

Author Developed by Siddharth, siddharthtiwari1265@gmail.com