Add Virtualization Support for Large JSON Objects

Start at the JsonView component entry point and reproduce the 5,000-key example with the listed React and package versions while recording initial render and scrolling performance. Compare the proposed virtualization approaches, then define completion against the expected behavior: only visible nodes render, scrolling remains smooth, memory does not grow with object size, and initial rendering is fast.

Problem Description

When rendering large JSON objects (e.g., 1000+ keys or deeply nested structures), the component causes significant performance degradation, making the page laggy and unresponsive. All DOM nodes are rendered immediately, even those not visible in the viewport.

Current Behavior

• All JSON nodes are rendered to the DOM immediately
• Large objects (1000+ keys) cause noticeable UI lag
• Scrolling becomes janky with large datasets
• Memory usage increases linearly with object size
• Browser can become unresponsive during initial render

Expected Behavior

• Only visible nodes should be rendered (windowing/virtualization)
• Smooth scrolling regardless of JSON size
• Constant memory usage regardless of object size
• Fast initial render time

Minimal Reproduction

import JsonView from '@uiw/react-json-view';
import { useState, useEffect } from 'react';

function App() {
  const [largeObject, setLargeObject] = useState({});

  useEffect(() => {
    // Generate a large object with 5000 keys
    const obj: Record<string, any> = {};
    
    for (let i = 0; i < 5000; i++) {
      obj[`key_${i}`] = {
        id: i,
        name: `Item ${i}`,
        description: `Description for item ${i}`,
        metadata: {
          created: new Date().toISOString(),
          modified: new Date().toISOString(),
          tags: ['tag1', 'tag2', 'tag3'],
          nested: {
            level1: {
              level2: {
                level3: {
                  data: `Deep nested data ${i}`
                }
              }
            }
          }
        }
      };
    }
    
    setLargeObject(obj);
  }, []);

  return (
    <div style={{ height: '100vh', padding: '20px' }}>
      <h1>Large JSON Performance Test</h1>
      <p>Object size: {Object.keys(largeObject).length} keys</p>
      
      <div style={{ height: 'calc(100vh - 100px)', overflow: 'auto', border: '1px solid #ccc' }}>
        <JsonView
          value={largeObject}
          displayDataTypes={false}
          displayObjectSize={false}
          collapsed={1} // Collapse by default
        />
      </div>
    </div>
  );
}

export default App;

Steps to Reproduce

1. Create a new React app with @uiw/[email protected]
2. Use the above code example
3. Open browser DevTools Performance tab
4. Start recording and wait for component to render
5. Try scrolling through the JSON view

Proposed Solution

Implement virtualization using one of these approaches:

Option 1: React Window / React Virtual

Use a proven virtualization library to render only visible nodes:

import { FixedSizeList } from 'react-window';

// Pseudo-code example
<FixedSizeList
  height={600}
  itemCount={visibleNodes.length}
  itemSize={24}
  width="100%"
>
  {({ index, style }) => (
    <div style={style}>
      <JsonNode node={visibleNodes[index]} />
    </div>
  )}
</FixedSizeList>

Option 2: Custom Virtualization

Implement a custom windowing solution that:

1. Tracks scroll position
2. Calculates visible range of nodes
3. Renders only nodes within viewport + buffer
4. Maintains proper scroll height with padding elements

Benefits

• ✅ Handles objects with 10,000+ keys smoothly
• ✅ Constant memory usage regardless of JSON size
• ✅ 60 FPS scrolling performance
• ✅ Fast initial render (< 100ms)
• ✅ Better user experience for data-heavy applications

Environment

• Package version: @uiw/[email protected]
• React version: ^18.3.1
• Browser: Chrome 131, Firefox 133, Safari 18
• OS: macOS, Windows, Linux

Additional Context

Many similar libraries have implemented virtualization:

• react-json-tree - Uses react-virtualized
• jsoneditor - Custom virtualization
• Monaco Editor - Built-in virtualization for JSON mode

Workarounds Currently Used

1. Pagination: Breaking large objects into smaller chunks (poor UX)
2. Lazy loading on expand: Loading children only when expanded (complex state management)
3. Limiting display: Only showing first N items (data loss)
4. External viewers: Opening in separate tools (context switching)

None of these are ideal solutions compared to built-in virtualization.

---

Would love to see virtualization support in this library! Happy to contribute to implementation if you'd like to provide guidance on the preferred approach. 🚀