JSON Viewer Plus

A sophisticated, high-performance React JSON Viewer component with advanced formatting, search, export, and accessibility features.

Features

🔍 Advanced Search - Search through JSON keys and values with regex support
📤 Export Options - Export to JSON, pretty JSON, and CSV formats
🎨 Theme Support - Light, dark, system, and custom theme support
♿ Accessible - Full keyboard navigation and screen reader support
⚡ High Performance - Optimized for large JSON datasets with virtualization
🎯 TypeScript - Full TypeScript support with comprehensive type definitions
🔧 Customizable - Custom formatters, renderers, and extensive configuration options

Installation

npm install json-viewer-plus
# or
yarn add json-viewer-plus
# or
pnpm add json-viewer-plus

Quick Start

import React from 'react';
import { JsonViewer } from 'json-viewer-plus';
// Import the CSS for styling
import 'json-viewer-plus/styles';

const data = {
  name: "John Doe",
  age: 30,
  hobbies: ["reading", "coding", "hiking"],
  address: {
    street: "123 Main St",
    city: "Anytown",
    zip: "12345"
  }
};

function App() {
  return (
    <div>
      <h1>My JSON Data</h1>
      <JsonViewer
        data={data}
        theme="light"
        searchable={true}
        exportable={true}
        expandDepth={2}
      />
    </div>
  );
}

export default App;

CSS Import Options

The component comes with pre-built CSS that needs to be imported:

// Option 1: Import via package alias (recommended)
import 'json-viewer-plus/styles';

// Option 2: Import the CSS file directly
import 'json-viewer-plus/dist/json-viewer.css';

// Option 3: In your HTML or CSS bundle tool
// Link to: node_modules/json-viewer-plus/dist/json-viewer.css

Props

| Prop | Type | Default | Description | |------|------|---------|-------------| | data | unknown | required | The JSON data to display | | theme | 'light' \| 'dark' \| 'system' \| CustomTheme | 'system' | Theme for the viewer | | searchable | boolean | true | Enable search functionality | | exportable | boolean | true | Enable export functionality | | expandDepth | number | 2 | Initial expansion depth | | formatters | FormatterConfig[] | [] | Custom value formatters | | onNodeClick | function | - | Callback when a node is clicked | | onExport | function | - | Callback when data is exported |

Advanced Usage

Custom Formatters

const formatters = [
  {
    path: /.*timestamp$/i,
    type: 'date',
    format: 'PPpp', // date-fns format
  },
  {
    path: 'user.email',
    type: 'custom',
    format: (value) => value.replace(/(.{3}).*(@.*)/, '$1***$2') // Mask email
  }
];

<JsonViewer data={data} formatters={formatters} />

Custom Theme

const customTheme = {
  background: '#1a1a1a',
  textColor: '#ffffff',
  keyColor: '#61dafb',
  stringColor: '#98d982',
  numberColor: '#f08d49',
  booleanColor: '#f92672',
  nullColor: '#75715e'
};

<JsonViewer data={data} theme={customTheme} />

Development

This package is built with:

• React 18+
• TypeScript
• Tailwind CSS 4
• Vite
• Vitest for testing
• Storybook for component development

See CLAUDE.md for detailed development documentation.

License

MIT

Contributing

Contributions are welcome! Please see our contribution guidelines.