{"record":{"id":"7c2d62176a80a737","repo":"AykutSarac/jsoncrack.com","slug":"your-diagram-is-too-large","errorCode":null,"errorMessage":"Your diagram is too large","messagePattern":"Your diagram is too large","errorType":"validation","errorClass":null,"httpStatus":null,"severity":"warning","filePath":"apps/www/src/features/editor/views/GraphView/NotSupported.tsx","lineNumber":113,"sourceCode":"  \"Unlimited diagram size\",\n  \"Compare data side by side\",\n  \"Edit data directly on graph\",\n  \"AI-powered data filter\",\n];\n\nexport const NotSupported = () => {\n  const darkmodeEnabled = useConfig(state => state.darkmodeEnabled);\n  const format = useFile(state => state.format);\n\n  return (\n    <Overlay backgroundOpacity={0.6} color={darkmodeEnabled ? \"#111\" : \"#e2f0f3\"} blur=\"3\" center>\n      <CardWrapper data-dark={darkmodeEnabled}>\n        <Stack align=\"center\" gap=\"md\">\n          <Image src=\"https://todiagram.com/logo.svg\" alt=\"ToDiagram\" w={48} h={48} />\n          <Badge variant=\"light\" color=\"teal\" size=\"sm\" radius=\"sm\">\n            Upgrade Required\n          </Badge>\n          <Text fz=\"24\" fw={700} c={darkmodeEnabled ? \"white\" : \"dark\"} ta=\"center\" lh={1.2}>\n            Your diagram is too large\n          </Text>\n          <Text ta=\"center\" size=\"sm\" c=\"dimmed\" maw=\"360\" lh={1.5}>\n            JSON Crack can&apos;t render this file.{\" \"}\n            <Anchor\n              inherit\n              c=\"teal\"\n              fw={500}\n              href=\"https://todiagram.com/editor?utm_source=jsoncrack&utm_medium=data_limit\"\n              target=\"_blank\"\n              rel=\"noopener\"\n            >\n              ToDiagram\n            </Anchor>{\" \"}\n            handles large datasets with ease.\n          </Text>\n          <List\n            spacing=\"xs\"","sourceCodeStart":95,"sourceCodeEnd":131,"githubUrl":"https://github.com/AykutSarac/jsoncrack.com/blob/3c9af69e23c635356293b6b28cf4cd0af10d1059/apps/www/src/features/editor/views/GraphView/NotSupported.tsx#L95-L131","documentation":"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.","triggerScenarios":"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.","commonSituations":"Power users loading large API dumps; deeply nested config trees; arrays of arrays producing combinatorial node counts.","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."],"exampleFix":null,"handlingStrategy":"fallback","validationCode":"// Estimate node count before rendering to warn proactively\nfunction estimateNodeCount(value: unknown): number {\n  if (value === null || typeof value !== \"object\") return 1;\n  if (Array.isArray(value)) return value.reduce((n, v) => n + estimateNodeCount(v), value.length);\n  return Object.values(value).reduce((n, v) => n + estimateNodeCount(v), Object.keys(value).length);\n}","typeGuard":null,"tryCatchPattern":null,"preventionTips":["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."],"tags":["render-limit","upsell","graph","ui-text"],"backgroundTag":null,"analyzedSha":"3c9af69e23c635356293b6b28cf4cd0af10d1059","analyzedAt":"2026-08-12T19:00:27.891Z","schemaVersion":2},"datasetVersion":"2026-08-12T23:17:12.415Z"}