JSON Schema Viewer

A minimal web application that renders JSON Schema files using the material-ui-json-schema-viewer package.

Usage

Visit the application with a URL parameter pointing to a JSON Schema file:

https://json-schema-viewer.val.run/?url=<url-to-some-json-schema.json>

For example:

https://json-schema-viewer.val.run/?url=https://creativeprojects.github.io/resticprofile/jsonschema/config.json

Features

  • Fetches and displays JSON Schema from any URL
  • Renders the schema using the Material UI JSON Schema Viewer component
  • Supports all JSON Schema features including nested objects, arrays, and references
  • Minimal UI with no distractions - only shows the schema viewer
  • Handles errors gracefully
  • Material Design styling

Implementation Details

  • Built with React 18.2.0 and Hono 3.11.7
  • Uses the material-ui-json-schema-viewer package for schema rendering
  • Uses Material UI v4 for styling and components
  • Follows the recommended Val Town project structure
  • Clean separation of backend and frontend code

Project Structure

  • /index.ts - Entry point that re-exports the backend
  • /backend/index.ts - Hono application with API endpoints and route handlers
  • /frontend/index.html - HTML template
  • /frontend/app.jsx - React application with Material UI components