JSON2Schema is a small WebApp running totally in your browser, that supports developers in creating a JSON Schema for the JSON Editor originally developed by Jeremy Dorn and is now available and maintained as
json-editor package in https://www.github.com/json-editor/json-editor
The corresponding NPM module
json2schema4editor (JSON to(2) Schema for(4) Editor means that the JSON schema is created for the JSON editor
Online Demo JSON2Schema
You can create from a JSON of your choice a corresponding JSON schema with one click. With for the the JSON2Schema tool with the following URL:
Copy a JSON of your choice into the JSON2Schema tool and create a raw JSON schema, that works in the JSON editor
Table of Contents generated with DocToc
- What is a JSON Schema?
- How Create a JSON Schema
- ZIP File
- Select a JSON of your choice. If your JSON contains an array, The array should contain just a single element. If the array contains more than one element, all elements are treated as
oneOfelement in the JSON schema.
- start https://niehausbert.gitlab.io/JSON2Schema in your browser and copy your JSON into the editor JSON Input
- press button create JSON Schema and change the label and descriptions for the input data. Save the JSON schema by presing the export JSON Schema button.
- press the create JSON Editor to see how your JSON editor will look like.
- under the JSON Editor you will find an export button. Save
jsoneditor_app.zipby pressing the Export JSON Editor button.
What is a JSON Schema?
A JSON Schema is a basically a file, that defines the layout of the input and chosen editor elements for each key-value pair in given JSON for the JSON Editor by Jeremy Dorn, i.e. it defines if the user of the JSON editor:
- Edit a string,
- uses a select box for different options in the graphical user interface GUI,
- select a color,
- select a data,
- increase or decrease an integer value,
How Create a JSON Schema
Define a JSON you want to use for you application.
As in example we create a privacy-friendly WebApp, that stores health related personal data WITHOUT sending the collected data to a server for commercial data harvesting (like fitness tracker). A patient measure temperature and weight on a daily basis. The collected data is stored in the mobile device in JSON file without connecting a server. The storage format of the JSON is defined by a JSON Schema. If you plugin the JSON Schema into the JSON Editor originally generated by Jeremy Dorn, then the JSON editor will provide the Graphical User Interface (GUI) to input the data. Creating a WebApp in general or using the JSON Editor does to specify does not imply that the collected data is not submitted from the mobile device to remote server. OpenSource architecture of the WebApp assures that the computer scientist can validate, if the source code contains hidden components that submit the collected JSON data to remote server. For a privacy friendly WebApp for the data mentioned above could be stored (even encrypted) on the SD-card of the mobile device or in the local storage of the browser (see AppLSAC).
Use the sample JSON in the Demo JSON2Schema WebApp to play around the Schema generation and edit the generate Schema to understand how the JSON Schema defines the Graphical User Interface of the JSON Editor.
JSON2Schema uses the following underlying ZIP
jsoneditor_app.zip to bundle the generated JSON schema with a complete JSON editor.
Remark: The following sections are designed for developers to understand the underlying principles of JSON2Schema
jsoneditor_app.zip in JSON2Schema
JSON2SchemaJ loads the compressed JSON editor in
zip/jsoneditor_app.zip with the JS library in
docs/db/files2json.js. The file
jsoneditor_app.zip as [base64 encoded string]. If
jsoneditor_app.zip for JSON Editor Generation
JSON2Schema is able to export a complete JSON editor with the generated JSON schema. This tool
create_files4json.html can be used to alter the pre-defined JSON editor for the exported jsoneditor_app.zip. If you start JSON2Schema an base64 encoded ZIP file is handled with JSZip and the generated JSON schema replaces
jsoneditor_app/schema/schema4json.js in the exported ZIP file. If you want to change the exported JSON editor (e.g. CSS and additional features) perform the following two main steps:
- download underlying ZIP file
jsoneditor_app.zipthat is used by JSON2Schema
- modify the content in the folder
jsoneditor_app/according to your requirements and constraints.
- compress the folder
jsoneditor_app/and generate a new
- download ZIP file for JSON2Schema from GitLab,
- unzip JSON2Schema-master.zip and
- start the AppLSAC by loading
JSON2Schema/docs/create_files4json.htmlin your browser and press the
Add file to JSON Dialogbutton for loading your new
- Press Create Files4JSON tool and load your new generated ZIP-file
jsoneditor_app.zipand generate a new file.
- replace the generated file
files4json.jsin the folder
JSON2Schema/docs/db/files4json.jswith your new base64 encoded ZIP-file
base64 encoded used for JSON2Schema?Why is the
A zip-file is a binary format and the privacy friendly design of an AppLSAC prevents the browser from reading and writing data silently arbitrary file from the user's hard drive.
Base64 encoding of zip-files converts a binary file into a string/text. Binary-to-text encoding and decoding algorithms allow binary data to be stored or carried across channels that support text content without loss of bytes.
Base64 encoding of zip-files is used to represent the
files2json.js that stores the Base64 encoded binary as text.
Assume the variable
base64data contains the base64 encoded zip-file. With
zip-file can be populated with base64 encoded zip-file in
var zip = ;var base64data = "AOSDIOhajSDAHIOAPSDAIS....";zip;
Remark: In the demo code above the variable
base64data does not contain a real base64 encoded
zip-file. Use the tool
LoadFile4DOMis a library that allows to load files into an application that run completely in a browser without the need to submit data to a server for processing. With this library the users are able load files into your browser application and process the data in the browser and provide the output to the user, without submitting any data to a server. Demo LoadFile4DOM
- FileSaver.js Developer Eli Grey provided the
FileSaver.jsthat is used to store created
JSCCfiles to the local filesystem.
JSCCuses the same mechanism of browsers, that allows a
- JQuery is used for the theme and standard operations in the Document Object Model (DOM) of HTML-pages. The JQuery-Themeroller was used to create a JQuery theme for JSCC.