json-editor

This is a solution for create forms from JSON source automatically (with some minor constraints, like the enum values)

Demo

https://codepen.io/iroshan/pen/ReZxZy

API

new JSONEditor(Element container) // set the root element for the editor
setTitle(String title) // set the title of the editor
setJSON(JSON json) // set JSON for edit
getJSON() // get edited JSON

Example

HTML:

<div id="json-container"></div>

CSS:

/* THEME */

.json-editor-container {
	transition   : all 0.5s ease-in-out;
	border       : none;
	border-left  : 1px solid rgba(255, 255, 255, 0.2);
	background   : #282c34;
	margin       : 0;
	padding      : 3px;
	padding-left : 15px;
	max-height   : 10000px;
}

.json-editor-container:last-child {
	border-bottom : 1px solid rgba(255, 255, 255, 0.2);
	border-radius : 0 0 0 5px;
}

.json-editor-container.root {
	padding       : 3px;
	margin        : 0;
	border        : none;
	border-radius : 5px;
}

.json-editor-container.root > .json-editor-container {
	border-left  : none;
	padding-left : 3px;
}

.json-editor-container.root > .json-editor-container:last-child {
	border-bottom : none;
}

.json-editor-container.hidden-property {
	opacity    : 0.3;
	max-height : 40px;
}

.json-editor-container input[type="checkbox"] {
	vertical-align : top;
	margin-top     : 13px;
	margin-left    : 5px;
}

.json-editor-container label {
	color          : #d19a66;
	height         : 22px;
	vertical-align : top;
	margin-top     : 13px;
	white-space    : nowrap;
	overflow       : hidden;
	text-overflow  : ellipsis;
	width          : calc(30% - 25px);
}

.json-editor-container.root > label {
	width : calc(100% - 10px);
}

.json-editor-container input[type="text"],
.json-editor-container select {
	vertical-align : top;
	width          : calc(70% - 25px);
	border-radius  : 5px;
	padding        : 5px;
	height         : 20px;
	background     : rgba(255, 255, 255, 0.8);
}

.json-editor-container select {
	height : 30px;
	width  : calc(70% - 15px);
}

.json-editor-container input[type="checkbox"]:focus,
.json-editor-container input[type="text"]:focus,
.json-editor-container select:focus {
	background : rgba(255, 255, 255, 0.9);
	box-shadow : 0 0 4px 4px rgba(255, 255, 255, 0.2);
}

.json-editor-container label ~ input[type="checkbox"]:after {
  padding-left : 20px;
  color        : rgba(255, 255, 255, 0.5);
  content      : "false";
}

.json-editor-container label ~ input[type="checkbox"]:checked:after {
  content : "true";
  color   : white;
}

@media screen and (max-width: 600px) {
	.json-editor-container {
		margin       : 1px;
		padding      : 1px;
		padding-left : 5px;
	}
}

Javascript:

var json = {
  object: {
    first: 0,
    second: 1
  },
  number: 0.1,
  string: "hello",
  boolean: true,
  booleanEnum: { // enum
    type: "enum",
    values: [
      "True",
      "False"
    ]
  },
  enum: { // special type
    type: "enum",
    values: [
      "A",
      "B",
      "C"
    ]
  },
  person: {
    name: "Adam",
    age: 35,
    children: [
      {
        name: "Adam",
        age: 4
      },
      {
        name: "Eve",
        age: 3
      }
    ]
  },
  array: [
    0,
    1,
    2
  ]
};
// HOW TO USE
var container = document.querySelector("#json-container");
var editor = new JSONEditor(container);
editor.setTitle("Edit JSON");
editor.setJSON(json);
container.addEventListener("change", function() {
  console.clear();
  console.log(editor.getJSON());
});