Skip to content

jy95/ngx-json-schema-viewer

Repository files navigation

ngx-json-schema-viewer

JSON Schema viewer in Angular



License: AGPL v3 [npm latest package] [npm downloads] Codacy Badge PRs Welcome prettier Buy Me A Coffee


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