Skip to content

tinycen/json_viewer

Repository files navigation

JSON Viewer

A cross-platform Flutter application for viewing, navigating, and annotating JSON files with ease.

Features

  • 1. JSON Visualization: Open and display JSON files in an expandable tree view
  • 2. Field Operations: Double-click to select fields, right-click for context menu actions
  • 3. Path Copying: Copy Python-style access paths for any field (e.g., ['key1']['key2'])
  • 4. Annotation System: Add, edit, and save comments for any field (comments saved as YAML)
  • 5. JSON Compression: Automatically compress long JSON data for better readability and to reduce Token usage when copying to ChatGPT-like applications.
  • 6. Cross-platform: Windows, macOS, Linux, Web, Android, iOS

Usage

  1. Navigate the JSON structure in the tree view.
  2. Double-click a field to select it. Right-click (or long-press on mobile) for more actions:
    • Copy Python path: Copies the access path (e.g., ['key1']['key2']) to clipboard.
    • Add/Edit comment: Attach a note to the field (saved in a YAML file alongside your JSON).
    • Note: Comments are shown next to values and are persistent per file.
  3. JSON Compression: Compress long JSON data for better readability.

JSON Compression Feature

The application will automatically compress JSON data when opened:

  • Long strings (>20 characters) are truncated with ellipsis
  • Arrays with more than 2 items show only the first two elements
  • Object structures remain fully intact

Compression Example:

Original JSON:

{
  "name": "Sample JSON with long content",
  "description": "This is an example of a very long text that would be truncated in the compressed view",
  "tags": ["json", "viewer", "compression", "example"],
  "metadata": {
    "version": 1.0,
    "author": "JSON Viewer Team",
    "created": "2023-09-15T10:30:00Z"
  }
}

Compressed View:

{
  "name": "Sample JSON with long content",
  "description": "This is an example of a very long text that would be...",
  "tags": ["json", "viewer"],
  "metadata": {
    "version": 1.0,
    "author": "JSON Viewer Team",
    "created": "2023-09-15T10:30:00Z"
  }
}

Environment

Before you build the app, make sure your environment meets the following requirements:

  • Flutter: 3.32.5 (Channel stable)
  • Dart: 3.8.1
  • Visual Studio: Community 2022 17.14.8 (for Windows desktop development)
  • Windows Version: 11 专业版 64-bit, 23H2, 2009
  • VS Code: 1.101.2 (optional, for code editing)

You can check your environment by running:

flutter doctor -v

Sample Output:

Flutter (Channel stable, 3.32.5, on Microsoft Windows [版本 10.0.22631.5549], locale zh-CN)
• Flutter version 3.32.5 on channel stable at C:\flutter
• Dart version 3.8.1
• Visual Studio Community 2022 version 17.14.36301.6
• Windows 10 SDK version 10.0.26100.0
• VS Code, 64-bit edition (version 1.101.2)
• Chrome (web), Edge (web), Windows (desktop)

Note for users in Mainland China

If you are in Mainland China, it is recommended to set the following environment variables to use Flutter's official mirrors for faster dependency downloads:

# For PowerShell (Windows)
$env:PUB_HOSTED_URL="https://pub.flutter-io.cn"
$env:FLUTTER_STORAGE_BASE_URL="https://storage.flutter-io.cn"

Or for CMD:

set PUB_HOSTED_URL=https://pub.flutter-io.cn
set FLUTTER_STORAGE_BASE_URL=https://storage.flutter-io.cn

Getting Started

Prerequisites

Installation

  1. Clone this repository:
    git clone <repo-url>
    cd json_viewer
  2. Install dependencies:
    flutter pub get
  3. (Optional) Check your environment:
    flutter doctor -v

Running the App

  • Analyze code :
    flutter analyze
  • Debug mode choose platform :
    flutter run -v
  • Debug mode for Windows :
    flutter run -d windows
  • Build for Windows:
    flutter build windows
    Note: The built application will be in the build\windows\runner\Release directory.
  • For other platforms, use the corresponding Flutter build command (e.g., flutter build macos, flutter build apk, etc.)

Screenshots

Contributing

Contributions are welcome! Please open issues or pull requests for bug fixes, features, or suggestions.

License

This project is licensed under the MIT License.

About

JSON tree viewer and annotator built with Flutter.

Resources

License

Stars

Watchers

Forks

Packages

No packages published