ngx-json-schema-viewer
v4.0.0
Published
<h1 align="center">ngx-json-schema-viewer</h1>
Downloads
61
Maintainers
Readme
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.