Super cute code visualization tool ✨

中文

Wow! This is a super powerful code visualization and debugging tool~ It can convert JSON, JavaScript and Python codes into super beautiful tree diagrams, support drag and drop editing, format checking, one-click export of code files and many other interesting functions! (●'◡'●)

Super cute function list ✨

• Multi-language support: Not only JSON, but also supports JavaScript and Python code visualization~ It is super easy to switch!
• Code checking assistant: It will automatically check your code format, and will tell you where the error is if there is a problem~
• Cute tree diagram: Turn complex code into a super intuitive small tree diagram, which looks so comfortable~
• Drag and drop: You can use the mouse to drag nodes to reorganize the data structure, just like playing with building blocks!
• Folding magic: Don’t be afraid of large data, you can fold it up to become small, and then unfold it when needed~
• One-click download: Export data as JSON, JavaScript or Python format files, and save it to your computer with one click!
• Beautify Code: One click makes your code neat, beautiful and professional~
• Shortcuts: Supports a lot of convenient shortcuts, allowing your little fingers to operate quickly~
• Cute interface: Whether it is a large screen or a small screen, it can be perfectly adapted and looks super cute~

Start playing quickly 🚀

1. Clone or download this gadget to your computer~

2. Open the index.html file with your favorite browser, and you can see the cute interface!

3. Enter or paste your code in the small box on the left (it can be JSON, JavaScript or Python)

4. Click the "Parse" button, wow! Your code has become a cute tree diagram~

How to play? 🎮

Basic operation guide

• Select language: You can select the type of code you want to process at the top (JSON, JavaScript or Python)~

• Parse code: Enter your code on the left, then click the "Parse" button or use the shortcut key Ctrl+Enter, and you can see the magical changes!

• Beautify code: Click the "Format" button or use the shortcut key Ctrl+Shift+F, and the code will immediately become neat and tidy~

• Clear and start again: Click the "Clear" button to clear the editor with one click and start again!

• Take a look at the example: Don't know what to write? Click the "Example" button to automatically load the sample code of the corresponding language~

Tree diagram gameplay

• Expand/Collapse: Click the small triangle in front of the node to expand or collapse the node like magic~

• Expand all: Click the "Expand all" button, and all nodes will be expanded!

• Collapse All: Click the "Collapse All" button, and all nodes will shrink into small ones~

• Drag and drop: Use the mouse to drag a node to another object or array node to reorganize the data structure!

Export Tips

1. Click the "Export" button

2. Select the format you want from the drop-down menu (JSON, JavaScript or Python)

3. The file will be automatically downloaded to your computer, which is super convenient!

4. The file name will be automatically set to data.json, data.js or data.py according to the format~

Technical Secrets 💻

• Pure JavaScript (ES6+), without any complex framework, super lightweight~

• Beautiful HTML5 tags, clear structure and good-looking!

• Cute CSS3 style, support responsive design, can also be perfectly displayed on mobile phones~

• Zero dependency! No need to install anything extra, just open it and use it, super convenient!

Project minimap 🗺️

json-visualizer/
├── css/
│ └── styles.css # Cute style file, making the interface beautiful~
├── js/
│ ├── app.js # Main application file, the commander of all functions!
│ ├── editor.js # Editor module, responsible for code input and formatting~
│ ├── json-parser.js # Parser module, supports JSON, JavaScript and Python!
│ └── tree-view.js # Tree view module, turns the code into a beautiful tree~
├── index.html # Main HTML file, the entrance to the entire application~
└── README.md # This is the cute manual you are reading now~

Small license 📜

This cute little tool uses MIT License open source~ This means you can use, modify and share it freely, as long as you keep the original author's copyright information! Go and create more interesting things! (｡･ω･｡)ﾉ♡

超级可爱的代码可视化工具 ✨

哇！这是一个超级厉害的代码可视化和调试小工具呢～它可以把JSON、JavaScript和Python代码转换成超级好看的树状图，支持拖拽编辑、格式检查、一键导出代码文件等超多有趣功能哦！(●'◡'●)

