Skip to content

yequ/json-visualizer

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

84 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

JSON Visualizer

一个高性能、易用的在线 JSON 可视化工具。

License: MIT

English | 中文

English

A powerful, lightweight, and user-friendly JSON visualization tool that helps developers format, analyze, and manipulate JSON data with ease. Built with vanilla JavaScript and designed with a focus on performance and usability, especially for large JSON datasets.

✨ Features

  • JSON Formatting & Validation: Instantly format and validate JSON with syntax highlighting
  • Interactive Visualization: Collapsible tree view for better navigation of complex JSON structures
  • Real-time Processing: Live formatting as you type with efficient throttling
  • High Performance: Optimized for large JSON datasets with smart rendering and lazy loading
  • Multiple Tools Included:
    • 🔄 Timestamp Converter
    • 🔗 URL Encoder/Decoder
    • 🔐 Base64 Encoder/Decoder
    • 📦 Data Compression/Decompression (Gzip, Deflate, LZ-String)
    • 🎨 Dark/Light Theme Toggle
  • Advanced JSON Operations:
    • 🔄 JSON Escape/Unescape
    • 📦 JSON Compression
    • 🔍 Expand/Collapse All
  • File Operations:
    • Drag & Drop JSON files
    • Copy formatted JSON
    • Download formatted JSON
  • Data Persistence: Automatically saves your work using browser storage
  • Error Handling: Clear error messages and validation feedback
  • Responsive Design: Works seamlessly on desktop and mobile devices

🚀 Quick Start

Simply visit https://json.red to start using JSON Visualizer online.

Local Development

  1. Clone the repository: ```bash git clone https://github.com/yequ/json-visualizer.git cd json-visualizer ```

  2. Open index.html directly in your browser.

🛠️ Usage

  1. Paste or type JSON into the input area
  2. View formatted output in the visualization panel
  3. Use additional tools like timestamp conversion, URL encoding, etc.
  4. Toggle between themes for comfortable viewing
  5. Save and load your work automatically

📝 License

This project is licensed under the MIT License - see the LICENSE file for details.


中文

一个功能强大、轻量级且用户友好的 JSON 可视化工具,帮助开发者轻松格式化、分析和操作 JSON 数据。使用原生 JavaScript 构建,专注于性能和可用性,特别针对大型 JSON 数据集进行了优化。

✨ 功能特性

  • JSON 格式化与验证:即时格式化和验证 JSON,支持语法高亮
  • 交互式可视化:可折叠的树形视图,便于浏览复杂的 JSON 结构
  • 实时处理:输入时实时格式化,采用高效的节流机制
  • 高性能:针对大型 JSON 数据集优化,支持智能渲染和懒加载
  • 多种工具集成
    • 🔄 时间戳转换器
    • 🔗 URL 编码/解码器
    • 🔐 Base64 编码/解码器
    • 📦 数据压缩/解压 (Gzip, Deflate, LZ-String)
    • 🎨 深色/浅色主题切换
  • 高级 JSON 操作
    • 🔄 JSON 转义/反转义
    • 📦 JSON 压缩
    • 🔍 全部展开/折叠
  • 文件操作
    • 拖拽上传 JSON 文件
    • 复制格式化后的 JSON
    • 下载格式化后的 JSON
  • 数据持久化:使用浏览器存储自动保存您的工作
  • 错误处理:清晰的错误信息和验证反馈
  • 响应式设计:在桌面和移动设备上都能完美运行

🚀 快速开始

直接访问 https://json.red 即可在线使用 JSON Visualizer。

本地开发

  1. 克隆仓库: ```bash git clone https://github.com/yequ/json-visualizer.git cd json-visualizer ```

  2. 直接在浏览器中打开 index.html 文件。

🛠️ 使用方法

  1. 粘贴或输入 JSON 到输入区域
  2. 查看格式化输出 在可视化面板中
  3. 使用附加工具 如时间戳转换、URL 编码等
  4. 切换主题 以获得舒适的查看体验
  5. 自动保存和加载 您的工作内容

🤝 贡献

欢迎贡献代码!请随时提交 Pull Request 或创建 Issue。

📝 许可证

本项目采用 MIT 许可证 - 详情请查看 LICENSE 文件。

🌟 Star History

如果这个项目对您有帮助,请给我们一个 ⭐️!


Made with ❤️ by developers, for developers

About

No description, website, or topics provided.

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

 
 
 

Contributors