Skip to content
| Marketplace
Sign in
Visual Studio Code>Other>ScheV — JSON Schema Visual EditorNew to Visual Studio Code? Get it now.
ScheV — JSON Schema Visual Editor

ScheV — JSON Schema Visual Editor

Jakob Stemberger

|
4 installs
| (0) | Free
Visualize JSON/YAML schemas as box graphs. Increment 1: read-only visualization.
Installation
Launch VS Code Quick Open (Ctrl+P), paste the following command, and press enter.
Copied to clipboard
More Info

ScheV VS Code Extension (Increment 1 placeholder)

VS Code Marketplace Version Installs Rating

Commands

  • ScheV: Open Visualizer — Opens a webview with a placeholder visualizer. Real detection/graph rendering will be wired to schev-core and schev-ui.
  • ScheV: Set Output Format: JSON — Sets schev.outputFormat to json.
  • ScheV: Set Output Format: YAML — Sets schev.outputFormat to yaml.

Settings (feature flags)

  • schev.enableYaml: Enable YAML parsing/visualization.
  • schev.enableEmbeddedDetection: Enable embedded schema detection (default: true).
  • schev.revealPreview: Open reveals in preview tabs (default: true). Set to false to always open as fixed tabs.
  • schev.outputFormat: Global output format preference (json or yaml). If unset, it follows the source document format (JSON file → JSON; YAML file → YAML).
  • schev.yamlIndent: YAML indent width for examples (default: 2).
  • schev.yamlLineWidth: YAML preferred line width (default: 100).
  • schev.yamlIndentSeq: YAML sequence indentation (default: true).

Output Format

  • Examples in the schema (examples keyword) are shown as formatted, syntax-colored code blocks.
  • The format is controlled by schev.outputFormat (defaults to the source document’s format if unset).
  • Examples are clickable: clicking a block selects the corresponding examples[i] entry in the source (JSON/YAML).

Behavior: Code Sync from Visualizer

  • Clicking on properties/nodes in the visualizer focuses the corresponding document and selects the related range.
  • If the document is already open (visible or in a background tab), that tab/group is reused — no duplicate editor is opened.
  • If it is not open, the document is opened in the original source editor group (left of the visualizer, which opens to the right).
  • New openings use VS Code’s preview tab mode (preview: true), so repeated navigations don’t create tab clutter. Editing or pinning converts a preview tab into a regular tab.

Publishing

  • Prereqs: Node.js, vsce (npm i -g vsce).
  • From repo root (ensures all packages build):
    • npm ci
    • npm run build
    • cd packages/schev-extension
    • vsce package (or vsce publish)
  • Alternatively from packages/schev-extension directly:
    • npm ci
    • vsce package
    • The vscode:prepublish script builds schev-core and schev-ui, then bundles assets (including Prism) into dist/.
  • Contact us
  • Jobs
  • Privacy
  • Manage cookies
  • Terms of use
  • Trademarks
© 2025 Microsoft