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();",[],[180,187],{"_104":196,"_95":197,"_153":198,"_155":181,"_156":138,"_157":199,"_159":160,"_106":200,"_100":191,"_162":201,"_164":202,"_165":22,"_166":-5,"_167":203,"_98":204},"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",[],[180,197],[180],{"_104":207,"_95":208,"_153":209,"_155":-5,"_156":138,"_157":101,"_159":160,"_106":210,"_100":211,"_162":201,"_164":212,"_165":22,"_166":-5,"_167":213,"_98":214},"a82d1670-3419-11f0-8c51-9e149126039e","README.md","2e7b8e84-3418-11f0-913e-9e149126039e",["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",[],[208],{"_104":216,"_95":99,"_153":217,"_155":-5,"_156":138,"_157":218,"_159":22,"_106":219,"_100":191,"_162":220,"_164":221,"_165":22,"_166":222,"_167":223,"_98":224},"7042bb48-3419-11f0-af51-9e149126039e","6a5bfa8c-3419-11f0-9fb0-9e149126039e",25,["D",1747594431067],"http","// Re-export the backend app\nexport { default } from './backend/index.ts';","json-schema-viewer",[],[99],"files",[150,169,178,185,195,206,215],"counts",{"_229":32,"_230":191,"_231":32,"_232":233},"pulls","branches","forks","envVars",{"_234":32,"_235":32},"count","emptyCount","contents",[],{"_104":216,"_95":99,"_153":217,"_155":-5,"_156":138,"_157":218,"_159":22,"_106":239,"_100":191,"_162":220,"_164":221,"_165":22,"_166":222,"_98":240},["D",1747594431067],[99],"upstreamProject","upstreamBranch","emptyEnvVars","isNew","flags",[],"routes/_app.x.$handle.$name.branch.$branch.version.$version.code.$",{"_93":94,"_95":96,"_97":43,"_100":101,"_98":99,"_102":249,"_148":254,"_225":276,"_201":277,"_236":280,"_281":-5,"_282":-5,"_283":-5,"_284":-5,"_285":286},{"_104":105,"_95":96,"_106":250,"_108":-5,"_109":22,"_110":111,"_112":-5,"_113":-5,"_14":114,"_115":-5,"_116":22,"_117":-5,"_118":32,"_16":119,"_120":121,"_122":121,"_123":124,"_125":124,"_126":124,"_127":121,"_128":121,"_23":251,"_132":252,"_135":253,"_147":22},["D",1747593818950],{"_93":94,"_130":131},{"_93":94,"_134":131,"_14":114},{"_100":137,"_95":43,"_104":138,"_139":105,"_140":-5,"_141":-5,"_142":-5,"_143":-5,"_144":-5,"_145":96,"_146":94},[255,261,270,273],{"_104":151,"_95":152,"_153":154,"_155":-5,"_156":138,"_157":158,"_159":160,"_106":161,"_100":32,"_162":163,"_164":-5,"_165":22,"_166":-5,"_167":256,"_98":260},[257],{"_104":170,"_95":99,"_153":171,"_155":154,"_156":138,"_157":158,"_159":160,"_106":172,"_100":32,"_162":173,"_164":174,"_165":22,"_166":-5,"_167":258,"_98":259},[],[152,99],[152],{"_104":179,"_95":180,"_153":181,"_155":-5,"_156":138,"_157":182,"_159":160,"_106":183,"_100":32,"_162":163,"_164":-5,"_165":22,"_166":-5,"_167":262,"_98":269},[263,266],{"_104":186,"_95":187,"_153":188,"_155":181,"_156":138,"_157":189,"_159":160,"_106":190,"_100":191,"_162":173,"_164":192,"_165":22,"_166":-5,"_167":264,"_98":265},[],[180,187],{"_104":196,"_95":197,"_153":198,"_155":181,"_156":138,"_157":199,"_159":160,"_106":200,"_100":191,"_162":201,"_164":202,"_165":22,"_166":-5,"_167":267,"_98":268},[],[180,197],[180],{"_104":207,"_95":208,"_153":209,"_155":-5,"_156":138,"_157":101,"_159":160,"_106":210,"_100":211,"_162":201,"_164":212,"_165":22,"_166":-5,"_167":271,"_98":272},[],[208],{"_104":216,"_95":99,"_153":217,"_155":-5,"_156":138,"_157":218,"_159":22,"_106":219,"_100":191,"_162":220,"_164":221,"_165":22,"_166":222,"_167":274,"_98":275},[],[99],[255,257,261,263,266,270,273],{"_104":216,"_156":138,"_153":217,"_95":99,"_164":221,"_162":220,"_100":191,"_155":-5,"_106":278,"_157":218,"_166":222,"_98":279},["D",1747594431067],[99],[],"upstream","pull","ahead","behind","templates",[],"actionData","errors"]

wolf

JsonSchemaViewer