Developer Guide

This is the developer guide for using JSON Dive as a library.

JSON Dive is a free online JSON viewer. The core JSON viewer component is built as a re-usable library. You can embed it into your apps much like react-json-tree.

Some advantages of JSON Dive compared to other libraries are:

• Built for performance on large JSON documents; the entire tree viewer is virtualized.
• Multi-file format support. JSON Dive supports YAML, XML, and JavaScript object literals, in addition to JSON.
• A clean and minimal user interface with syntax highlighting that you may enjoy.
• Keyboard shortcuts for enhanced productivity (see Help > Keyboard Shortcuts in the main JSON Dive app or consult the defaultActions plugin to see all of these.)

JSON Dive is free for non-commercial use, but it requires a license for commercial use. See the license for more information, and contact bill@jsondive.app for information about licensing. Thank you for respecting the license so that JSON Dive can be developed sustainably!

Installation

npm install @jsondive/viewer

See the GitHub repository to view the source code for this package.

Setup and basic usage

Before using JSON Dive, you must import the necessary CSS. JSON Dive has a single CSS file that must be included, located at dist/root.css under the package directory.

How you include this CSS file may depend on your web framework and bundler.

In Vite, you can import the fully qualified path somewhere near the root of your application (i.e. main.tsx or App.tsx.)

import "@jsondive/viewer/dist/root.css"

In an SSR framework like Tanstack Start, you may need to use an explicit URL import to get a URL that you can then plug into any meta tags.

import VIEWER_CSS from "@jsondive/viewer/dist/root.css?url"

// Later, in your head tags config...
const headTags = [
	// Other head tags...
	{ rel: "stylesheet", href: VIEWER_CSS },
]

Now you can use JSON Dive. In its simplest invocation, it looks like this:

import { JSONDive } from "@jsondive/viewer"

function MyPage() {
	return (
		<div style={{ width: 400, height: 400 }}>
			<JSONDive data={{ hello: "world" }} />
		</div>
	)
}

The data argument can be any JSON object. You should see something like the following:

Basic usage of JSON dive.

TIP

JSON Dive automatically expands to fill the width and height of its parent container, which is why we surrounded it in a div with an explicit width and height.

If you can't see anything, make sure you're putting JSON Dive inside a container that has width and height.

Other ways to specify data

The data prop isn't the only way to pass data to JSON Dive. JSON Dive supports many more file formats than JSON.

The data prop is a convenient wrapper over a concept called DocumentInput which encapsulates some content and its MIME type.

The easiest way to construct a DocumentInput is via the DocumentInput.fromText constructor. This takes in a string and auto detects the content type (between e.g. JSON and XML) using heuristics.

Given a DocumentInput (make sure it is stable/memoized), you can pass it to JSON Dive using the input prop and omitting the data prop.

import { JSONDive, DocumentInput } from "@jsondive/viewer"

function MyPage() {
	const input = useMemo(() => DocumentInput.fromText(`{}`), [])
	return <JSONDive input={input} />
}