json_view_plus 1.0.0

High-performance Flutter JSON tree viewer with lazy row rendering, syntax highlighting, expansion controls, and Chrome DevTools-style large JSON browsing.

json_view_plus

A high-performance Flutter JSON tree viewer with lazy row rendering, syntax highlighting, expansion controls, and Chrome DevTools-style browsing for large JSON values.

json_view_plus is a maintained, performance-focused fork of json_view. It keeps the familiar JsonView API while publishing under a distinct package name for maintained releases.

[JsonView Plus preview]

Live demo

Try the production example: https://flutterjsonview.netlify.app/

Why this fork exists

The original json_view API was useful, but large payloads exposed the same problems most naïve tree renderers hit: recursive widget trees, nested scroll views, eager expansion, and expensive string/layout work. json_view_plus was forked to make JSON inspection practical for very large data, including 100MB+ JSON documents when used with the lazy renderer and sensible expansion defaults.

We reviewed mature JavaScript JSON-view libraries and browser/DevTools-style JSON inspectors, then ported the important implementation techniques to Flutter:

• flatten the visible tree into a single virtualized row list instead of nesting tree widgets;
• render only visible rows through one lazy ListView.builder;
• chunk very large maps/lists into expandable range rows;
• default to collapsed/limited-depth rendering so large roots do not explode the widget tree;
• use compact summaries for collapsed containers and long values;
• parse raw JSON asynchronously, with isolate support for large strings;
• keep expansion, reveal, and copy behavior path-based rather than widget-recursion-based.

After porting those JavaScript JSON-viewer patterns, we applied Flutter-specific optimizations from our own experience: avoiding nested shrink-wrapped lists, minimizing GlobalKey usage, reducing row chrome, supporting internal scroll padding, preserving scrollbar alignment, and tuning rebuild behavior for Flutter's layout/render pipeline.

We also added smart, hand-tuned syntax highlighting and collapse logic so dense JSON stays readable and easy to navigate. Values are colored by type, collapsed containers show useful summaries, large collections are chunked into manageable ranges, and default expansion behavior is tuned to reveal structure without overwhelming the UI.

Features

• Lazy flattened tree rendering for large maps and lists
• Expand/collapse controls with default depth options
• JSON type highlighting for strings, numbers, booleans, nulls, lists, and maps
• Optional nested JSON-string parsing
• Long-string previews to avoid layout jank in large payloads
• Programmatic collapseAll, expandAll, expandPath, and revealNode
• Async JSON-string decoding with inline, isolate, or automatic strategy selection
• Custom colors, text styles, arrows, spacing, animation, quotations, and per-key tiles
• Flutter-only runtime dependency footprint

Installation

dependencies:
  json_view_plus: ^1.0.0

import 'package:json_view_plus/json_view_plus.dart';

Quick start

JsonView(
  json: const {
    'name': 'json_view_plus',
    'published': true,
    'items': [1, 2, 3],
  },
)

Decode from a JSON string

Use JsonView.fromJsonString when your input is raw JSON text. The default auto strategy decodes small payloads inline and larger payloads in an isolate.

JsonView.fromJsonString(
  jsonString: rawJson,
  decodeStrategy: JsonDecodeStrategy.auto,
  isolateThresholdBytes: 64 * 1024,
  loading: const Center(child: CircularProgressIndicator()),
  errorBuilder: (context, error, stackTrace) {
    return Text('Invalid JSON: $error');
  },
)

Styling and behavior

Wrap a subtree with JsonConfig for shared defaults, or pass the same options directly to a JsonView.

JsonConfig(
  data: JsonConfigData(
    animation: true,
    animationDuration: const Duration(milliseconds: 220),
    itemPadding: const EdgeInsets.only(left: 10),
    color: const JsonColorScheme(
      stringColor: Color(0xFF16A34A),
      numberColor: Color(0xFF2563EB),
      booleanColor: Color(0xFF9333EA),
      nullColor: Color(0xFFDC2626),
    ),
    style: const JsonStyleScheme(
      openFirstLayer: true,
      depth: 1,
      quotation: JsonQuotation.doubleQuote,
      charactersBeforeCutoff: 120,
    ),
  ),
  child: JsonView(json: data),
)

Nested JSON strings

Some APIs embed JSON objects as escaped strings. Enable parseNestedJsonStrings to render those values as expandable nodes.

JsonView(
  json: const {
    'metadata': '{"id":42,"tags":["json","viewer"]}',
  },
  styleScheme: const JsonStyleScheme(
    parseNestedJsonStrings: true,
    nestedJsonStringMaxLength: 32768,
  ),
)

Programmatic control

final controller = JsonViewController();

JsonView(
  json: data,
  jsonViewController: controller,
)

await controller.expandPath(['items', 50]);
await controller.revealNode(['items', 50, 'id']);
await controller.collapseAll();

Paths use map keys and list indexes as segments.

Custom tiles

Use customTiles to override how specific keys are rendered.

JsonView(
  json: data,
  customTiles: {
    'status': (context, key, value, config, depth) {
      return Chip(label: Text('$key: $value'));
    },
  },
)

Migration from json_view

Most usages only need an import change:

-import 'package:json_view/json_view.dart';
+import 'package:json_view_plus/json_view_plus.dart';

A compatibility entrypoint remains available:

import 'package:json_view_plus/json_view.dart';

Example

Run the bundled showcase app:

cd example
flutter run -d chrome

The example demonstrates large JSON browsing, compact mode, nested string parsing, custom styling, and controller actions.

Source attribution

Based on the upstream json_view package by laiiihz:

• Pub: https://pub.dev/packages/json_view
• Source: https://github.com/laiiihz/json_view