JSON Schema Viewer

[{"_1":2,"_3":-5,"_4":-5},"loaderData",{"_5":6,"_7":8,"_9":10},"actionData","errors","root",{"_199":200,"_201":202},"routes/_app.x.$handle.$name",{"_97":96,"_33":47,"_105":87,"_28":106,"_13":14,"_107":-5,"_11":108,"_109":110,"_111":112,"_113":114,"_115":116,"_20":-5,"_117":-5,"_118":-5,"_119":27,"_120":121,"_122":25,"_123":-5,"_124":-5,"_125":126},"routes/_app.x.$handle.$name.branch.$branch.version.$version.diff",{"_11":12,"_13":14,"_15":16,"_17":-5,"_18":-5},"project",{"_45":46,"_33":47,"_40":48,"_49":-5,"_50":27,"_51":52,"_53":52,"_54":-5,"_55":-5,"_18":56,"_57":58,"_59":25,"_60":25,"_61":-5,"_62":63,"_64":65,"_66":-5,"_67":-5,"_68":-5,"_69":-5,"_70":71,"_72":71,"_73":74,"_75":74,"_76":74,"_77":71,"_78":71,"_79":80,"_81":82,"_83":84,"_85":27},"version",15,"changes",[19],"aiChatInfo","userId",{"_20":21,"_22":23,"_24":25,"_26":27,"_28":29,"_30":29},"file",{"_31":32,"_33":34,"_35":36,"_37":39,"_40":41,"_42":14,"_43":44,"_24":27},"previous",{"_31":32,"_33":34,"_35":36,"_37":38},"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));","// 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\n// Note: We're using a specific version and ensuring all dependencies are properly pinned\nimport { JsonSchemaViewer } from 'https://esm.sh/@stoplight/json-schema-viewer@4.16.4?deps=react@18.2.0,react-dom@18.2.0,prismjs@1.29.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('div', { style: { height: '100%', width: '100%' } },\n React.createElement(JsonSchemaViewer, {\n schema: data.schema,\n expanded: true,\n defaultExpandedDepth: 2\n })\n );\n};\n\n// Render the App\nconst rootElement = document.getElementById('root');\nconst root = createRoot(rootElement);\nroot.render(React.createElement(App));","createdAt",["D",1747594266184],"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",{"_97":96,"_104":100},"org",{"_97":96,"_98":-5,"_99":100,"_18":56,"_101":102,"_103":27},"branch",{"_13":86,"_33":87,"_45":44,"_88":46,"_89":-5,"_90":-5,"_91":-5,"_92":-5,"_93":-5,"_94":47,"_95":96},"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",{"_45":46,"_33":47,"_40":195,"_49":-5,"_50":27,"_51":52,"_53":52,"_54":-5,"_55":-5,"_18":56,"_57":58,"_59":25,"_60":25,"_61":-5,"_62":63,"_64":65,"_66":-5,"_67":-5,"_68":-5,"_69":-5,"_70":71,"_72":71,"_73":74,"_75":74,"_76":74,"_77":71,"_78":71,"_79":196,"_81":197,"_83":198,"_85":27},"tree",[167,170,171],"files",[167,168,169,170,171],"counts",{"_156":63,"_157":158,"_159":63,"_160":161,"_162":163},"contents",[127,128,129],"upstreamProject","upstreamBranch","emptyEnvVars","flags",[],"hasHttpFiles","grants","orgs","customDomains",{},{"_45":150,"_33":151,"_31":152,"_133":-5,"_43":44,"_42":137,"_135":25,"_40":153,"_13":63,"_35":154,"_37":-5,"_24":27,"_140":-5,"_28":155},{"_45":142,"_33":143,"_31":144,"_133":-5,"_43":44,"_42":145,"_135":27,"_40":146,"_13":147,"_35":20,"_37":148,"_24":27,"_140":-5,"_28":149},{"_45":130,"_33":131,"_31":132,"_133":-5,"_43":44,"_42":134,"_135":27,"_40":136,"_13":137,"_35":138,"_37":139,"_24":27,"_140":-5,"_28":141},"dc78cc4a-3418-11f0-a022-9e149126039e","index.ts","1dc1aab0-3418-11f0-9d56-9e149126039e","parentId",12,"latest",["D",1747594183120],2,"http","import { readFile, serveFile } 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 path = url.pathname;\n \n // Serve the app.js file\n if (path === '/frontend/app.js') {\n return serveFile(path, import.meta.url);\n }\n \n // Handle the main page\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",[131],"e1009bbc-3418-11f0-b393-9e149126039e","README.md","2e7b8e84-3418-11f0-913e-9e149126039e",13,["D",1747594190720],3,"# 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 ES modules from esm.sh for better compatibility with Val Town\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\n- `/frontend/app.js` - JavaScript module that loads React and the JSON Schema Viewer",[143],"298420bc-3418-11f0-9060-9e149126039e","frontend","7b160add-a7c1-4fe8-9093-0899e87d9405",["D",1747593882881],"directory",[151],"pulls","branches",1,"forks","envVars",{"_164":63,"_166":63},"connections",{"_164":63,"_165":63},"count","unfilledCount","emptyCount",{"_45":150,"_33":151,"_31":152,"_133":-5,"_43":44,"_42":137,"_135":25,"_40":192,"_13":63,"_35":154,"_37":-5,"_24":27,"_140":-5,"_173":193,"_28":194},{"_45":188,"_33":34,"_31":32,"_133":152,"_43":44,"_42":14,"_135":27,"_40":189,"_13":158,"_35":36,"_37":39,"_24":27,"_140":-5,"_173":190,"_28":191},{"_45":179,"_33":180,"_31":181,"_133":152,"_43":44,"_42":182,"_135":27,"_40":183,"_13":184,"_35":20,"_37":185,"_24":27,"_140":-5,"_173":186,"_28":187},{"_45":142,"_33":143,"_31":144,"_133":-5,"_43":44,"_42":145,"_135":27,"_40":176,"_13":147,"_35":20,"_37":148,"_24":27,"_140":-5,"_173":177,"_28":178},{"_45":130,"_33":131,"_31":132,"_133":-5,"_43":44,"_42":134,"_135":27,"_40":172,"_13":137,"_35":138,"_37":139,"_24":27,"_140":-5,"_173":174,"_28":175},["D",1747594183120],"children",[],[131],["D",1747594190720],[],[143],"08f72eba-3419-11f0-ba0c-9e149126039e","index.html","2983f8b2-3418-11f0-9060-9e149126039e",14,["D",1747594257767],5,"\n\n\n \n \n JSON Schema Viewer\n \n \n \n \n \n \n\n\n

\n \n \n \n\n",[],[151,180],"0dfbb69c-3419-11f0-a4b8-9e149126039e",["D",1747594266184],[],[151,34],["D",1747593882881],[168,169],[151],["D",1747593818950],{"_97":96,"_104":100},{"_97":96,"_98":-5,"_99":100,"_18":56,"_101":102,"_103":27},{"_13":86,"_33":87,"_45":44,"_88":46,"_89":-5,"_90":-5,"_91":-5,"_92":-5,"_93":-5,"_94":47,"_95":96},"ctx",{"_79":-5,"_124":232,"_233":234,"_235":236,"_237":27,"_238":27,"_239":27,"_240":25,"_241":-5,"_242":-7,"_243":-7,"_244":63,"_245":27,"_246":27,"_247":-5,"_248":27,"_249":27,"_250":27,"_251":-5},"ENV",{"_203":204,"_205":206,"_207":87,"_208":209,"_210":211,"_212":213,"_214":215,"_216":217,"_218":219,"_220":221,"_222":223,"_224":225,"_226":227,"_228":229,"_230":231},"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 · v15