JSON Schema Viewer

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();",[],[99,186],{"_103":195,"_95":196,"_152":197,"_154":180,"_155":137,"_156":198,"_158":159,"_105":199,"_100":190,"_161":200,"_163":201,"_164":22,"_165":-5,"_166":202,"_98":203},"a291e060-3419-11f0-b213-9e149126039e","index.html","61f1c9f8-3419-11f0-8519-9e149126039e",27,["D",1747594515472],"file","\n\n\n \n \n JSON Schema Viewer\n \n \n \n \n \n\n\n

\n \n\n",[],[99,196],[99],{"_103":206,"_95":207,"_152":208,"_154":-5,"_155":137,"_156":209,"_158":159,"_105":210,"_100":32,"_161":200,"_163":211,"_164":22,"_165":-5,"_166":212,"_98":213},"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],{"_103":215,"_95":216,"_152":217,"_154":-5,"_155":137,"_156":218,"_158":159,"_105":219,"_100":220,"_161":200,"_163":221,"_164":22,"_165":-5,"_166":222,"_98":223},"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",[],[216],{"_103":225,"_95":226,"_152":227,"_154":-5,"_155":137,"_156":228,"_158":159,"_105":229,"_100":32,"_161":200,"_163":230,"_164":22,"_165":-5,"_166":231,"_98":232},"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}",[],[226],{"_103":234,"_95":170,"_152":235,"_154":-5,"_155":137,"_156":136,"_158":159,"_105":236,"_100":237,"_161":238,"_163":239,"_164":22,"_165":240,"_166":241,"_98":242},"9554f674-3529-11f0-a33f-9e149126039e","6a5bfa8c-3419-11f0-9fb0-9e149126039e",["D",1747711316373],4,"http","// Re-export the backend app\nexport { default } from \"./backend/index.ts\";\n\n","json-schema-viewer",[],[170],"files",[149,168,178,184,194,205,214,224,233],"counts",{"_247":32,"_248":190,"_249":32,"_250":32},"pulls","branches","forks","envVars","contents",[253,256],{"_103":185,"_95":186,"_152":187,"_154":180,"_155":137,"_156":188,"_158":159,"_105":254,"_100":190,"_161":173,"_163":191,"_164":22,"_165":-5,"_98":255},["D",1747594503410],[99,186],{"_103":195,"_95":196,"_152":197,"_154":180,"_155":137,"_156":198,"_158":159,"_105":257,"_100":190,"_161":200,"_163":201,"_164":22,"_165":-5,"_98":258},["D",1747594515472],[99,196],{"_103":179,"_155":137,"_152":180,"_95":99,"_163":-5,"_161":162,"_100":32,"_154":-5,"_105":260,"_156":181,"_165":-5,"_98":261},["D",1747593882881],[99],"upstreamProject","upstreamBranch","emptyEnvVars","isNew","routes/_app.x.$handle.$name.code.$",{"_93":94,"_95":96,"_97":43,"_100":-7,"_98":99,"_101":268,"_147":273,"_243":301,"_200":302,"_251":305,"_310":-5,"_311":22,"_312":-5,"_313":-5,"_314":-5,"_315":316},{"_103":104,"_95":96,"_105":269,"_107":-5,"_108":22,"_109":110,"_111":-5,"_112":-5,"_14":113,"_114":-5,"_115":22,"_116":-5,"_117":32,"_16":118,"_119":120,"_121":120,"_122":123,"_124":123,"_125":123,"_126":120,"_127":120,"_23":270,"_131":271,"_134":272,"_146":22},["D",1747593818950],{"_93":94,"_129":130},{"_93":94,"_133":130},{"_100":136,"_95":43,"_103":137,"_138":104,"_139":-5,"_140":-5,"_141":-5,"_142":-5,"_143":-5,"_144":96,"_145":94},[274,280,289,292,295,298],{"_103":150,"_95":151,"_152":153,"_154":-5,"_155":137,"_156":157,"_158":159,"_105":160,"_100":32,"_161":162,"_163":-5,"_164":22,"_165":-5,"_166":275,"_98":279},[276],{"_103":169,"_95":170,"_152":171,"_154":153,"_155":137,"_156":157,"_158":159,"_105":172,"_100":32,"_161":173,"_163":174,"_164":22,"_165":-5,"_166":277,"_98":278},[],[151,170],[151],{"_103":179,"_95":99,"_152":180,"_154":-5,"_155":137,"_156":181,"_158":159,"_105":182,"_100":32,"_161":162,"_163":-5,"_164":22,"_165":-5,"_166":281,"_98":288},[282,285],{"_103":185,"_95":186,"_152":187,"_154":180,"_155":137,"_156":188,"_158":159,"_105":189,"_100":190,"_161":173,"_163":191,"_164":22,"_165":-5,"_166":283,"_98":284},[],[99,186],{"_103":195,"_95":196,"_152":197,"_154":180,"_155":137,"_156":198,"_158":159,"_105":199,"_100":190,"_161":200,"_163":201,"_164":22,"_165":-5,"_166":286,"_98":287},[],[99,196],[99],{"_103":206,"_95":207,"_152":208,"_154":-5,"_155":137,"_156":209,"_158":159,"_105":210,"_100":32,"_161":200,"_163":211,"_164":22,"_165":-5,"_166":290,"_98":291},[],[207],{"_103":215,"_95":216,"_152":217,"_154":-5,"_155":137,"_156":218,"_158":159,"_105":219,"_100":220,"_161":200,"_163":221,"_164":22,"_165":-5,"_166":293,"_98":294},[],[216],{"_103":225,"_95":226,"_152":227,"_154":-5,"_155":137,"_156":228,"_158":159,"_105":229,"_100":32,"_161":200,"_163":230,"_164":22,"_165":-5,"_166":296,"_98":297},[],[226],{"_103":234,"_95":170,"_152":235,"_154":-5,"_155":137,"_156":136,"_158":159,"_105":236,"_100":237,"_161":238,"_163":239,"_164":22,"_165":240,"_166":299,"_98":300},[],[170],[274,276,280,282,285,289,292,295,298],{"_103":179,"_155":137,"_152":180,"_95":99,"_163":-5,"_161":162,"_100":32,"_154":-5,"_105":303,"_156":181,"_165":-5,"_98":304},["D",1747593882881],[99],[306,308],{"_103":185,"_95":186,"_152":187,"_154":180,"_155":137,"_156":188,"_158":159,"_105":254,"_100":190,"_161":173,"_163":191,"_164":22,"_165":-5,"_98":307},[99,186],{"_103":195,"_95":196,"_152":197,"_154":180,"_155":137,"_156":198,"_158":159,"_105":257,"_100":190,"_161":200,"_163":201,"_164":22,"_165":-5,"_98":309},[99,196],"upstream","showCompareCallout","pull","ahead","behind","templates",[],"actionData","errors"]