JSONVisualizer

JSONVisualizer is a lightweight JavaScript library for visualizing JSON data in a collapsible and interactive format within web apps. It allows developers to easily render JSON data in a human-readable way, making it convenient for debugging, data exploration, and presentation purposes.

Features

Renders JSON data in a collapsible tree-like structure.
Supports customization options for formatting, colorization, and styling.
Handles nested objects and arrays for comprehensive visualization.
Interactive collapse/expand functionality for navigating through large JSON datasets.
Copy JSON data to clipboard feature for easy sharing and usage.
Lightweight and easy to integrate into web applications.

Installation

You can install JSONVisualizer via npm:

#NOTE: Not yet published to npm
npm install json-visualizer

Alternatively, you can include the library directly in your HTML file:

<script src="path/to/json-visualizer.js"></script>

Usage

// Import JSONVisualizer (if using ES modules)
import JSONVisualizer from 'json-visualizer';

// Create an instance of JSONVisualizer with JSON data
const data = { /* Your JSON data */ };
const visualizer = new JSONVisualizer(data);

// Render JSON data within a container element
const container = document.getElementById('json-container');
visualizer.render(container);

Examples

Here's a simple example of using JSONVisualizer:

<!DOCTYPE html>
<html>
<head>
  <title>JSON Visualizer Example</title>
</head>
<body>
  <div id="json-container"></div>

  <script src="path/to/json-visualizer.js"></script>
  <script>
    const data = { /* Your JSON data */ };
    const visualizer = new JSONVisualizer(data);
    const container = document.getElementById('json-container');
    visualizer.render(container);
  </script>
</body>
</html>

Contributing

Contributions are welcome! If you have any suggestions, bug fixes, or feature requests, please open an issue or submit a pull request on GitHub.

License

JSONVisualizer is licensed under the MIT License. See the LICENSE file for details.