react-jsonld-editor

React JSON-LD Editor

The Editor is a component providing a UI for editing a JSON-LD node object. It relies on immutable-jsonld.

Simplest possible use:

const Editor = require('react-jsonld-editor')
 
const render = props => (
  <Editor />
)

The simplest possible use is not very useful; it will display an empty JSON-LD node, and there will be no way to modify it.

To make it more useful specify some props:

• The node prop is a JSON-LD node object to begin editing; it should be an instance of JSONLDNode (from immutable-jsonld.
• The classes and properties props specify the vocabularies to use. Each of these should be an Immutable Map with URIs (as strings) for keys and JSONLDNodes for values. The JSONLDNodes should have rdfs:labels or skos:prefLabels. The JSONLDNodes in the properties Map may also have rdfs:ranges. See edit-with-lov for an example of how one might create these Maps from a stream of triples.
• Similarly, the individuals prop specifies individual resources that can serve as the objects of properties. It should also be an Immutable Map with URIs (as strings) for keys and JSONLDNodes for values. The JSONLDNodes should have rdfs:labels or skos:prefLabels.
• Finally, you can be notified of changes to the JSON-LD node by providing a callback function as the onSave prop.

Try the demo of editing a record from the Pleiades gazetteer, or check out its source. (Note that this demo is rather slow to load because it is loading quite a bit of JSON data into memory on load.)