JSON Schema Viewer

[{"_1":2,"_3":-5,"_4":-5},"loaderData",{"_5":6,"_7":8,"_9":10},"actionData","errors","root",{"_215":216,"_217":218},"routes/_app.x.$handle.$name",{"_95":94,"_32":44,"_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":25,"_118":119,"_120":57,"_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",{"_42":43,"_32":44,"_37":45,"_46":-5,"_47":25,"_48":49,"_50":49,"_51":-5,"_52":-5,"_18":53,"_54":55,"_56":57,"_58":57,"_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":25},"version",28,"changes",[19],"aiChatInfo","userId",{"_20":21,"_22":23,"_24":25,"_26":25,"_27":28,"_29":28},"file",{"_30":31,"_32":28,"_33":20,"_34":36,"_37":38,"_39":14,"_40":41,"_24":25},"previous",{"_30":31,"_32":28,"_33":20,"_34":35},"deleted",false,"deletedHere","path","README.md","latestPath","fileId","2e7b8e84-3418-11f0-913e-9e149126039e","name","fileType","content","# 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 and Hono 3.11.7\n- Uses the `@stoplight/json-schema-viewer` package for schema rendering\n- Uses Prism.js for syntax highlighting\n- Follows the recommended Val Town project structure\n- Clean separation of backend and frontend code\n\n## Project Structure\n\n- `/index.ts` - Entry point that re-exports the backend\n- `/backend/index.ts` - Hono application with API endpoints and route handlers\n- `/frontend/index.html` - HTML template\n- `/frontend/app.jsx` - React application","# JSON Schema Viewer\n\nA minimal web application that renders JSON Schema files using the `material-ui-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 Material UI 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- Material Design styling\n\n## Implementation Details\n\n- Built with React 18.2.0 and Hono 3.11.7\n- Uses the `material-ui-json-schema-viewer` package for schema rendering\n- Uses Material UI v4 for styling and components\n- Follows the recommended Val Town project structure\n- Clean separation of backend and frontend code\n\n## Project Structure\n\n- `/index.ts` - Entry point that re-exports the backend\n- `/backend/index.ts` - Hono application with API endpoints and route handlers\n- `/frontend/index.html` - HTML template\n- `/frontend/app.jsx` - React application with Material UI components","createdAt",["D",1747594524878],"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",true,"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":53,"_99":100,"_101":25},"branch",{"_13":84,"_32":85,"_42":41,"_86":43,"_87":-5,"_88":-5,"_89":-5,"_90":-5,"_91":-5,"_92":44,"_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",{"_42":43,"_32":44,"_37":211,"_46":-5,"_47":25,"_48":49,"_50":49,"_51":-5,"_52":-5,"_18":53,"_54":55,"_56":57,"_58":57,"_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":212,"_79":213,"_81":214,"_83":25},"tree",[168,170,173,174],"files",[168,169,170,171,172,173,174],"counts",{"_158":61,"_159":135,"_160":61,"_161":162,"_163":164},"contents",[125,126,127,128],"upstreamProject","upstreamBranch","emptyEnvVars","flags",[],"hasHttpFiles","grants","orgs","customDomains",{},{"_42":152,"_32":153,"_30":154,"_131":-5,"_40":41,"_39":155,"_133":57,"_37":156,"_13":61,"_33":150,"_34":-5,"_24":25,"_138":-5,"_27":157},{"_42":145,"_32":146,"_30":147,"_131":-5,"_40":41,"_39":148,"_133":57,"_37":149,"_13":61,"_33":150,"_34":-5,"_24":25,"_138":-5,"_27":151},{"_42":141,"_32":28,"_30":31,"_131":-5,"_40":41,"_39":14,"_133":57,"_37":142,"_13":143,"_33":20,"_34":36,"_24":25,"_138":-5,"_27":144},{"_42":129,"_32":130,"_30":55,"_131":-5,"_40":41,"_39":132,"_133":25,"_37":134,"_13":135,"_33":136,"_34":137,"_24":25,"_138":139,"_27":140},"7042bb48-3419-11f0-af51-9e149126039e","index.ts","parentId",25,"latest",["D",1747594431067],1,"http","// Re-export the backend app\nexport { default } from './backend/index.ts';","label","json-schema-viewer",[130],"a82d1670-3419-11f0-8c51-9e149126039e",["D",1747594524878],6,[28],"298420bc-3418-11f0-9060-9e149126039e","frontend","7b160add-a7c1-4fe8-9093-0899e87d9405",2,["D",1747593882881],"directory",[146],"5d03411a-3419-11f0-b369-9e149126039e","backend","e29d1567-ea4a-4842-b929-df67bb7a2212",20,["D",1747594398775],[153],"pulls","branches","forks","envVars",{"_165":61,"_167":61},"connections",{"_165":61,"_166":61},"count","unfilledCount","emptyCount",{"_42":152,"_32":153,"_30":154,"_131":-5,"_40":41,"_39":155,"_133":57,"_37":208,"_13":61,"_33":150,"_34":-5,"_24":25,"_138":-5,"_176":209,"_27":210},{"_42":202,"_32":130,"_30":203,"_131":154,"_40":41,"_39":155,"_133":57,"_37":204,"_13":61,"_33":195,"_34":205,"_24":25,"_138":-5,"_176":206,"_27":207},{"_42":145,"_32":146,"_30":147,"_131":-5,"_40":41,"_39":148,"_133":57,"_37":199,"_13":61,"_33":150,"_34":-5,"_24":25,"_138":-5,"_176":200,"_27":201},{"_42":190,"_32":191,"_30":192,"_131":147,"_40":41,"_39":193,"_133":57,"_37":194,"_13":135,"_33":195,"_34":196,"_24":25,"_138":-5,"_176":197,"_27":198},{"_42":182,"_32":183,"_30":184,"_131":147,"_40":41,"_39":185,"_133":57,"_37":186,"_13":135,"_33":20,"_34":187,"_24":25,"_138":-5,"_176":188,"_27":189},{"_42":141,"_32":28,"_30":31,"_131":-5,"_40":41,"_39":14,"_133":57,"_37":179,"_13":143,"_33":20,"_34":36,"_24":25,"_138":-5,"_176":180,"_27":181},{"_42":129,"_32":130,"_30":55,"_131":-5,"_40":41,"_39":132,"_133":25,"_37":175,"_13":135,"_33":136,"_34":137,"_24":25,"_138":139,"_176":177,"_27":178},["D",1747594431067],"children",[],[130],["D",1747594524878],[],[28],"a291e060-3419-11f0-b213-9e149126039e","index.html","61f1c9f8-3419-11f0-8519-9e149126039e",27,["D",1747594515472],"\n\n\n \n \n JSON Schema Viewer\n \n \n \n \n \n\n\n

\n \n\n",[],[146,183],"9b615a28-3419-11f0-80de-9e149126039e","app.jsx","689e25c6-3419-11f0-8330-9e149126039e",26,["D",1747594503410],"script","/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport React, { useState, useEffect } from 'https://esm.sh/react@18.2.0';\nimport { createRoot } from 'https://esm.sh/react-dom@18.2.0/client';\n\n// Import Material UI components\nimport { \n ThemeProvider, \n createTheme, \n CssBaseline \n} from 'https://esm.sh/@material-ui/core@4.12.4?deps=react@18.2.0,react-dom@18.2.0';\n\n// Import the Material UI JSON Schema Viewer\nimport SchemaViewer from 'https://esm.sh/material-ui-json-schema-viewer@2.0.0?deps=react@18.2.0,react-dom@18.2.0,@material-ui/core@4.12.4';\n\n// Get the initial data from the window\nconst initialData = window.__INITIAL_DATA__ || { schemaUrl: null };\n\n// Create a theme\nconst theme = createTheme({\n palette: {\n type: 'light',\n background: {\n default: '#f8f9fa',\n paper: '#fff',\n },\n },\n});\n\n// Error component\nconst ErrorMessage = ({ message }) => (\n

Error

{message}

\n);\n\n// Loading component\nconst Loading = () => (\n

\n Loading schema...\n

\n);\n\n// Main App component\nconst App = () => {\n const [schema, setSchema] = useState(null);\n const [references, setReferences] = useState([]);\n const [loading, setLoading] = useState(false);\n const [error, setError] = useState(null);\n \n useEffect(() => {\n const fetchSchema = async () => {\n if (!initialData.schemaUrl) {\n setError('No schema URL provided. Use ?url=https://example.com/schema.json');\n return;\n }\n \n setLoading(true);\n try {\n const response = await fetch(`/api/schema?url=${encodeURIComponent(initialData.schemaUrl)}`);\n const data = await response.json();\n \n if (data.error) {\n throw new Error(data.error);\n }\n \n setSchema(data.schema);\n // If the schema has an $id, add it to references\n if (data.schema.$id) {\n setReferences([data.schema]);\n }\n } catch (err) {\n setError(err.message || 'Failed to load schema');\n } finally {\n setLoading(false);\n }\n };\n \n fetchSchema();\n }, []);\n \n if (error) {\n return ;\n }\n \n if (loading) {\n return ;\n }\n \n if (!schema) {\n return ;\n }\n \n return (\n \n \n

