ngx-json-schema-viewer

ngx-json-schema-viewer

JSON Schema viewer in Angular

[] []

Overview

Key Features:

• Compatible: Works with JSON Schema Draft-07 / Draft 2019-09 / Draft 2020-12
• Human-friendly Make exploration of specs a delightful experience

Storybook : https://master--65174c82cd070b9998efd7f6.chromatic.com/

Installation

npm install ngx-json-schema-viewer

Usage

import { NgxJsonSchemaViewerComponent, JSV_OPTIONS } from "ngx-json-schema-viewer";
import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [NgxJsonSchemaViewerComponent],
  providers: [
    { 
      provide: JSV_OPTIONS, 
      useValue: {} 
    }
  ],
  template: `
    <div>
      <ngx-json-schema-viewer [schema]="jsonSchema"></ngx-json-schema-viewer>
    </div>
  `
})
export class AppComponent {
  // Your JSON Schema here
  jsonSchema = {
    "type": "array",
    "items": [
        {
            "type": "integer"
        },
        {
            "type": "string"
        }
    ],
    "additionalItems": false
  };
}

Inputs

Parameter	Type	Mandatory	Description
schema	JSON Schema	Yes	The JSON schema object to be displayed
resolverOptions	IResolveOpts	No	Additional options for schema resolution. It accepts an object of type IResolveOpts. If not provided, the component will use default options.

Note: For more information on IResolveOpts, refer to the GitHub page of @stoplight/json-ref-resolver.

Providers

JSV_OPTIONS

Field Name	Description	Type	Default Value
showExamples	Controls whether to display "examples."	boolean	false
qualifierMessagesOrder	Defines the order of qualifier messages.	CheckKey[]	Default order: ["nullable", "deprecated", "readOnly", "writeOnly", "enum", "stringLength", "objectProperties", "no-extra-properties", "arrayItems", "arrayContains", "no-extra-items", "number-range", "pattern", "multipleOf", "uniqueItems", "contentEncoding", "contentMediaType", "contentSchema", "default", "const", "examples"]

Credits

Special thanks to docusaurus-json-schema-plugin, which this project ported it to the Angular world.

Contributors