JSON Diff Viewer

[{"_1":2,"_3":-5,"_4":-5},"loaderData",{"_5":6,"_7":8,"_9":10},"actionData","errors","root",{"_204":205,"_206":207},"routes/_app.x.$handle.$name",{"_118":117,"_34":64,"_127":105,"_29":128,"_13":14,"_129":-5,"_11":130,"_131":132,"_133":134,"_135":136,"_137":138,"_23":-5,"_139":140,"_141":142,"_143":27,"_144":145,"_146":77,"_147":-5,"_148":-5,"_149":150},"routes/_app.x.$handle.$name.branch.$branch.version.$version.diff",{"_11":12,"_13":14,"_15":16,"_17":-5,"_18":-5},"project",{"_62":63,"_34":64,"_39":65,"_66":-5,"_67":27,"_68":69,"_70":69,"_71":72,"_73":-5,"_18":74,"_75":33,"_76":77,"_78":-5,"_79":-5,"_80":81,"_82":83,"_84":-5,"_85":-5,"_86":-5,"_87":-5,"_88":89,"_90":89,"_91":92,"_93":92,"_94":92,"_95":89,"_96":89,"_97":98,"_99":100,"_101":102,"_103":27},"version",1,"changes",[19,20,21,22],"aiChatInfo","userId",{"_23":56,"_25":-7,"_26":27,"_28":27,"_29":57,"_31":57},{"_23":49,"_25":-7,"_26":27,"_28":27,"_29":50,"_31":50},{"_23":44,"_25":-7,"_26":27,"_28":27,"_29":45,"_31":45},{"_23":24,"_25":-7,"_26":27,"_28":27,"_29":30,"_31":30},"file",{"_32":33,"_34":30,"_35":36,"_37":38,"_39":40,"_41":14,"_42":43,"_26":27},"previous","deleted",false,"deletedHere","path","main.ts","latestPath","fileId","019e8942-3623-7599-a71f-b7f57c797680","name","fileType","http","content","import { Hono } from \"npm:hono\";\nimport { html } from \"./views/index.ts\";\nimport { appJs } from \"./views/app.ts\";\n\nconst app = new Hono();\n\napp.get(\"/\", (c) => c.html(html));\n\napp.get(\"/app.js\", (c) => {\n return new Response(appJs, {\n headers: { \"Content-Type\": \"application/javascript\" },\n });\n});\n\nexport default app.fetch;\n","createdAt",["D",1780419278320],"branchVersion","branchId","bde285d0-5ea3-11f1-a0cc-1607ee4eb77e",{"_32":46,"_34":45,"_35":47,"_37":-5,"_39":48,"_41":14,"_42":43,"_26":27},"views","019e8942-3623-7599-a71f-b2e54bd1f897","directory",["D",1780419278320],{"_32":51,"_34":52,"_35":53,"_37":54,"_39":55,"_41":14,"_42":43,"_26":27},"views/index.ts","019e8942-3623-7599-a71f-ae0ebb9e2297","index.ts","script","export const html = `\n\n\n \n \n JSON Diff Viewer\n \n\n\n

\n \n\n`;\n",["D",1780419278320],{"_32":58,"_34":59,"_35":53,"_37":60,"_39":61,"_41":14,"_42":43,"_26":27},"views/app.ts","019e8942-3623-7599-a71f-aa900f5c5f77","app.ts","export const appJs = `\nimport React, { useState, useCallback, useEffect } from 'https://esm.sh/react@18';\nimport { createRoot } from 'https://esm.sh/react-dom@18/client';\nimport * as Diff from 'https://esm.sh/diff@5.2.0';\n\nconst h = React.createElement;\n\nconst defaultLeft = JSON.stringify({\n name: \"my-package\",\n version: \"1.0.0\",\n dependencies: {\n lodash: \"^4.17.21\"\n }\n}, null, 2);\n\nconst defaultRight = JSON.stringify({\n name: \"my-package\",\n version: \"1.1.0\",\n dependencies: {\n lodash: \"^4.17.21\",\n axios: \"^1.6.0\"\n },\n devDependencies: {\n typescript: \"^5.0.0\"\n }\n}, null, 2);\n\nfunction InputPanel({ label, value, onChange, onPaste }) {\n return h('div', { className: 'panel' },\n h('label', null, label),\n h('textarea', {\n value,\n onChange: (e) => onChange(e.target.value),\n onPaste,\n placeholder: 'Paste JSON here...',\n spellCheck: false,\n })\n );\n}\n\nfunction SplitDiffView({ left, right }) {\n const diff = Diff.diffLines(left, right);\n \n let leftLineNum = 1;\n let rightLineNum = 1;\n\n return h('div', { className: 'diff-split' },\n h('div', { className: 'diff-pane' },\n h('div', { className: 'diff-header' }, 'before.json'),\n h('div', { className: 'diff-content' },\n diff.map((part, i) => {\n if (part.added) return null;\n \n const lines = part.value.split('\\\\n').filter((_, idx, arr) => \n idx < arr.length - 1 || arr[idx] !== ''\n );\n \n return lines.map((line, j) => {\n const lineNum = leftLineNum++;\n const isRemoved = part.removed;\n return h('div', { \n key: i + '-' + j,\n className: 'diff-line' + (isRemoved ? ' removed' : ''),\n },\n h('span', { className: 'line-num' }, lineNum),\n h('span', { className: 'line-indicator' }, isRemoved ? '−' : ' '),\n h('span', { className: 'line-content' }, line || ' ')\n );\n });\n })\n )\n ),\n h('div', { className: 'diff-pane' },\n h('div', { className: 'diff-header' }, 'after.json'),\n h('div', { className: 'diff-content' },\n diff.map((part, i) => {\n if (part.removed) return null;\n \n const lines = part.value.split('\\\\n').filter((_, idx, arr) => \n idx < arr.length - 1 || arr[idx] !== ''\n );\n \n return lines.map((line, j) => {\n const lineNum = rightLineNum++;\n const isAdded = part.added;\n return h('div', { \n key: i + '-' + j,\n className: 'diff-line' + (isAdded ? ' added' : ''),\n },\n h('span', { className: 'line-num' }, lineNum),\n h('span', { className: 'line-indicator' }, isAdded ? '+' : ' '),\n h('span', { className: 'line-content' }, line || ' ')\n );\n });\n })\n )\n )\n );\n}\n\nfunction UnifiedDiffView({ left, right }) {\n const diff = Diff.diffLines(left, right);\n \n let oldLineNum = 1;\n let newLineNum = 1;\n\n const lines = [];\n \n diff.forEach((part, i) => {\n const partLines = part.value.split('\\\\n').filter((_, idx, arr) => \n idx < arr.length - 1 || arr[idx] !== ''\n );\n \n partLines.forEach((line, j) => {\n if (part.removed) {\n lines.push({\n key: i + '-' + j,\n type: 'removed',\n oldNum: oldLineNum++,\n newNum: null,\n content: line\n });\n } else if (part.added) {\n lines.push({\n key: i + '-' + j,\n type: 'added',\n oldNum: null,\n newNum: newLineNum++,\n content: line\n });\n } else {\n lines.push({\n key: i + '-' + j,\n type: 'unchanged',\n oldNum: oldLineNum++,\n newNum: newLineNum++,\n content: line\n });\n }\n });\n });\n\n return h('div', { className: 'diff-unified' },\n h('div', { className: 'diff-header' }, 'before.json → after.json'),\n h('div', { className: 'diff-content' },\n lines.map(line => \n h('div', { \n key: line.key,\n className: 'diff-line ' + line.type,\n },\n h('span', { className: 'line-num old' }, line.oldNum || ''),\n h('span', { className: 'line-num new' }, line.newNum || ''),\n h('span', { className: 'line-indicator' }, \n line.type === 'added' ? '+' : line.type === 'removed' ? '−' : ' '\n ),\n h('span', { className: 'line-content' }, line.content || ' ')\n )\n )\n )\n );\n}\n\nfunction DiffView({ left, right, isMobile }) {\n if (isMobile) {\n return h(UnifiedDiffView, { left, right });\n }\n return h(SplitDiffView, { left, right });\n}\n\nfunction App() {\n const [left, setLeft] = useState(defaultLeft);\n const [right, setRight] = useState(defaultRight);\n const [error, setError] = useState(null);\n const [diffKey, setDiffKey] = useState(0);\n const [isMobile, setIsMobile] = useState(window.innerWidth < 768);\n\n useEffect(() => {\n const handleResize = () => setIsMobile(window.innerWidth < 768);\n window.addEventListener('resize', handleResize);\n return () => window.removeEventListener('resize', handleResize);\n }, []);\n\n const formatJson = useCallback((setter, value) => {\n try {\n const parsed = JSON.parse(value);\n setter(JSON.stringify(parsed, null, 2));\n setError(null);\n } catch (e) {\n setError('Invalid JSON: ' + e.message);\n }\n }, []);\n\n const handlePaste = useCallback((setter) => (e) => {\n const pasted = e.clipboardData.getData('text');\n try {\n const parsed = JSON.parse(pasted);\n e.preventDefault();\n setter(JSON.stringify(parsed, null, 2));\n setError(null);\n } catch (err) {\n // Not valid JSON, let default paste happen\n }\n }, []);\n\n const runDiff = useCallback(() => {\n setError(null);\n try {\n JSON.parse(left);\n JSON.parse(right);\n setDiffKey(k => k + 1);\n } catch (e) {\n setError('Invalid JSON: ' + e.message);\n }\n }, [left, right]);\n\n return h('div', null,\n h('header', { className: 'header' },\n h('h1', { className: 'title' }, 'JSON Diff Viewer'),\n h('p', { className: 'subtitle' }, 'Compare and format JSON objects')\n ),\n\n h('div', { className: 'inputs' },\n h(InputPanel, {\n label: 'Before',\n value: left,\n onChange: setLeft,\n onPaste: handlePaste(setLeft),\n }),\n h(InputPanel, {\n label: 'After',\n value: right,\n onChange: setRight,\n onPaste: handlePaste(setRight),\n })\n ),\n\n h('div', { className: 'actions' },\n h('button', { className: 'primary', onClick: runDiff }, 'Compare')\n ),\n\n error && h('div', { className: 'error' }, error),\n\n h('div', { className: 'diff-container' },\n h(DiffView, { key: diffKey, left, right, isMobile })\n )\n );\n}\n\ncreateRoot(document.getElementById('root')).render(h(App));\n`;\n",["D",1780419278320],"id","bdddd95e-5ea3-11f1-a0cc-1607ee4eb77e","jsonlViewer",["D",1780419278320],"deletedAt","legacyEnvVars","privacy","public","httpPrivacy","description","JSONL viewer with collapsible, syntax-highlighted JSON","imageUrl","3ee322c5-8742-48e0-86c7-5f3ae129683b","pinnedFileId","pinPreview",true,"pinMigrated","screenshotVersion","likeCount",0,"orgId","f427167a-3263-4778-81d8-f79626323ff5","tursoName","tursoHostname","tursoMeasuredAt","pinned","userPerm","r","valPerm","blobPerm","rw","emailPerm","sqlitePerm","projectPerm","telemetryPerm","user",{"_118":117,"_126":122},"org",{"_118":117,"_119":120,"_121":122,"_18":74,"_123":124,"_125":27},"branch",{"_13":104,"_34":105,"_62":43,"_106":63,"_107":108,"_109":110,"_111":69,"_112":113,"_114":83,"_115":64,"_116":117},"isOwned",6,"main","projectId","forkedBranchId","f1a855c4-ee6f-11f0-b97d-42dde27851f2","forkedBranchVersion",18,"forkedProjectPrivacy","forkedProjectId","f1a8187a-ee6f-11f0-b97d-42dde27851f2","forkedProjectOrgId","projectName","userHandle","kamalnrf","handle","displayName","Kamal","avatar","https://img.clerk.com/eyJ0eXBlIjoicHJveHkiLCJzcmMiOiJodHRwczovL2ltYWdlcy5jbGVyay5kZXYvb2F1dGhfZ2l0aHViL2ltZ18yaVpXT3l1d2hWSFdtWTNoZFIwZ0lFUUhOd2oifQ","tier","pro","canRestrictVals","profileImageUrl","branchName","","adoptOrgId",{"_62":63,"_34":64,"_39":200,"_66":-5,"_67":27,"_68":69,"_70":69,"_71":72,"_73":-5,"_18":74,"_75":33,"_76":77,"_78":-5,"_79":-5,"_80":81,"_82":83,"_84":-5,"_85":-5,"_86":-5,"_87":-5,"_88":89,"_90":89,"_91":92,"_93":92,"_94":92,"_95":89,"_96":89,"_97":201,"_99":202,"_101":203,"_103":27},"tree",[181,184],"files",[181,182,183,184],"counts",{"_171":81,"_172":14,"_173":81,"_174":175,"_176":177},"contents",[159,160],"upstreamProject",{"_62":113,"_34":156,"_71":157,"_73":-5,"_68":69,"_97":158},"upstreamBranch",{"_62":108,"_39":151,"_152":153,"_34":105,"_106":113,"_13":110,"_107":-5,"_109":-5,"_154":155,"_66":-5,"_103":27,"_68":69,"_116":117,"_82":83,"_115":156},"emptyEnvVars","flags",[],"hasHttpFiles","grants","orgs","customDomains",{},["D",1768082501157],"updatedAt",["D",1768160852627],"lockfileKey","1768162201132-esm.town_v_kamalnrf_jsonDiffViewer@18-main","jsonDiffViewer","JSON diff viewer with @pierre/diffs",{"_118":117,"_126":122},{"_62":168,"_34":45,"_32":46,"_162":-5,"_42":43,"_41":14,"_163":77,"_39":169,"_13":81,"_35":47,"_37":-5,"_26":27,"_165":-5,"_29":170},{"_62":161,"_34":30,"_32":33,"_162":-5,"_42":43,"_41":14,"_163":77,"_39":164,"_13":81,"_35":36,"_37":38,"_26":27,"_165":166,"_29":167},"bde70646-5ea3-11f1-a0cc-1607ee4eb77e","parentId","latest",["D",1780419278320],"label","jsonl-viewer",[30],"bde6faa2-5ea3-11f1-a0cc-1607ee4eb77e",["D",1780419278320],[45],"pulls","branches","forks","envVars",{"_178":81,"_180":81},"connections",{"_178":81,"_179":81},"count","unfilledCount","emptyCount",{"_62":168,"_34":45,"_32":46,"_162":-5,"_42":43,"_41":14,"_163":77,"_39":197,"_13":81,"_35":47,"_37":-5,"_26":27,"_165":-5,"_186":198,"_29":199},{"_62":193,"_34":59,"_32":58,"_162":46,"_42":43,"_41":14,"_163":27,"_39":194,"_13":81,"_35":53,"_37":60,"_26":27,"_165":-5,"_186":195,"_29":196},{"_62":189,"_34":52,"_32":51,"_162":46,"_42":43,"_41":14,"_163":27,"_39":190,"_13":81,"_35":53,"_37":54,"_26":27,"_165":-5,"_186":191,"_29":192},{"_62":161,"_34":30,"_32":33,"_162":-5,"_42":43,"_41":14,"_163":77,"_39":185,"_13":81,"_35":36,"_37":38,"_26":27,"_165":166,"_186":187,"_29":188},["D",1780419278320],"children",[],[30],"bde6db58-5ea3-11f1-a0cc-1607ee4eb77e",["D",1780419278320],[],[45,52],"bde6a3f4-5ea3-11f1-a0cc-1607ee4eb77e",["D",1780419278320],[],[45,59],["D",1780419278320],[182,183],[45],["D",1780419278320],{"_118":117,"_126":122},{"_118":117,"_119":120,"_121":122,"_18":74,"_123":124,"_125":27},{"_13":104,"_34":105,"_62":43,"_106":63,"_107":108,"_109":110,"_111":69,"_112":113,"_114":83,"_115":64,"_116":117},"ctx",{"_97":-5,"_148":237,"_238":239,"_240":241,"_242":27,"_243":27,"_244":27,"_245":77,"_246":-5,"_247":-7,"_248":-7,"_249":81,"_250":27,"_251":27,"_252":-5,"_253":27,"_254":27,"_255":27,"_256":-5},"ENV",{"_208":209,"_210":211,"_212":105,"_213":214,"_215":216,"_217":218,"_219":220,"_221":222,"_223":224,"_225":226,"_227":228,"_229":230,"_231":232,"_233":234,"_235":236},"REACT_APP_SENTRY_DSN","https://586020d86f05489db63a554690acf1e9@o1398359.ingest.sentry.io/6724499","RENDER_GIT_COMMIT","811aa22498c9b0b5a47e8d778de579cdb990f332","RENDER_GIT_BRANCH","POSTHOG_API_TOKEN","phc_nmoyuAkStEZuUp69rYlg1DZgrIt19Gx0Y4Hwf8tGgJP","POSTHOG_API_HOST","https://wart.val.town","WEB_API_TEMPLATE","https://{val}.web.val.run","APP_URL","https://www.val.town","MODULE_URL","https://esm.town","VANITY_WEB_API_TEMPLATE","https://{label}.val.run/","DENOLS_URL","https://lsp.val.town","NODE_ENV","production","CLOUDFLARE_TURNSTILE_SITE_KEY","0x4AAAAAACtaIZJH7s9rBMZ6","GOOGLE_CLIENT_ID","875989696899-jtsqkhlbdv5jrlsk8631p7ipjg3c6o62.apps.googleusercontent.com","STRIPE_PUBLISHABLE_KEY","pk_live_51N2zvWEpZTTLipIkVEwXrUG9AT0yeOOEYxszarZT1jpsZV58Ly6wlg3SltZpHN26CUalOBmUSY7adQRQiSkCZz2500qSXNkf8Y","API_URL","https://api.val.town",[],"preferencesKeybindings","default","preferencesTheme","light","preferencesFixers","preferencesCopilot","preferencesSelectionAi","preferencesCloseBrackets","preferencesChatPanelState","preferencesDprint","preferencesDenofmt","notificationCount","flagDenols","isBusinessOrgMember","businessOrgHandle","isBusinessOrgAdmin","isHigherTownieTier","navCollapsed","currentOrgId"]

Diff · v1