JSON Schema Viewer

\n \n\n","label",[159,64],"frontend","pulls","branches","forks","envVars",{"_167":26,"_169":26},"connections",{"_167":26,"_168":26},"count","unfilledCount","emptyCount",{"_33":241,"_13":240,"_62":234,"_43":-5,"_35":36,"_151":235,"_152":91,"_37":242,"_39":26,"_65":229,"_155":-5,"_66":24,"_157":-5,"_186":243,"_17":244},{"_33":232,"_13":180,"_62":233,"_43":234,"_35":36,"_151":235,"_152":91,"_37":236,"_39":26,"_65":222,"_155":237,"_66":24,"_157":-5,"_186":238,"_17":239},{"_33":226,"_13":159,"_62":150,"_43":-5,"_35":36,"_151":227,"_152":91,"_37":228,"_39":26,"_65":229,"_155":-5,"_66":24,"_157":-5,"_186":230,"_17":231},{"_33":217,"_13":218,"_62":219,"_43":150,"_35":36,"_151":220,"_152":91,"_37":221,"_39":154,"_65":222,"_155":223,"_66":24,"_157":-5,"_186":224,"_17":225},{"_33":149,"_13":64,"_62":63,"_43":150,"_35":36,"_151":72,"_152":91,"_37":214,"_39":154,"_65":21,"_155":156,"_66":24,"_157":-5,"_186":215,"_17":216},{"_33":206,"_13":207,"_62":208,"_43":-5,"_35":36,"_151":209,"_152":91,"_37":210,"_39":26,"_65":21,"_155":211,"_66":24,"_157":-5,"_186":212,"_17":213},{"_33":197,"_13":198,"_62":199,"_43":-5,"_35":36,"_151":200,"_152":91,"_37":201,"_39":202,"_65":21,"_155":203,"_66":24,"_157":-5,"_186":204,"_17":205},{"_33":189,"_13":190,"_62":191,"_43":-5,"_35":36,"_151":192,"_152":91,"_37":193,"_39":26,"_65":21,"_155":194,"_66":24,"_157":-5,"_186":195,"_17":196},{"_33":179,"_13":180,"_62":89,"_43":-5,"_35":36,"_151":114,"_152":91,"_37":181,"_39":182,"_65":183,"_155":184,"_66":24,"_157":185,"_186":187,"_17":188},"9554f674-3529-11f0-a33f-9e149126039e","index.ts",["D",1747711316373],4,"http","// Re-export the backend app\nexport { default } from \"./backend/index.ts\";\n\n","json-schema-viewer","children",[],[180],"5e7311ae-3529-11f0-99ee-9e149126039e","deno.json","5e73128a-3529-11f0-99ee-9e149126039e",30,["D",1747711224261],"{\n \"$schema\": \"https://raw.githubusercontent.com/denoland/deno/348900b8b79f4a434cab4c74b3bc8d4d2fa8ee74/cli/schemas/config-file.v1.json\",\n \"lock\": false,\n \"compilerOptions\": {\n \"noImplicitAny\": false,\n \"strict\": false,\n \"types\": [\n \"https://www.val.town/types/valtown.d.ts\"\n ],\n \"lib\": [\n \"dom\",\n \"dom.iterable\",\n \"dom.asynciterable\",\n \"deno.ns\",\n \"deno.unstable\"\n ]\n },\n \"lint\": {\n \"files\": {\n \"include\": [\n \"deno:/https/esm.town/**/*\"\n ]\n },\n \"rules\": {\n \"exclude\": [\n \"no-explicit-any\"\n ]\n }\n },\n \"node_modules_dir\": false,\n \"experimental\": {\n \"unstable-node-globals\": true,\n \"unstable-temporal\": true,\n \"unstable-worker-options\": true,\n \"unstable-sloppy-imports\": true\n }\n}",[],[190],"a82d1670-3419-11f0-8c51-9e149126039e","README.md","2e7b8e84-3418-11f0-913e-9e149126039e",28,["D",1747594524878],6,"# 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",[],[198],"5e6de030-3529-11f0-924c-9e149126039e",".vtignore","5e6de10c-3529-11f0-924c-9e149126039e",29,["D",1747711224260],".git\n.vscode\n.cursorrules\n.DS_Store\nnode_modules\nvendor",[],[207],["D",1747594515472],[],[159,64],"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();",[],[159,218],"298420bc-3418-11f0-9060-9e149126039e",2,["D",1747593882881],"directory",[173,174],[159],"5d031fbe-3419-11f0-b369-9e149126039e","5d032068-3419-11f0-b369-9e149126039e","e29d1567-ea4a-4842-b929-df67bb7a2212",20,["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;",[],[240,180],"backend","5d03411a-3419-11f0-b369-9e149126039e",["D",1747594398775],[171],[240],["D",1747593818950],{"_11":12,"_127":69},{"_11":12,"_123":-5,"_68":69,"_30":67,"_124":125,"_126":24},{"_39":114,"_13":16,"_33":36,"_115":79,"_116":-5,"_117":-5,"_118":-5,"_119":-5,"_120":-5,"_121":14,"_122":12},"ctx",{"_52":-5,"_146":282,"_283":284,"_285":286,"_287":24,"_288":24,"_289":24,"_290":91,"_291":-5,"_292":-7,"_293":-7,"_294":26,"_295":24,"_296":24,"_297":-5,"_298":24,"_299":24,"_300":24,"_301":-5},"ENV",{"_253":254,"_255":256,"_257":16,"_258":259,"_260":261,"_262":263,"_264":265,"_266":267,"_268":269,"_270":271,"_272":273,"_274":275,"_276":277,"_278":279,"_280":281},"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"]

History · index.html