{"id":"fa64ca4b-3601-4d65-9ee4-829c5a922860","slug":"json-visualization","kind":"skill","name":"json-visualization","summary":"Innovative and open-source visualization application that transforms various data formats, such as JSON, YAML, XML, CSV and more, into interactive graphs.","owner":"HoangDuonng","repoUrl":"https://github.com/HoangDuonng/json-visualization","license":"Apache-2.0","licenseTier":"permissive","trust":"community","stars":2,"match":null,"fewStars":true,"format":"skill","createdAt":"2026-02-05T07:46:57.000Z","addedAt":"2026-10-21T22:32:06.716Z","logoUrl":"https://avatars.githubusercontent.com/u/124786484?u=204346d6d0de1f7d6369535efe1385eaae44bf12&v=4","linkOnly":false,"collection":null,"skillPath":null,"categories":["data-analytics","files-documents"],"tags":[],"runtime":"binary","local":true,"cloudCapable":false,"cloudCapability":"unknown","cloudReadyOnPlatform":false,"needsApiKey":false,"reviewed":false,"syncedAt":"2026-10-22T07:39:12.686Z","sample":false,"url":"https://conduits.dev/tools/json-visualization","language":"TypeScript","transports":["stdio"],"install":{},"requirements":{"env":[],"upstreamMayCharge":false},"tools":null,"readme":"\n

\n \n \"Logo\"\n \n\n

JSON Visualization

\n\n

\n The open-source JSON Editor.\n
\n Learn more »\n
\n
\n Issues\n

\n

\n\n\n\n## About the Project\n\n\"booking-screen\"\n\n## Visualize JSON into interactive graphs\n\nJSON Visualization is a tool for visualizing JSON data in a structured, interactive graphs, making it easier to explore, format, and validate JSON. It offers features like converting JSON to other formats (CSV, YAML), generating JSON Schema, executing queries, and exporting visualizations as images. Designed for both readability and usability.\n\n- **Visualizer**: Instantly convert JSON, YAML, CSV, XML, and TOML into interactive graphs or trees in dark or light mode.\n- **Mind Map**: Interactive card-based note canvas with full node CRUD, expandable/collapsible branches, horizontal/vertical layout rotation, and lossless Markdown, JSON, and Mermaid sync.\n- **Convert**: Seamlessly transform data formats, like JSON to CSV or XML to JSON, for easy sharing.\n- **Format & Validate**: Beautify and validate JSON, YAML, and CSV for clear and accurate data.\n- **Code Generation**: Generate TypeScript interfaces, Golang structs, and JSON Schema.\n- **JSON Schema**: Create JSON Schema, mock data, and validate various data formats.\n- **Advanced Tools**: Decode JWT, randomize data, and run jq or JSON path queries.\n- **Export Image**: Download your visualization as PNG, JPEG, or SVG.\n- **Privacy**: All data processing is local; nothing is stored on our servers.\n\n## Built With\n\n- [Next.js](https://nextjs.org/)\n- [React.js](https://react.dev/)\n- [Reaflow](https://github.com/reaviz/reaflow)\n- [React Flow](https://reactflow.dev/) (`reactflow`)\n- [Monaco Editor](https://github.com/suren-atoyan/monaco-react)\n\n## For AI Agents\n\nThis repository includes [Agent Skills](.agents/skills/) - structured documentation to help AI coding assistants understand and work with this codebase effectively.\n\n**Quick start for agents**: Read [`.agents/skills/json-visualization-dev/SKILL.md`](.agents/skills/json-visualization-dev/SKILL.md) for project overview, architecture, and development guidelines.\n\n## Stay Up-to-Date\n\nWatch **releases** of this repository to be notified of future updates:\n\n\"Star\n\n\n\n## Getting Started\n\nTo get a local copy up and running, please follow these simple steps.\n\n### Prerequisites\n\nHere is what you need to be able to run JSON Visualization.\n\n- Node.js (Version: >=18.x)\n- Pnpm _(recommended)_\n\n## Development\n\n### Setup\n\n1. Clone the repo into a public GitHub repository (or fork https://github.com/HoangDuonng/Json_Visualization/fork). If you plan to distribute the code, read the [`LICENSE`](/LICENSE.md) for additional details.\n\n ```sh\n git clone https://github.com/HoangDuonng/Json_Visualization.git\n ```\n\n2. Go to the project folder\n\n ```sh\n cd Json_Visualization\n ```\n\n3. Install packages\n\n ```sh\n pnpm install\n ```\n\n4. Run the project\n\n ```sh\n pnpm dev\n\n # Running on http://localhost:3000/\n ```\n\n### Docker\n\n🐳 A [`Dockerfile`](Dockerfile) is provided in the root of the repository.\nIf you want to run JSON Visualization locally:\n\n```console\n# Build a Docker image with:\ndocker compose build\n\n# Run locally with `docker-compose`\ndocker compose up\n\n# Go to http://localhost:8888\n```\n\n## Configuration\n\nThe supported node limit can be changed by editing the `NEXT_PUBLIC_NODE_LIMIT` value in the `.env` file at the project root.\n\n\n\n## License\n\nSee [`LICENSE`](/LICENSE.md) for more information.\n"}