English | 中文

A beautiful, customizable JSON viewer component for React with dark/light theme support and intuitive tree navigation.

• 🎨 Light & dark theme support
• 🔍 Expandable / collapsible nodes
• 🌲 Tree view for nested objects and arrays
• 🎯 Type-specific syntax highlighting (String / Number / Boolean / Null)
• 📐 Configurable indent width & max expand depth
• 📱 Responsive design
• 🎨 Customizable via CSS variables
• 📦 Small bundle size
• 💪 Full TypeScript support

# npm
npm install react-json-viewer-pretty

# yarn
yarn add react-json-viewer-pretty

# pnpm
pnpm add react-json-viewer-pretty

Requires React 16.8 or later.

import { JsonViewer } from 'react-json-viewer-pretty';
import 'react-json-viewer-pretty/style.css';

const data = { name: "React JSON Viewer Pretty", version: "0.1.0" };

function App() {
  return <JsonViewer data={data} />;
}

import React, { useState } from 'react';
import { JsonViewer } from 'react-json-viewer-pretty';
import 'react-json-viewer-pretty/style.css';

const data = {
  string: "Hello, world!",
  number: 42,
  boolean: true,
  null: null,
  array: [1, 2, 3, "four", { five: 5 }],
  object: {
    a: 1,
    b: "two",
    c: {
      nested: "value",
      deeplyNested: {
        level1: {
          level2: {
            level3: "Deeply nested value"
          }
        }
      }
    }
  }
};

function App() {
  const [theme, setTheme] = useState('light');
  const [expanded, setExpanded] = useState(false);

  return (
    <div>
      <div style={{ marginBottom: 10 }}>
        <button onClick={() => setTheme(theme === 'light' ? 'dark' : 'light')}>
          Toggle {theme === 'light' ? 'Dark' : 'Light'} Mode
        </button>
        <button onClick={() => setExpanded(!expanded)}>
          {expanded ? 'Collapse' : 'Expand'} All
        </button>
      </div>

      <JsonViewer
        data={data}
        theme={theme}
        initialExpanded={expanded}
        maxDepth={3}
      />
    </div>
  );
}

Prop	Type	Default	Description
data	any	Required	The JSON data to display
theme	'light' | 'dark'	'light'	Color theme
initialExpanded	boolean	false	Whether to expand all nodes initially
maxDepth	number	Infinity	Maximum render depth; deeper levels are collapsed
indentWidth	number	16	Width of each indentation level (px)
className	string	''	Additional CSS class for the root element
style	React.CSSProperties	{}	Additional inline styles for the root element

Controls the expansion depth of the JSON tree. Levels beyond maxDepth are displayed collapsed — useful for large or deeply nested data.

<JsonViewer data={complexData} maxDepth={3} />

Customize the width of each indentation level in pixels.

// Wider indent
<JsonViewer data={data} indentWidth={24} />

// Narrower indent
<JsonViewer data={data} indentWidth={8} />

Customize the appearance by overriding CSS variables:

:root {
  /* Light theme */
  --json-viewer-light-background: #ffffff;
  --json-viewer-light-text: #333333;
  --json-viewer-light-string: #008000;
  --json-viewer-light-number: #0000ff;
  --json-viewer-light-boolean: #ff8c00;
  --json-viewer-light-null: #808080;
  --json-viewer-light-key: #a52a2a;
  --json-viewer-light-bracket: #333333;
  --json-viewer-light-border: #e0e0e0;

  /* Dark theme */
  --json-viewer-dark-background: #1e1e1e;
  --json-viewer-dark-text: #d4d4d4;
  --json-viewer-dark-string: #6a9955;
  --json-viewer-dark-number: #569cd6;
  --json-viewer-dark-boolean: #dcdcaa;
  --json-viewer-dark-null: #808080;
  --json-viewer-dark-key: #9cdcfe;
  --json-viewer-dark-bracket: #d4d4d4;
  --json-viewer-dark-border: #444444;
}

npm install       # Install dependencies
npm run dev       # Start dev server
npm run build     # Build the library
npm run test      # Run tests

Contributions are welcome! Please feel free to submit a Pull Request.

1. Fork the repository
2. Create your feature branch (git checkout -b feature/amazing-feature)
3. Commit your changes (git commit -m 'feat: add amazing feature')
4. Push to the branch (git push origin feature/amazing-feature)
5. Open a Pull Request

MIT © 2025 DongDong