@dataset.sh/json-viewer

A lightweight, customizable React component library for rendering JSON data with collapsible nodes, syntax highlighting, and data type annotations.

Features

JSONViewer

• Syntax Highlighting: Different colors for strings, numbers, booleans, null values
• Collapsible Nodes: Expand/collapse objects and arrays
• Data Type Indicators: Optional display of data types
• Size Display: Shows count of items in objects and arrays
• Theme Support: Light and dark themes
• String Truncation: Long strings can be truncated at specified length
• Configurable Indentation: Customize indentation width

JSONList

• Dual Viewing Modes:
  • View All: Display entire list at once
  • Single: Navigate through items one at a time
• Navigation Controls:
  • Previous/Next buttons
  • Jump to specific item (1-indexed)
  • Current position indicator
• Inherits JSONViewer Features: All JSONViewer props are supported

Installation

npm install @dataset.sh/json-viewer

or with pnpm:

pnpm add @dataset.sh/json-viewer

Development

# Install dependencies
pnpm install

# Run development server with example
pnpm dev

# Build the library
pnpm run build:lib

# Run Storybook
pnpm storybook

# Type checking
pnpm typecheck

# Lint
pnpm lint

Usage

JSONViewer

import { JSONViewer } from '@dataset.sh/json-viewer';
import '@dataset.sh/json-viewer/style.css'; // Import styles

const data = {
  name: "John Doe",
  age: 30,
  active: true,
  roles: ["admin", "editor"]
};

<JSONViewer
  data={data}
  theme="light"
  collapsed={false}
  displayDataTypes={true}
  displayObjectSize={true}
/>

JSONList

import { JSONList } from '@dataset.sh/json-viewer';
import '@dataset.sh/json-viewer/style.css'; // Import styles

const users = [
  { id: 1, name: "Alice", role: "Admin" },
  { id: 2, name: "Bob", role: "User" },
  { id: 3, name: "Charlie", role: "Editor" }
];

<JSONList
  listData={users}
  defaultMode="single"
  theme="light"
  collapsed={false}
/>

Props

JSONViewer Props

| Prop | Type | Default | Description | |------|------|---------|-------------| | data | any | required | The JSON data to display | | collapsed | boolean \| number | false | Initial collapse state. Boolean for all nodes, number for depth level | | collapseStringsAfterLength | number | 100 | Truncate strings longer than this | | displayDataTypes | boolean | true | Show data type labels | | displayObjectSize | boolean | true | Show object/array item count | | indentWidth | number | 4 | Indentation width in pixels | | theme | 'light' \| 'dark' | 'light' | Color theme |

JSONList Props

| Prop | Type | Default | Description | |------|------|---------|-------------| | listData | T[] | required | Array of items to display | | defaultMode | 'all' \| 'single' | 'all' | Initial viewing mode | | ...rest | | | All JSONViewer props are also supported |

Examples

Collapse at specific depth

// Collapse all nodes at depth 2 and deeper
<JSONViewer data={complexData} collapsed={2} />

Dark theme

<JSONViewer data={data} theme="dark" />

Navigate large datasets

<JSONList 
  listData={largeArray}
  defaultMode="single"
  collapsed={1}
/>

Minimal display

<JSONViewer 
  data={data}
  displayDataTypes={false}
  displayObjectSize={false}
/>

Storybook

View interactive examples and documentation:

pnpm storybook

Then open http://localhost:6006

License

MIT