JsonView

A collapsible tree view of a JSON value: ▸/▾ rows expand and collapse in place, and values are colored by type. Invalid source is rendered as a parse-error state instead of throwing.

Import: package:fleury/fleury.dart, or package:fleury/fleury_core.dart in browser code.

Usage

JsonView(
  value: const <String, Object?>{
    'name': 'fleury',
    'version': '1.0.0',
    'web': true,
    'targets': <String>['terminal', 'dom', 'serve'],
  },
  defaultExpandedDepth: 2,
)

Details

Up and Down move the selected row; PageUp, PageDown, Home, and End jump. Right expands a collapsed object or array or, on an expanded one, steps into its first child. Left collapses an expanded one or steps out to the parent. Enter or a click expands or collapses an object or array. Ctrl+C copies the selected node as JSON, or only its visible row when copyOptions sets JsonViewCopyMode.line.

The viewer bounds its own height: it renders at most maxVisible rows (fewer for a shorter document) and scrolls the rest, so it composes directly inside a Column or any other unbounded slot. Wrap it in an Expanded or a SizedBox to give it a different height.

Constructors

`JsonView()`

Parameter	Type	Default	Description
`value:`	`Object?`	required	Already-materialized JSON-compatible value wrapped in `document`.
`controller:`	`JsonViewController?`	—	External expansion, selection, and visible-range controller.
`focusNode:`	`FocusNode?`	—	Focus node used for keyboard navigation.
`autofocus:`	`bool`	`false`	Whether the viewer should request focus when mounted.
`semanticLabel:`	`String`	`'JSON'`	Semantic label (the accessibility name; not rendered) for the JSON viewer.
`defaultExpandedDepth:`	`int`	`1`	Depth expanded by default before user-controlled collapse state applies.
`maxLineLength:`	`int?`	`1000`	Cuts each displayed row, indentation included, to this many characters, ending it with `…`; null never cuts. Copying a node still copies all of its JSON.
`maxVisible:`	`int`	`12`	Maximum visible JSON rows before the viewer scrolls. More
`copySelection:`	`bool`	`true`	Whether Ctrl+C (and the semantic copy action) copies the selected node, or its row if `copyOptions` says so.
`copyOptions:`	`JsonViewCopyOptions`	`const JsonViewCopyOptions()`	Clipboard/export options for copied JSON text.
`onCopy:`	`void Function(JsonViewCopyResult result)?`	—	Called after a copy attempt completes.

maxVisible: This is what bounds the viewer’s height in an unbounded slot (a Column child, say); the internal list cannot window its rows without one.

`JsonView.document()`

Creates a viewer from a parsed or already-materialized JsonViewDocument.

A document that retains a parse error renders its invalid-document state.

Parameter	Type	Default	Description
`document:`	`JsonViewDocument`	required	Parsed or already-materialized JSON document to render.
`controller:`	`JsonViewController?`	—	External expansion, selection, and visible-range controller.
`focusNode:`	`FocusNode?`	—	Focus node used for keyboard navigation.
`autofocus:`	`bool`	`false`	Whether the viewer should request focus when mounted.
`semanticLabel:`	`String`	`'JSON'`	Semantic label (the accessibility name; not rendered) for the JSON viewer.
`defaultExpandedDepth:`	`int`	`1`	Depth expanded by default before user-controlled collapse state applies.
`maxLineLength:`	`int?`	`1000`	Cuts each displayed row, indentation included, to this many characters, ending it with `…`; null never cuts. Copying a node still copies all of its JSON.
`maxVisible:`	`int`	`12`	Maximum visible JSON rows before the viewer scrolls. More
`copySelection:`	`bool`	`true`	Whether Ctrl+C (and the semantic copy action) copies the selected node, or its row if `copyOptions` says so.
`copyOptions:`	`JsonViewCopyOptions`	`const JsonViewCopyOptions()`	Clipboard/export options for copied JSON text.
`onCopy:`	`void Function(JsonViewCopyResult result)?`	—	Called after a copy attempt completes.

`JsonView.string()`

Creates a viewer by parsing JSON source.

Invalid JSON is retained as a document error and rendered by the viewer instead of being thrown from this constructor.

Parameter	Type	Default	Description
`source`	`String`	required	JSON source parsed into a document before the widget is mounted.
`controller:`	`JsonViewController?`	—	External expansion, selection, and visible-range controller.
`focusNode:`	`FocusNode?`	—	Focus node used for keyboard navigation.
`autofocus:`	`bool`	`false`	Whether the viewer should request focus when mounted.
`semanticLabel:`	`String`	`'JSON'`	Semantic label (the accessibility name; not rendered) for the JSON viewer.
`defaultExpandedDepth:`	`int`	`1`	Depth expanded by default before user-controlled collapse state applies.
`maxLineLength:`	`int?`	`1000`	Cuts each displayed row, indentation included, to this many characters, ending it with `…`; null never cuts. Copying a node still copies all of its JSON.
`maxVisible:`	`int`	`12`	Maximum visible JSON rows before the viewer scrolls. More
`copySelection:`	`bool`	`true`	Whether Ctrl+C (and the semantic copy action) copies the selected node, or its row if `copyOptions` says so.
`copyOptions:`	`JsonViewCopyOptions`	`const JsonViewCopyOptions()`	Clipboard/export options for copied JSON text.
`onCopy:`	`void Function(JsonViewCopyResult result)?`	—	Called after a copy attempt completes.

Source

JsonView is defined in packages/fleury/lib/src/catalog/json_view.dart.

Category: Text & content · All widgets

jsonview_example.dart

Example · editable

Widget example() => JsonView(
  value: const <String, Object?>{
    'name': 'fleury',
    'version': '1.0.0',
    'web': true,
    'targets': <String>['terminal', 'dom', 'serve'],
  },
  defaultExpandedDepth: 2,
);

Live preview

Live · interactive

click & type to interact ⓘ how this demo runs