JSON Schema Explorer

Interactive documentation UI for JSON Schema. This project is a Vue 3 + Vite single-page app that renders a schema as browsable documentation, with route-based navigation into nested nodes and optional loading of external schemas at runtime.

What It Does

• Renders schema metadata such as title, description, type, enums, constants, patterns, and validation constraints.
• Lets you drill into properties, items, definitions, $defs, anyOf, oneOf, and allOf.
• Shows required properties and whether additionalProperties are allowed.
• Resolves internal references and supports loading a schema from a remote URL via query string.
• Includes a collapsible raw JSON view with syntax highlighting.
• Supports light, dark, and system theme modes.

Requirements

• Node.js ^22.18.0 || >=24.12.0
• Yarn 4.17.0

Use with npx

Generate a self-contained static viewer for a schema:

npx json-schema-viewer ./path/to/schema.json --out-dir ./dist

The output directory contains the generated index.html and bundled assets and can be served by any static web server. The output defaults to ./dist when --out-dir is omitted.

For a locally checked-out copy of this package, the equivalent command is:

yarn json-schema-viewer ./path/to/schema.json --out-dir ./dist

Install

yarn

Run Locally

yarn dev

The Vite dev server will start the app locally. By default, the app renders the schema embedded at build time.

Provide a Schema

The app reads the default schema at build/dev time through the Vite environment handling in vite.config.ts.

Option 1: Load from a file

VITE_JSON_SCHEMA_PATH=./path/to/schema.json yarn dev

Option 2: Inline the schema JSON

VITE_JSON_SCHEMA='{"title":"Example","type":"object"}' yarn dev

VITE_JSON_SCHEMA_PATH takes precedence when both variables are set.

Runtime Usage

Browse the bundled schema

Open the app root:

/

Navigation is route-based, so deeper paths map directly to schema segments, for example:

/properties/user
/definitions/Address
/$defs/Profile
/items

Load an external schema

Pass a schema URL through the url query parameter:

/?url=https://example.com/schema.json

The viewer will fetch that schema in the browser and keep route navigation working against the loaded document.

The remote endpoint must allow browser access from your app origin, otherwise the request will fail due to CORS.

Scripts

• yarn dev starts the Vite development server.
• yarn build runs type-checking and creates a production build.
• yarn preview serves the production build locally.
• yarn lint runs Oxlint and ESLint with autofix enabled.
• yarn format formats files under src/ with Prettier.

Build

yarn build