超萌功能列表 ✨

• 多语言支持：不只是JSON哦，还支持JavaScript和Python代码的可视化呢～切换起来超简单的！
• 代码检查小助手：会自动检查你的代码格式，如果有问题会告诉你哪里出错啦～
• 可爱树状图：把复杂的代码变成超级直观的小树图，看起来好舒服～
• 拖拖拽拽：可以用鼠标拖动节点，重新组织数据结构，就像玩积木一样有趣！
• 折叠小魔法：大型数据不用怕，可以折叠起来变得小小的，需要时再展开～
• 一键下载：把数据导出为JSON、JavaScript或Python格式的文件，点一下就能保存到电脑上啦！
• 美化代码：一键让你的代码变得整整齐齐，好看又专业～
• 快捷键：支持超多方便的快捷键，让你的小手指操作起来飞快呢～
• 萌萌的界面：无论是大屏幕还是小屏幕，都能完美适配，看起来都超级可爱～

快速开始玩耍 🚀

1. 把这个小工具克隆或下载到你的电脑上～
2. 用你喜欢的浏览器打开index.html文件，就能看到萌萌的界面啦！
3. 在左边的小框框里输入或粘贴你的代码（可以是JSON、JavaScript或Python哦）
4. 点击"解析"按钮，哇！你的代码变成了可爱的树状图～

怎么玩耍呢？ 🎮

基本操作小指南

• 选择语言：在顶部可以选择你想要处理的代码类型（JSON、JavaScript或Python）～
• 解析代码：在左侧输入你的代码，然后点击"解析"按钮或使用快捷键Ctrl+Enter，就能看到神奇的变化啦！
• 美化代码：点击"格式化"按钮或使用快捷键Ctrl+Shift+F，代码立刻变得整整齐齐～
• 清空重来：点击"清空"按钮，一键清空编辑器，重新开始！
• 看看例子：不知道写什么？点击"示例"按钮，会自动加载对应语言的示例代码哦～

树状图玩法

• 展开/收起：点击节点前面的小三角，可以像魔法一样展开或收起节点～
• 全部展开：点击"全部展开"按钮，所有的节点都会乖乖展开！
• 全部收起：点击"全部折叠"按钮，所有的节点都会缩成小小的～
• 拖拖拽拽：用鼠标拖动节点到另一个对象或数组节点上，就能重新组织数据结构啦！

导出小技巧

1. 点击"导出"按钮
2. 从下拉菜单选择你想要的格式（JSON、JavaScript或Python）
3. 文件会自动下载到你的电脑上，超级方便呢！
4. 文件名会根据格式自动设置为data.json、data.js或data.py～

技术小秘密 💻

• 纯纯的JavaScript（ES6+），没有用任何复杂的框架，超级轻量级～
• 漂亮的HTML5标签，结构清晰又好看！
• 可爱的CSS3样式，支持响应式设计，在手机上也能完美显示哦～
• 零依赖！不需要安装任何额外的东西，打开就能用，超级方便呢！

项目小地图 🗺️

json-visualizer/
├── css/
│   └── styles.css           # 可爱的样式文件，让界面变得美美的～
├── js/
│   ├── app.js               # 应用程序主文件，所有功能的指挥官！
│   ├── editor.js            # 编辑器模块，负责代码输入和格式化～
│   ├── json-parser.js       # 解析器模块，支持JSON、JavaScript和Python哦！
│   └── tree-view.js         # 树状图模块，把代码变成漂亮的树～
├── index.html               # 主HTML文件，整个应用的入口～
└── README.md                # 就是你现在看的这个可爱说明书啦～

小小许可证 📜

这个可爱的小工具使用 MIT License 开源哦～这意味着你可以自由使用、修改和分享它，只要保留原作者的版权信息就可以啦！快去创造更多有趣的东西吧！(｡･ω･｡)ﾉ♡