JSON Schema viewer in Angular
[
] [
]
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/
npm install ngx-json-schema-viewerimport { 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 }; }| 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.
| 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"] |
Special thanks to docusaurus-json-schema-plugin, which this project ported it to the Angular world.