AykutSarac/jsoncrack.com · warning

This graph has ${totalNodes} nodes and exceeds the maxRender

Error message

This graph has ${totalNodes} nodes and exceeds the maxRenderableNodes limit (${maxRenderableNodes}).

What it means

Not a thrown error — it is the inline UI string rendered in the tooLarge overlay when the parsed graph's node count exceeds the maxRenderableNodes prop (default 1500). parseJsonGraph returns { kind:"above-limit", total }, which sets aboveSupportedLimit=true and totalNodes, hiding the canvas and showing this message (or a caller-supplied renderNodeLimitExceeded renderer). It is a capacity gate to keep ELK layout and reaflow rendering performant.

Source

Thrown at packages/jsoncrack-react/src/JSONCrackComponent.tsx:585

        aria-label="JSON data visualization"
        onContextMenu={event => event.preventDefault()}
        {...bindLongPress()}
      >
        {showControls && (
          <Controls
            onFocusRoot={viewPortApi.focusFirstNode}
            onCenterView={viewPortApi.centerView}
            onZoomOut={viewPortApi.zoomOut}
            onZoomIn={viewPortApi.zoomIn}
          />
        )}

        {aboveSupportedLimit &&
          (tooLargeContent ? (
            tooLargeContent
          ) : (
            <div className={styles.tooLarge}>
              {`This graph has ${totalNodes} nodes and exceeds the maxRenderableNodes limit (${maxRenderableNodes}).`}
            </div>
          ))}

        {loading && (
          <div className={styles.overlay}>
            <div className={styles.spinner} />
          </div>
        )}

        <Space
          onCreate={nextViewPort => {
            setViewPort(nextViewPort);
            onViewportCreateRef.current?.(nextViewPort);
          }}
          onContextMenu={event => event.preventDefault()}
          treatTwoFingerTrackPadGesturesLikeTouch={trackpadZoom}
          className="jsoncrack-space"
          style={{

View on GitHub (pinned to 3c9af69e23)

Solutions

1. Raise the maxRenderableNodes prop on JSONCrack (be mindful of ELK layout time and DOM weight).
2. Reduce the input size before passing it (filter/summarize the JSON).
3. Provide a renderNodeLimitExceeded renderer to give users actionable guidance instead of the default string.
4. If raising the limit, verify performance on the target hardware — reaflow renders one DOM node per graph node.

Example fix

// before
<JSONCrack json={bigJson} />

// after — raise the cap and supply a custom overlay
<JSONCrack
  json={bigJson}
  maxRenderableNodes={5000}
  renderNodeLimitExceeded={(total, max) => (
    <p>{total} nodes (limit {max}). Refine the query to render.</p>
  )}
/>

// Count nodes cheaply before rendering to stay under the cap
import { parseGraph } from "jsoncrack-react/parser";
export function nodeCountOf(text: string): number {
  try { return parseGraph(text).nodes.length; } catch { return Infinity; }
}

// Detect the above-limit parse branch
export function isAboveLimit(r: { kind: string; total?: number }): r is { kind: "above-limit"; total: number } {
  return r.kind === "above-limit";
}

// Not a thrown error — gate rendering on the limit
const result = parseJsonGraph(text, maxRenderableNodes);
if (result.kind === "above-limit") {
  // show your own UX instead of the default overlay
  return <TooLarge total={result.total} max={maxRenderableNodes} />;
}

When it happens

Trigger: Supplying JSON whose flattened node count (every object/array/value becomes a node in parser.ts) is greater than maxRenderableNodes. E.g. a large array of objects with many keys, or deeply nested structures. Triggered deterministically by parseJsonGraph returning kind:"above-limit" at canvasHelpers.ts:80-82.

Common situations: Loading a multi-megabyte API dump; rendering a database export; default 1500 limit hit by moderately large real-world payloads; forgetting to raise the limit for a known-large dataset.

Related errors

• Failed to parse data (${syntaxErrorCount} syntax error(s)).
• Unable to parse data.
• Invalid JSON!

AI-assisted analysis of AykutSarac/jsoncrack.com@3c9af69e23 (2026-08-12). Data as JSON: /api/errors/551f3bfad89d187e. Report an issue: GitHub.