🧙‍♂️📝 JSON-LD editor

Load and edit JSON-LD RDF metadata files in a user-friendly web interface, with autocomplete based on the classes and properties from the ontologies loaded

Built with TypeScript, React, and Material-UI.

Deployed as a static website on GitHub Pages.

Access 👩‍💻

Access the website at https://vemonet.github.io/json-ld-editor-react 🔗

A few URL parameters can be provided to automate some actions:

• Provide the JSON-LD file to load with edit=https://my-jsonld

  • e.g. https://vemonet.github.io/json-ld-editor-react?edit=https://raw.githubusercontent.com/w3c/csvw/gh-pages/tests%2Ftest086-metadata.json
  • It will automatically load the JSON-LD available at this URL, and the ontology provided in @context.
  • It also deactivates the possibility to upload a new JSON-LD file, so that you can send the URL to anyone to faithfully fill this metadata file! 📬

• Disable adding or removing objects in the form with toysrus=closed

  • e.g. https://vemonet.github.io/json-ld-editor-react?toysrus=closed
  • It helps to ensure the people filling the form will comply with a given structure

Combined: https://vemonet.github.io/json-ld-editor-react?edit=https://raw.githubusercontent.com/w3c/csvw/gh-pages/tests%2Ftest086-metadata.json&toysrus=closed

Metadata examples 📝

Here are a few examples of metadata templates to load from JSON-LD files URL:

• Edit Schema.org Dataset metadata (default): https://vemonet.github.io/json-ld-editor-react?edit=https://raw.githubusercontent.com/kodymoodley/fair-metadata-html-page-generator/main/testdata/inputdata/test.jsonld
• Edit CSV on the Web metadata: https://vemonet.github.io/json-ld-editor-react?edit=https://raw.githubusercontent.com/w3c/csvw/gh-pages/tests%2Ftest086-metadata.json

Tested ontologies ✔️

The following ontologies has been tested to be properly loaded when provided in @context

• Schema.org - from JSON-LD
  • https://schema.org/
• CSV on the Web (CSVW) - from JSON-LD
  • http://www.w3.org/ns/csvw
• Semantic Science ontology (SIO) - from RDF/XML
  • https://raw.githubusercontent.com/MaastrichtU-IDS/semanticscience/master/ontology/sio.owl
• BioLink model - from Turtle
  • https://raw.githubusercontent.com/biolink/biolink-model/master/biolink-model.ttl

Ontologies are converted from RDF formats to JSON-LD using rdflib-js

Please report if an ontology does not load properly by creating an issue on GitHub.

Known issues ⚠️

• It is not possible to resolve HTTP URLs from HTTPS (triggers a mixed active content blocked error). Deploying to github.io/maastrichtu-ids forces redirect to HTTPS
  • I currently rewrite ontologies URL using http:// to https:// before downloading them to work around this issue
  • It can be solved by redirecting GitHub Pages a custom URL, such as http://wizard.semanticscience.org, and accessing via HTTP

Run in development 🏗️

Requirements: npm and yarn installed.

Clone the repository, and get in the folder:

git clone https://github.com/vemonet/json-ld-editor-react 
cd json-ld-editor-react

Install dependencies 📥

yarn

Web app will run on http://localhost:19006 🏃

yarn dev

The website should reload automatically at each changes to the code 🔃

Upgrade the packages versions in yarn.lock ⏫️

yarn upgrade

Run in production 🛩️

This website is automatically deployed by a GitHub Actions worklow to GitHub Pages at https://vemonet.github.io/json-ld-editor-react

You can build locally in the /web-build folder, and serve on http://localhost:5000

yarn build
yarn serve

Or run directly using Docker 🐳 (requires docker installed)

docker-compose up

Checkout the docker-compose.yml file to see how we run the Docker image ⛵️

Contribute 🤝

Contributions are welcome! See the guidelines to contribute.

See also 👀

Resources to help improving the wizard design:

• Generating RDF from Tabular Data on the Web - W3C recommendation (2015)
• Comparing web forms approaches - unformal article
  • Users seems to prefers having everything in the same page, than having multiple pages with Next / Previous (2020)