JSONSchemaView

Code in GitHub

JSON Schema is very verbose and hard to read in JSON. This component helps rendering a JSON Schema in a user readable format.

Install via npm

npm install --save json-schema-view-js

API

import JSONSchemaView from 'json-schema-view-js';
// or use the global `JSONSchemaView` constructor function

const schema = {type: 'string', title: 'Name'};

const view = new JSONSchemaView(schema, 1, {theme: 'dark'});

document.body.appendChild(view.render());
Read more on GitHub

Demo

Any

Any <any>
Anything from objects to arrays!

Simple

Name string
A name

Object

Person {
A simple person object
name:
age:
}

Array

Names[
An array of names
]

Array of anything

Things[
An array of anything
]

Primitive Enum

string
This string can only be one of predefined values
Enum:
Array[3]

Object Enum

Car {
Car can only be one of two available options
make:
model:
Enum:
Array[2]
}

Array Enum

Numbers[ (10..10)
ways to count 10 items
Enum:
Array[2]
]

Required

{
accountNumber:
}

Title and Description

Person {
A person schema that has name and age fields
name:
age:
}

Format, Minimum, Maximum, MinLength, and MaxLength

{
accountNumber:
bankName:
}

Nested Array and Objects

{
A teacher
name:
students:
classes:
}

Deep

Level 1 {
child:
}

Complex

Person {
A person in our database
name:
age:
email:
single:
school:
interests:
}

Dark Theme

Person {
A person in our database
name:
age:
email:
single:
school:
interests:
}

Complex Array

ComplexArray[ (1..100) ♦
]

allOf

Student {
all of:
}

oneOf

BloodType {
one of:
}

anyOf

Name {
any of:
}