@sbourouis/react-json-viewer

A lightweight, interactive JSON viewer component for React with syntax highlighting and collapsible nodes.

Features

• 🎨 Syntax Highlighting - Different colors for strings, numbers, booleans, null values, and dates
• 🔄 Collapsible Nodes - Click to expand/collapse objects and arrays
• 🌙 Dark Mode Support - Built-in dark mode styling
• 📱 Responsive - Works on all screen sizes
• ⚡ Lightweight - Minimal dependencies
• 🎯 TypeScript - Full TypeScript support

Installation

npm install @sbourouis/react-json-viewer
# or
yarn add @sbourouis/react-json-viewer
# or
pnpm add @sbourouis/react-json-viewer

Usage

import { JsonViewer } from '@sbourouis/react-json-viewer';

const data = {
  name: "John Doe",
  age: 30,
  isActive: true,
  address: {
    street: "123 Main St",
    city: "New York",
    zipCode: "10001"
  },
  hobbies: ["reading", "swimming", "coding"],
  lastLogin: "2024-01-15T10:30:00Z",
  metadata: null
};

function App() {
  return (
    <div className="p-4">
      <JsonViewer value={data} />
    </div>
  );
}

Props

| Prop | Type | Default | Description | |------|------|---------|-------------| | value | Record<string, unknown> | - | The JSON object to display | | className | string | - | Additional CSS classes to apply | | styles | Record<string, string> | Tailwind classes to use for each item type |

Styling

This component uses Tailwind CSS classes. Make sure you have Tailwind CSS installed and configured in your project.

The component supports both light and dark modes automatically based on your Tailwind CSS dark mode configuration.

Color Scheme

• Strings: Red (text-red-500)
• Numbers: Lime (text-lime-600)
• Booleans: Orange (text-orange-500)
• Null values: Gray (text-neutral-500)
• Dates: Blue (text-blue-500)
• Syntax elements: Neutral (text-neutral-500)

Requirements

• React 16.8+
• Tailwind CSS (for styling)

License

MIT