JSON Inspector

A Flutter package that provides an interactive JSON viewer with features like expanding/collapsing nodes, selecting values, and copying to clipboard. Perfect for debugging, data inspection, and JSON visualization needs.

pub package

Features

  • 🌳 Interactive tree view of JSON data
  • 🔍 Expandable/collapsible nodes for objects and arrays
  • ✨ Node selection with highlight
  • 📋 Copy to clipboard functionality
  • 🎨 Customizable styles for keys and values
  • 📊 Visual indicators for array length and object key count
  • 🎯 Support for all JSON data types
  • 📱 Responsive and scrollable interface

Installation

Add this to your package's pubspec.yaml file:

dependencies:
  json_inspector: ^0.0.1

Usage

Basic Usage

import 'package:json_inspector/json_inspector.dart';

// Your JSON data
final jsonData = {
  "name": "John Doe",
  "age": 30,
  "address": {
    "street": "123 Main St",
    "city": "New York"
  },
  "hobbies": ["reading", "gaming", "cooking"]
};

// Use it in your widget tree
JsonInspector(
  jsonData: jsonData,
  initiallyExpanded: true, // Optional: expand all nodes initially
)

Customization

JsonInspector(
  jsonData: jsonData,
  initiallyExpanded: false,
  keyStyle: TextStyle(
    color: Colors.purple,
    fontWeight: FontWeight.bold,
  ),
  valueStyle: TextStyle(
    color: Colors.green,
  ),
)

Features in Detail

1. Interactive Expansion

  • Click on arrows to expand/collapse nodes
  • Use initiallyExpanded parameter to control initial state

2. Selection and Copying

  • Click anywhere on a line to select it
  • Long press to copy the value to clipboard
  • Visual feedback for selected items

3. Visual Indicators

  • Arrays show item count: [3 items]
  • Objects show key count: {2 keys}
  • Color-coded keys and values for better readability

4. Type Support

  • Null values
  • Booleans
  • Numbers
  • Strings
  • Arrays
  • Objects

Example

import 'package:flutter/material.dart';
import 'package:json_inspector/json_inspector.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    final jsonData = {
      "user": {
        "id": 1,
        "name": "John Doe",
        "isActive": true,
        "favorites": [
          "pizza",
          "coding",
          null
        ]
      }
    };

    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: Text('JSON Inspector Demo')),
        body: JsonInspector(
          jsonData: jsonData,
          initiallyExpanded: true,
        ),
      ),
    );
  }
}

Additional Information

Requirements

  • Dart SDK: ">=2.17.0 <4.0.0"
  • Flutter: ">=3.0.0"

Contributions

Contributions are welcome! If you find a bug or want a feature, please:

  1. Open an issue
  2. Create a pull request with your changes

License

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

Getting Started with Development

  1. Clone the repository:

    git clone https://github.com/Neelansh-ns/json_inspector.git

  2. Install dependencies:

    flutter pub get

  3. Run the example:

    cd example
flutter run

Author

Neelansh Sethi

Acknowledgments

  • Inspired by various JSON viewers in developer tools
  • Built with Flutter for the community

Libraries

json_inspector