JSON Schema Viewer

[{"_1":2,"_3":-5,"_4":-5},"loaderData",{"_5":6,"_7":8,"_9":10},"actionData","errors","root",{"_195":196,"_197":198},"routes/_app.x.$handle.$name",{"_95":94,"_32":45,"_103":85,"_27":104,"_13":14,"_105":-5,"_11":106,"_107":108,"_109":110,"_111":112,"_113":114,"_20":-5,"_115":-5,"_116":-5,"_117":26,"_118":119,"_120":24,"_121":-5,"_122":-5,"_123":124},"routes/_app.x.$handle.$name.branch.$branch.version.$version.diff",{"_11":12,"_13":14,"_15":16,"_17":-5,"_18":-5},"project",{"_43":44,"_32":45,"_38":46,"_47":-5,"_48":26,"_49":50,"_51":50,"_52":-5,"_53":-5,"_18":54,"_55":56,"_57":24,"_58":24,"_59":-5,"_60":61,"_62":63,"_64":-5,"_65":-5,"_66":-5,"_67":-5,"_68":69,"_70":69,"_71":72,"_73":72,"_74":72,"_75":69,"_76":69,"_77":78,"_79":80,"_81":82,"_83":26},"version",11,"changes",[19],"aiChatInfo","userId",{"_20":21,"_22":-7,"_23":24,"_25":26,"_27":28,"_29":28},"file",{"_30":31,"_32":33,"_34":35,"_36":37,"_38":39,"_40":14,"_41":42,"_23":26},"previous","deleted",true,"deletedHere",false,"path","frontend/app.js","latestPath","fileId","d738fba6-3418-11f0-8051-9e149126039e","name","app.js","fileType","script","content","// Import React and ReactDOM\nimport React from 'https://esm.sh/react@18.2.0';\nimport { createRoot } from 'https://esm.sh/react-dom@18.2.0/client';\n\n// Import the JSON Schema Viewer\nimport { JsonSchemaViewer } from 'https://esm.sh/@stoplight/json-schema-viewer@4.16.4?deps=react@18.2.0,react-dom@18.2.0';\n\n// Get the schema data from the window\nconst data = window.__INITIAL_DATA__ || { schema: null, schemaUrl: '' };\n\n// Create the App component\nconst App = () => {\n if (data.schema?.error) {\n return React.createElement('div', { className: 'error' },\n React.createElement('h2', null, 'Error Loading Schema'),\n React.createElement('p', null, data.schema.error)\n );\n }\n\n if (!data.schema) {\n return React.createElement('div', { className: 'error' },\n React.createElement('p', null, 'No schema URL provided. Use ?url=https://example.com/schema.json')\n );\n }\n\n // Use the JsonSchemaViewer component\n return React.createElement(JsonSchemaViewer, {\n schema: data.schema,\n expanded: true,\n defaultExpandedDepth: 2\n });\n};\n\n// Render the App\nconst rootElement = document.getElementById('root');\nconst root = createRoot(rootElement);\nroot.render(React.createElement(App));","createdAt",["D",1747594174315],"branchVersion","branchId","0368fc54-3418-11f0-83d4-9e149126039e","id","03689be2-3418-11f0-83d4-9e149126039e","JsonSchemaViewer",["D",1747593818950],"deletedAt","legacyEnvVars","privacy","public","httpPrivacy","description","imageUrl","4555dd0e-707e-4444-acd3-049d206eb1db","pinnedFileId","6a5bfa8c-3419-11f0-9fb0-9e149126039e","pinPreview","pinMigrated","screenshotVersion","likeCount",0,"orgId","bced381e-9ab2-4b55-929d-e7c5064f7f38","tursoName","tursoHostname","tursoMeasuredAt","pinned","userPerm","r","valPerm","blobPerm","rw","emailPerm","sqlitePerm","projectPerm","telemetryPerm","user",{"_95":94,"_102":98},"org",{"_95":94,"_96":-5,"_97":98,"_18":54,"_99":100,"_101":26},"branch",{"_13":84,"_32":85,"_43":42,"_86":44,"_87":-5,"_88":-5,"_89":-5,"_90":-5,"_91":-5,"_92":45,"_93":94},"isOwned",33,"main","projectId","forkedBranchId","forkedBranchVersion","forkedProjectPrivacy","forkedProjectId","forkedProjectOrgId","projectName","userHandle","wolf","handle","displayName","avatar","https://img.clerk.com/eyJ0eXBlIjoicHJveHkiLCJzcmMiOiJodHRwczovL2ltYWdlcy5jbGVyay5kZXYvdXBsb2FkZWQvaW1nXzJvVXpPVUZRTjZGTGd2Q2t4c0RRdFpNZWJ5UCJ9","tier","pro","canRestrictVals","profileImageUrl","branchName","","adoptOrgId",{"_43":44,"_32":45,"_38":191,"_47":-5,"_48":26,"_49":50,"_51":50,"_52":-5,"_53":-5,"_18":54,"_55":56,"_57":24,"_58":24,"_59":-5,"_60":61,"_62":63,"_64":-5,"_65":-5,"_66":-5,"_67":-5,"_68":69,"_70":69,"_71":72,"_73":72,"_74":72,"_75":69,"_76":69,"_77":192,"_79":193,"_81":194,"_83":26},"tree",[164,167,168],"files",[164,165,166,167,168],"counts",{"_154":61,"_155":135,"_156":61,"_157":158,"_159":160},"contents",[125,126,127],"upstreamProject","upstreamBranch","emptyEnvVars","flags",[],"hasHttpFiles","grants","orgs","customDomains",{},{"_43":148,"_32":149,"_30":150,"_131":-5,"_41":42,"_40":145,"_133":24,"_38":151,"_13":61,"_34":152,"_36":-5,"_23":26,"_138":-5,"_27":153},{"_43":140,"_32":141,"_30":142,"_131":-5,"_41":42,"_40":143,"_133":26,"_38":144,"_13":145,"_34":20,"_36":146,"_23":26,"_138":-5,"_27":147},{"_43":128,"_32":129,"_30":130,"_131":-5,"_41":42,"_40":132,"_133":26,"_38":134,"_13":135,"_34":136,"_36":137,"_23":26,"_138":-5,"_27":139},"2fb40ccc-3418-11f0-abcd-9e149126039e","index.ts","1dc1aab0-3418-11f0-9d56-9e149126039e","parentId",4,"latest",["D",1747593893262],1,"http","import { readFile } from \"https://esm.town/v/std/utils/index.ts\";\n\nexport default async function(req: Request) {\n const url = new URL(req.url);\n const schemaUrl = url.searchParams.get('url');\n \n // Read the HTML template\n let html = await readFile(\"/frontend/index.html\", import.meta.url);\n \n // If a schema URL is provided, fetch the schema\n let schema = null;\n if (schemaUrl) {\n try {\n const response = await fetch(schemaUrl);\n if (!response.ok) {\n throw new Error(`Failed to fetch schema: ${response.status} ${response.statusText}`);\n }\n schema = await response.json();\n } catch (error) {\n console.error(\"Error fetching schema:\", error);\n schema = { error: `Failed to fetch schema: ${error.message}` };\n }\n }\n \n // Inject the schema data into the HTML\n const dataScript = ``;\n \n html = html.replace(\"\", `${dataScript}`);\n \n return new Response(html, {\n headers: {\n \"Content-Type\": \"text/html\",\n },\n });\n}","label",[129],"b68a4ed2-3418-11f0-9ca0-9e149126039e","README.md","2e7b8e84-3418-11f0-913e-9e149126039e",9,["D",1747594119478],2,"# JSON Schema Viewer\n\nA minimal web application that renders JSON Schema files using the `@stoplight/json-schema-viewer` package.\n\n## Usage\n\nVisit the application with a URL parameter pointing to a JSON Schema file:\n\n```\nhttps://json-schema-viewer.val.run/?url=\n```\n\nFor example:\n```\nhttps://json-schema-viewer.val.run/?url=https://creativeprojects.github.io/resticprofile/jsonschema/config.json\n```\n\n## Features\n\n- Fetches and displays JSON Schema from any URL\n- Renders the schema using the Stoplight JSON Schema Viewer component\n- Supports all JSON Schema features including nested objects, arrays, and references\n- Minimal UI with no distractions - only shows the schema viewer\n- Handles errors gracefully\n\n## Implementation Details\n\n- Built with React 18.2.0\n- Uses the `@stoplight/json-schema-viewer` package for schema rendering\n- Uses UMD builds of libraries for better browser compatibility\n- Runs on Val Town\n\n## Project Structure\n\n- `/index.ts` - Main HTTP handler that processes requests and serves the application\n- `/frontend/index.html` - HTML template with embedded React application",[141],"298420bc-3418-11f0-9060-9e149126039e","frontend","7b160add-a7c1-4fe8-9093-0899e87d9405",["D",1747593882881],"directory",[149],"pulls","branches","forks","envVars",{"_161":61,"_163":61},"connections",{"_161":61,"_162":61},"count","unfilledCount","emptyCount",{"_43":148,"_32":149,"_30":150,"_131":-5,"_41":42,"_40":145,"_133":24,"_38":188,"_13":61,"_34":152,"_36":-5,"_23":26,"_138":-5,"_170":189,"_27":190},{"_43":184,"_32":33,"_30":31,"_131":150,"_41":42,"_40":14,"_133":26,"_38":185,"_13":61,"_34":35,"_36":37,"_23":26,"_138":-5,"_170":186,"_27":187},{"_43":176,"_32":177,"_30":178,"_131":150,"_41":42,"_40":179,"_133":26,"_38":180,"_13":132,"_34":20,"_36":181,"_23":26,"_138":-5,"_170":182,"_27":183},{"_43":140,"_32":141,"_30":142,"_131":-5,"_41":42,"_40":143,"_133":26,"_38":173,"_13":145,"_34":20,"_36":146,"_23":26,"_138":-5,"_170":174,"_27":175},{"_43":128,"_32":129,"_30":130,"_131":-5,"_41":42,"_40":132,"_133":26,"_38":169,"_13":135,"_34":136,"_36":137,"_23":26,"_138":-5,"_170":171,"_27":172},["D",1747593893262],"children",[],[129],["D",1747594119478],[],[141],"d2fa99aa-3418-11f0-9f6b-9e149126039e","index.html","2983f8b2-3418-11f0-9060-9e149126039e",10,["D",1747594167192],"\n\n\n \n \n JSON Schema Viewer\n \n\n\n

\n \n \n \n\n",[],[149,177],"d738faf2-3418-11f0-8051-9e149126039e",["D",1747594174315],[],[149,33],["D",1747593882881],[165,166],[149],["D",1747593818950],{"_95":94,"_102":98},{"_95":94,"_96":-5,"_97":98,"_18":54,"_99":100,"_101":26},{"_13":84,"_32":85,"_43":42,"_86":44,"_87":-5,"_88":-5,"_89":-5,"_90":-5,"_91":-5,"_92":45,"_93":94},"ctx",{"_77":-5,"_122":228,"_229":230,"_231":232,"_233":26,"_234":26,"_235":26,"_236":24,"_237":-5,"_238":-7,"_239":-7,"_240":61,"_241":26,"_242":26,"_243":-5,"_244":26,"_245":26,"_246":26,"_247":-5},"ENV",{"_199":200,"_201":202,"_203":85,"_204":205,"_206":207,"_208":209,"_210":211,"_212":213,"_214":215,"_216":217,"_218":219,"_220":221,"_222":223,"_224":225,"_226":227},"REACT_APP_SENTRY_DSN","https://586020d86f05489db63a554690acf1e9@o1398359.ingest.sentry.io/6724499","RENDER_GIT_COMMIT","fdb67791413f4386b4dbf18f354029a617f6160f","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 · v11