JsonView

Save PDF

Last Updated: May 5, 2026
2 minute read

MarkLogic Server
Documentation

The JsonView widget displays formatted JSON. The widget is based on the json-viewer npm library. Props control the formatting and functionality of the JSON. The JsonView widget can be used to:

Confirm responses are returned as expected from the backend.
Inspect response payload property paths to configure other widgets.

JsonView example rendering

The JsonView widget looks like this:

JsonView example configuration

In this example, the JsonView widget uses MarkLogicContext to display a MarkLogic search response. The search response JSON object is defined in the data prop:

import { useContext } from "react";
import './App.css';
import { MarkLogicContext, SearchBox, JsonView } from "ml-fasttrack";
  
function App() {
  
  const context = useContext(MarkLogicContext);
  
  const handleSearch = (params) => {
    context.setQtext(params?.q);
  }
  
  return (
    <div className="App">
      <div>
        <SearchBox onSearch={handleSearch}/>
      </div>
      <div>
        <JsonView
            data={context.searchResponse}
            displayDataTypes
            displayObjectSize
            enableClipboard
            groupArraysAfterLength={100}
            indentWidth={4}
            maxHeight="580px"
            quotesOnKeys
            rootName="envelope"
          />
      </div>
    </div>
  );
}
  
export default App;

JSONView API

Prop	Type	Description
data	object	JSON data to display.
displayDataTypes	boolean	Indicates whether to show data types as prefixes to values. Default is true.
displayObjectSize	boolean	Indicates whether to show the size of objects and arrays. Default is true.
enableClipboard	boolean	Indicates whether to show clickable icons for copying object and array data. Default is true.
groupArraysAfterLength	number	Displays array values in groups based on the value. Groups are displayed with bracket notation and can be expanded and collapsed by clicking the brackets. Default is `100`.
indentWidth	number	Indent width for nested objects. Default is `4.`
maxHeight	string	Maximum height of the container. Content that exceeds this height will scroll. Default is `“500px”.`
quotesOnKeys	boolean	Indicates whether to Include quotes around keys (e.g. `"name":` vs. `name`). Default is `true`.
rootName	string	Name of the root node. Default is `“root`".

Develop with FastTrack

JsonView

Table of Contents

JsonView

JsonView example rendering

JsonView example configuration

JSONView API