Awesome

<h1 align="center">ngx-json-schema-viewer</h1> <div align="center"> <img width="200" src="https://raw.githubusercontent.com/jy95/ngx-json-schema-viewer/master/logo.svg" /> </div> <div align="center">

JSON Schema viewer in Angular

[ npm latest package ] [ npm downloads ] <a href="https://www.buymeacoffee.com/GPFR" target="_blank"><img src="https://cdn.buymeacoffee.com/buttons/v2/default-yellow.png" height="41" width="174" alt="Buy Me A Coffee" style="height: 41px !important;width: 174px !important;" ></a> <br />

</div>

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