Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/jy95/ngx-json-schema-viewer
JSON Schema Viewer in Angular
https://github.com/jy95/ngx-json-schema-viewer
angular angular-library angular-material json json-schema json-schema-documentation ngx
Last synced: about 2 months ago
JSON representation
JSON Schema Viewer in Angular
- Host: GitHub
- URL: https://github.com/jy95/ngx-json-schema-viewer
- Owner: jy95
- License: agpl-3.0
- Created: 2023-09-29T22:04:06.000Z (about 1 year ago)
- Default Branch: master
- Last Pushed: 2024-10-14T01:10:13.000Z (2 months ago)
- Last Synced: 2024-10-14T06:03:34.201Z (2 months ago)
- Topics: angular, angular-library, angular-material, json, json-schema, json-schema-documentation, ngx
- Language: TypeScript
- Homepage: https://master--65174c82cd070b9998efd7f6.chromatic.com/
- Size: 1.62 MB
- Stars: 2
- Watchers: 1
- Forks: 0
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
- fucking-awesome-angular - ngx-json-schema-viewer - JSON Schema Viewer in Angular. (Table of contents / Third Party Components)
- awesome-angular - ngx-json-schema-viewer - JSON Schema Viewer in Angular. (Table of contents / Third Party Components)
- trackawesomelist - ngx-json-schema-viewer (⭐2) - JSON Schema Viewer in Angular. (Recently Updated / [Oct 12, 2024](/content/2024/10/12/README.md))
README
ngx-json-schema-viewer
JSON Schema viewer in Angular
[![License: AGPL v3](https://img.shields.io/badge/License-AGPL_v3-blue.svg)](https://github.com/jy95/ngx-json-schema-viewer/blob/main/LICENSE) [![npm latest package](https://img.shields.io/npm/v/ngx-json-schema-viewer/latest.svg)] [![npm downloads](https://img.shields.io/npm/dm/ngx-json-schema-viewer.svg)] [![Codacy Badge](https://app.codacy.com/project/badge/Grade/43d9fa27054841f5a884afc88188ef01)](https://app.codacy.com/gh/jy95/ngx-json-schema-viewer/dashboard?utm_source=gh&utm_medium=referral&utm_content=&utm_campaign=Badge_grade) [![PRs Welcome](https://img.shields.io/badge/PRs-welcome-brightgreen.svg)](https://github.com/jy95/ngx-json-schema-viewer/blob/main/CONTRIBUTING.md) [![prettier](https://img.shields.io/badge/code_style-prettier-ff69b4.svg)](https://github.com/prettier/prettier)
---
## Overview
Key Features:
- **Compatible:** Works with JSON Schema Draft-07 / Draft 2019-09 / Draft 2020-12
- **Human-friendly** Make exploration of specs a delightful experienceStorybook : https://master--65174c82cd070b9998efd7f6.chromatic.com/
## Installation
```bash
npm install ngx-json-schema-viewer
```## Usage
```ts
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: `
`
})
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](https://github.com/stoplightio/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](https://github.com/jy95/docusaurus-json-schema-plugin), which this project ported it to the Angular world.
## Contributors