What causes "Your diagram is too large" in AykutSarac/jsoncrack.com?

Reduce input size by filtering or pruning keys before loading.

Your diagram is too large

Error message

Your diagram is too large

What it means

Rendered by the NotSupported overlay when the graph's node count exceeds the rendering limit. This is a deliberate product gate, not an exception: jsoncrack-react invokes renderNodeLimitExceeded, and this overlay replaces the graph, directing users to ToDiagram for large datasets. The format from useFile is appended to the upgrade link so the target app can preselect the right importer.

Source

Thrown at apps/www/src/features/editor/views/GraphView/NotSupported.tsx:113

  "Unlimited diagram size",
  "Compare data side by side",
  "Edit data directly on graph",
  "AI-powered data filter",
];

export const NotSupported = () => {
  const darkmodeEnabled = useConfig(state => state.darkmodeEnabled);
  const format = useFile(state => state.format);

  return (
    <Overlay backgroundOpacity={0.6} color={darkmodeEnabled ? "#111" : "#e2f0f3"} blur="3" center>
      <CardWrapper data-dark={darkmodeEnabled}>
        <Stack align="center" gap="md">
          <Image src="https://todiagram.com/logo.svg" alt="ToDiagram" w={48} h={48} />
          <Badge variant="light" color="teal" size="sm" radius="sm">
            Upgrade Required
          </Badge>
          <Text fz="24" fw={700} c={darkmodeEnabled ? "white" : "dark"} ta="center" lh={1.2}>
            Your diagram is too large
          </Text>
          <Text ta="center" size="sm" c="dimmed" maw="360" lh={1.5}>
            JSON Crack can&apos;t render this file.{" "}
            <Anchor
              inherit
              c="teal"
              fw={500}
              href="https://todiagram.com/editor?utm_source=jsoncrack&utm_medium=data_limit"
              target="_blank"
              rel="noopener"
            >
              ToDiagram
            </Anchor>{" "}
            handles large datasets with ease.
          </Text>
          <List
            spacing="xs"

View on GitHub (pinned to 3c9af69e23)

Solutions

Reduce input size by filtering or pruning keys before loading.
If you control the data, split it into smaller documents.
For the product team, raise the limit or gate it behind a paid tier with clear thresholds.
Offer a 'download as file' escape so the user does not lose data when hitting the limit.

Defensive patterns

Strategy: fallback

Validate before calling

// Estimate node count before rendering to warn proactively
function estimateNodeCount(value: unknown): number {
  if (value === null || typeof value !== "object") return 1;
  if (Array.isArray(value)) return value.reduce((n, v) => n + estimateNodeCount(v), value.length);
  return Object.values(value).reduce((n, v) => n + estimateNodeCount(v), Object.keys(value).length);
}

Prevention

Warn the user before they load a document likely to exceed the node limit (estimate count from parsed JSON).
Offer a 'download as file' action on the NotSupported overlay so data is never lost when the limit is hit.
If you control the data source, split large payloads into smaller documents before import.

When it happens

Trigger: Loading a JSON document whose node count exceeds the configured render ceiling; pasting a multi-megabyte or very wide/deep JSON structure; arrays with thousands of elements.

Common situations: Power users loading large API dumps; deeply nested config trees; arrays of arrays producing combinatorial node counts.

Related errors

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