\n 0 ? references : undefined} \n />\n

\n \n );\n};\n\n// Render the app\nconst root = createRoot(document.getElementById('root'));\nroot.render();",[],[146,191],["D",1747593882881],[171,172],[146],"5d031fbe-3419-11f0-b369-9e149126039e","5d032068-3419-11f0-b369-9e149126039e",["D",1747594398775],"import { Hono } from 'https://esm.sh/hono@3.11.7';\nimport { readFile, serveFile } from \"https://esm.town/v/std/utils/index.ts\";\n\nconst app = new Hono();\n\n// Unwrap Hono errors to see original error details\napp.onError((err, c) => {\n throw err;\n});\n\n// Serve static files from the frontend directory\napp.get('/frontend/*', c => serveFile(c.req.path, import.meta.url));\n\n// API endpoint to fetch a JSON schema\napp.get('/api/schema', async c => {\n const url = c.req.query('url');\n \n if (!url) {\n return c.json({ error: 'No URL provided' }, 400);\n }\n \n try {\n const response = await fetch(url);\n if (!response.ok) {\n throw new Error(`Failed to fetch schema: ${response.status} ${response.statusText}`);\n }\n const schema = await response.json();\n return c.json({ schema });\n } catch (error) {\n console.error(\"Error fetching schema:\", error);\n return c.json({ error: `Failed to fetch schema: ${error.message}` }, 500);\n }\n});\n\n// Main route to serve the HTML\napp.get('/', async c => {\n const schemaUrl = c.req.query('url');\n let html = await readFile(\"/frontend/index.html\", import.meta.url);\n \n // Inject the schema URL into the HTML\n const dataScript = ``;\n \n html = html.replace(\"\", `${dataScript}`);\n \n return c.html(html);\n});\n\nexport default app.fetch;",[],[153,130],["D",1747594398775],[169],[153],["D",1747593818950],{"_95":94,"_102":98},{"_95":94,"_96":-5,"_97":98,"_18":53,"_99":100,"_101":25},{"_13":84,"_32":85,"_42":41,"_86":43,"_87":-5,"_88":-5,"_89":-5,"_90":-5,"_91":-5,"_92":44,"_93":94},"ctx",{"_77":-5,"_122":248,"_249":250,"_251":252,"_253":25,"_254":25,"_255":25,"_256":57,"_257":-5,"_258":-7,"_259":-7,"_260":61,"_261":25,"_262":25,"_263":-5,"_264":25,"_265":25,"_266":25,"_267":-5},"ENV",{"_219":220,"_221":222,"_223":85,"_224":225,"_226":227,"_228":229,"_230":231,"_232":233,"_234":235,"_236":237,"_238":239,"_240":241,"_242":243,"_244":245,"_246":247},"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 · v28