View component for traversing/searching in a JSON Schema

React JSON Schema Inspector

JSON Schema Inspector component (ReactJS).

Introducing a component for viewing/traversing (complex) JSON Schemas for the sake of documentation and potentially assisting users of a DSL in finding particular information in a custom data model.

View Demo View Demo2

Usage

Installation from NPM

npm i react-jsonschema-inspector

React Component Props

Prop	Description
`schemas` (required)	Object: keys will be displayed in the root column, the values are expected to be independent JSON Schema definitions (compatible to Draft 4, 6 or 7)
`referenceSchemas`	Array of objects: the entries are expected to be JSON Schema definitions with an absolute URI as `$id`/`id` (compatible to Draft 4, 6 or 7). These schemas will not be shown on the root column, but are used to resolve URI `$ref`erences in any of the displayed `schemas` or in another entry of the `referenceSchemas`
`defaultSelectedItems`	Array of strings: each referring to the name of the selected item in the respective column (i.e. the first entry in this array should match one key in the `schemas` object)
`onSelect`	Function: call-back being invoked after the selection changed. Receives two parameters: (1) the selection - as per the `defaultSelectedItems`, (2) an object containing the "columnData" - the full render information for all visible columns
`breadcrumbs`	Object: enabling the definition of options for the breadcrumbs feature in the footer (can be disabled by setting to `null`)
`breadcrumbs.prefix`	String: to be shown in front of the root selection (e.g. "//" or "./")
`breadcrumbs.separator`	String: to be shown in front of any non-root selection (e.g. "." or "/")
`breadcrumbs.arrayItemAccessor`	String: to be appended for any non-trailing selection that is an array (e.g. "[0]" or ".get(0)")
`breadcrumbs.preventNavigation`	Boolean: set to `true` in order to turn-off the default behaviour of discarding any following selections when double-clicking on a breadcrumbs item
`searchOptions`	Object: enabling the definition of options for the search/filter feature in the header (is disabled by default) – either `searchOptions.fields` or `searchOptions.filterBy` needs to be specified to enable it. the component itself will take care of looking-up sub-schemas (e.g. in `properties`) and also respects `$ref`-erences and has no problem with circular references.
`searchOptions.fields`	Array of strings: each referring to the name of a text field in a JSON Schema (e.g. `["title", "description"]`) in which to search/filter – this applies a case-insensitive contains() check on each of the given fields
`searchOptions.filterBy`	Function: overrides the default search logic based on `searchOptions.fields`. Input is a raw JSON Schema (i.e. as plain object), output is expected to be a `boolean` indicating whether an immediate match was found
`searchOptions.inputPlaceholder`	String: for setting the input hint the search fields. This defaults to `"Search"`.
`searchOptions.debounceWait`	Number indicating the delay in milliseconds between the last change to the search term being entered and it actually being applied. This defaults to `200` but may be increased when used with exceptionally large schemas and you experience performance issues. Please refer to the documentation on `lodash.debounce`.
`searchOptions.debounceMaxWait`	Number indicating the maximum delay in milliseconds after the search term was changed. This defaults to `500`. Please refer to the documentation on `lodash.debounce`.
`renderItemContent`	Function: custom render function for name of single property/sub-schema in a column. Receives one parameter: object with the following properties: "name", "hasNestedItems", "selected", "schema"
`renderSelectionDetails`	Function: custom render function for the "Details" block on the right for the single property/sub-schema being selected. Receives one parameter: object with the following properties: "itemSchema", "columnData", "selectionColumnIndex"
`renderEmptyDetails`	Function: custom render function for the "Details" block on the right if nothing is selected yet. Receives one parameter, which is an object with the "rootColumnSchemas" property, which holds the array of top-level schemas (as derived from the `schemas` prop and augmented by any given `referenceSchemas`)

Compatibility

This component is compatible with JSON Schema Draft 7.
It is also backwards-compatible with Drafts 4 and 6.

Structural Properties

Property	Support	Description
`$schema`	-	ignored (assumed to be compatible to JSON Schema Draft 4, 6 or 7)
`$id`	Yes	allowed as sub-schema reference in `$ref` (as per Draft 6 and 7), but not displayed; ignored if specified anywhere but in the root schema or inside an entry in `definitions`
`id`	Yes	allowed as sub-schema reference in `$ref` (as per Draft 4), but not displayed; ignored if specified anywhere but in the root schema or inside an entry in `definitions` or if `$id` is present
`$ref`	Yes	used to look-up re-usable sub-schemas transparently (i.e. not displayed), supporting: `#` or the root `$id`/`id` value as root schema references, `#/definitions/<name-of-definition>` or the respective `$id`/`id` value from within the `definitions` for sub-schemas, absolute URIs are supported as long as those separate schemas are provided via the `referenceSchemas` prop (and their repesitve root `$id`/`id` matches the given `$ref`) absolute URIs ending with `#/definitions/<name-of-definition>` are also provided via the `referenceSchemas` prop
`definitions`	Yes	used to provide re-usable sub-schemas that are being referenced via `$ref` (only in the respective root schemas)
`properties`	Yes	used to populate the whole structure to be traversed
`required`	Yes	used to add empty `properties` to structure if they are not also mentioned in `properties` directly
`additionalProperties`	-	ignored
`patternProperties`	-	ignored
`items`	Partially	used to look-up `properties` of single kind of items in an array; however if `items` is an array of multiple sub-schemas they are being ignored
`additionalItems`	Yes	used to look-up `properties` of kind of items in an array if `ìtems` is not present or defined as an array (which is not supported itself), otherwise `additionalItems` are being ignored
`allOf`	Yes	used to combine sub-schemas transparently
`anyOf`	-	ignored
`oneOf`	-	ignored
`not`	-	ignored
`contains`	-	ignored
`dependencies`	-	ignored
`if`	-	ignored
`then`	-	ignored
`else`	-	ignored

Non-Structural Properties (shown in default "Details" form)

Property	Support	Comment
`title`	Yes
`description`	Yes
`examples`	Yes	without further formatting
`default`	Yes	without further formatting
`type`	Yes
`enum`	Yes	without further formatting
`const`	Yes	without further formatting
`minLength`	Yes
`maxLength`	Yes
`pattern`	Yes
`format`	Yes	without further explanations
`multipleOf`	Yes
`minimum`	Yes
`exclusiveMinimum`	Yes	supported both as `number` per Draft 6 and 7 and `boolean` per Draft 4
`maximum`	Yes
`exclusiveMaximum`	Yes	supported both as `number` per Draft 6 and 7 and `boolean` per Draft 4
`required`	Yes	not on the individual items per default
`minItems`	Yes
`maxItems`	Yes
`uniqueItems`	Yes
`propertyNames`	-	ignored
`minProperties`	-	ignored
`maxProperties`	-	ignored

Ideas

support oneOf (if there is a nice/consistent way to do so)
support anyOf (if there is a nice/consistent way to do so)