Pen Settings

HTML

CSS

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URL's added here will be added as <link>s in order, and before the CSS in the editor. You can use the CSS from another Pen by using it's URL and the proper URL extention.

+ add another resource

JavaScript

Babel includes JSX processing.

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

+ add another resource

Packages

Add Packages

Search for and use JavaScript packages from npm here. By selecting a package, an import statement will be added to the top of the JavaScript editor for this package.

Behavior

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

Format on Save

If enabled, your code will be formatted when you actively save your Pen. Note: your code becomes un-folded during formatting.

Editor Settings

Code Indentation

Want to change your Syntax Highlighting theme, Fonts and more?

Visit your global Editor Settings.

HTML

              
                <div class="container-fluid">
	<div class="row g-0">
		<div class="col-md-8 m-auto">
			<form class="border-top border-3 border-dark shadow p-3 my-3">
				<div id="json-creator"></div>
				<button id="json-new" class="btn btn-sm btn-primary">
					<i class="bi-plus-square me-1"></i>
					Add
				</button>

				<div class="my-4">
					<label for="output" class="form-label"><small>Hidden data input</small></label>
					<input type="text" class="form-control " name="output" id="json-output" value="" disabled style="user-select:all" />
				</div>
			</form>
		</div>
	</div>
</div>
              
            
!

CSS

              
                #json-creator input,
#json-creator select,
#json-creator button,
#json-creator textarea {
	background-position: right 8px center;
	background-repeat: no-repeat;
	box-shadow: rgba(225, 228, 232, 0.2) 0px 1px 0px 0px inset;
	box-sizing: border-box;
	font: inherit;
	line-height: 20px;
	margin: 0px;
	margin-right: 5px;
	max-width: 100%;
	outline: none;
	overflow: visible;
	padding: 2px 5px;
	vertical-align: middle;
	word-wrap: break-word;
	border: 1px solid var(--bs-light);
	background: var(--bs-white);
	color: var(--bs-dark);
}

@media (max-width: 600px) {
	#json-creator > .key {
		flex-direction: column !important;
		justify-content: center !important;
		margin: 0.5rem auto;
		background: var(--bs-white) !important;
		border: 1px solid var(--bs-light) !important;
	}
	#json-creator > .key input,
	#json-creator > .key select {
		width: 100%;
		margin: 0.3rem auto;
		max-height: 2rem;
		background: var(--bs-light);
	}
}

#json-creator input:focus {
	box-shadow: var(--bs-light) 0px 0px 5px 0px inset;
	outline: none;
}
#json-creator input[type="color"] {
	height: 1.9rem;
}
#json-creator input.input-checkbox,
#json-creator input.input-radio {
	margin-top: 0.5rem;
}

#json-creator input,
#json-creator select {
	width: calc(100% / 2 - 2rem);
}
#json-creator button {
	border-radius: var(--radius);
	background: var(--bs-danger);
	border: 1px solid var(--bs-danger);
	color: var(--bs-light);
	padding: 0;
	margin: 0;
	min-width: 1.9rem;
	min-height: 1.9rem;
}
#json-creator .key {
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	overflow: hidden;
	background: var(--bs-white);
	border: 2px dashed var(--bs-light);
	margin: 0.3rem auto;
	padding: 0.4rem;
}
#json-creator .key span {
	margin: 0;
	padding: 0;
	user-select: none;
	display: block;
	text-align: center;
	margin-right: 0.2rem;
	cursor: pointer;
	min-width: 1.9rem;
	min-height: 1.9rem;
	line-height: 1.9rem;
	position: relative;
	overflow: hidden;
	background: var(--bs-light);
	border: 1px solid var(--bs-light);
	color: var(--bs-dark);
}

.sortable-chosen,
.highlight {
	background: var(--bs-light) !important;
	border-color: var(--bs-danger) !important;
	transition: all 500ms ease;
}

              
            
!

JS

              
                // --- Short id
const _id = (el) => document.getElementById(el);
// --- Short selector
const _ = (el) => document.querySelector(el);
// --- html id elements
const jsonNew = _id("json-new");
const jsonCreator = _id("json-creator");
const jsonOutput = _id("json-output");

// --- Data demo
let data =
	'[{"id":"3hkm4r","key":"danger","type":"color","value":"#ff9999"},{"id":"ntptf1","key":"primary","type":"color","value":"#73b9f7"},{"id":"gms745","key":"green","type":"color","value":"#59f3b8"},{"id":"m4qllp","key":"yellow","type":"color","value":"#ffec70"}]';

/**
 * Drag and drop creator
 *
 * By Moncho Varela (nakome)
 */
const dragAndDropCreator = {
	/**
	 *  Create element
	 *
	 * @param string element
	 * @param string where
	 * @param array args
	 *
	 * @return string result
	 */
	createElement(element, where, args) {
		let d = document.createElement(element);
		if (args) for (const [k, v] of Object.entries(args)) d[k] = v;
		where.appendChild(d);
		return d;
	},

	/**
	 *  Check wich value is
	 *
	 * @return string result
	 */
	whichValueIs(key) {
		let result = key ? key : "text";
		if (key === "date") {
			result = "date";
		} else if (key === "color") {
			result = "color";
		} else if (key === "month") {
			result = "month";
		} else if (key === "number") {
			result = "number";
		} else if (key === "time") {
			result = "time";
		} else if (key === "week") {
			result = "week";
		} else if (key === "password") {
			result = "password";
		} else if (key === "email") {
			result = "email";
		} else if (key === "web") {
			result = "web";
		} else if (key === "url") {
			result = "url";
		} else if (key === "datetime-local") {
			result = "datetime-local";
		}
		return result;
	},

	/**
	 * Export Objects
	 *
	 * @return array objs;
	 */
	exportObjects() {
		let selectors = document.querySelectorAll(".key"),
			arr = Array.prototype.slice.call(selectors),
			objs = [];
		arr.map(function (item) {
			if (typeof item.children[1] !== "undefined") {
				objs.push({
					id: dragAndDropCreator.uid(6),
					key: item.children[1].value,
					type: item.children[2].value,
					value: item.children[3].value
				});
			}
		});
		return objs;
	},

	/**
	 * Generate unique id
	 * @param number len
	 */
	uid(len) {
		let IDX = 36,
			HEX = "";
		while (IDX--) HEX += IDX.toString(36);
		let str = "",
			num = len || 11;
		while (num--) str += HEX[(Math.random() * 36) | 0];
		return str;
	},
	/**
	 * Import objects
	 *
	 * @param string element
	 * @param array data
	 */
	sendJsonOutput: async () => {
		jsonOutput.value = await JSON.stringify(dragAndDropCreator.exportObjects());
	},

	/**
	 * Import objects
	 *
	 * @param string element
	 * @param array data
	 */
	importObjects: async (elem, data) => {
		let arr = Array.prototype.slice.call(data);
		await arr.map(function (item) {
			dragAndDropCreator.createList(elem, item.key, item.type, item.value);
		});
		dragAndDropCreator.sendJsonOutput();
	},

	/**
	 * Create list
	 *
	 * @param string wherePlaceElement
	 * @param string key
	 * @param string typeOfValue
	 * @param string val
	 */
	createList(wherePlaceElement, key, typeOfValue, val) {
		// group container
		let dragAndDropContainer = dragAndDropCreator.createElement(
			"div",
			wherePlaceElement,
			{
				className: "key",
				draggable: true
			}
		);

		// drag and drop element
		let bDrag = dragAndDropCreator.createElement("span", dragAndDropContainer, {
			innerHTML: "☰",
			className: "drag"
		});

		// init form vars
		let customKey, inputKey, selectType, inputValue;

		// the key element
		inputKey = dragAndDropCreator.createElement("input", dragAndDropContainer, {
			type: "text",
			className: "input-key",
			value: key,
			onchange: () => dragAndDropCreator.sendJsonOutput()
		});

		// the select element
		selectType = dragAndDropCreator.createElement(
			"select",
			dragAndDropContainer,
			{
				className: "input-select",
				onchange: function (evt) {
					inputValue.type = dragAndDropCreator.whichValueIs(evt.target.value);
					dragAndDropCreator.sendJsonOutput();
				}
			}
		);

		// the value element
		inputValue = dragAndDropCreator.createElement("input", dragAndDropContainer, {
			type: dragAndDropCreator.whichValueIs(typeOfValue),
			className: "input-value",
			value: val,
			onchange: () => dragAndDropCreator.sendJsonOutput()
		});

		// list of type elements
		let array = [
			"text",
			"color",
			"date",
			"month",
			"number",
			"textarea",
			"time",
			"week",
			"password",
			"email",
			"url",
			"datetime-local"
		];
		for (let i = 0; i < array.length; i++) {
			let options = dragAndDropCreator.createElement("option", selectType, {
				selected: array[i] === typeOfValue ? true : false,
				value: array[i],
				text: array[i]
			});
		}

		// remove button
		let bClose = dragAndDropCreator.createElement(
			"button",
			dragAndDropContainer,
			{
				className: "btn btn-danger",
				innerHTML: "&times;",
				onclick: function () {
					this.parentElement.remove();
					dragAndDropCreator.sendJsonOutput();
				}
			}
		);
	}
};

// --- Add new dragable element
jsonNew.addEventListener(
	"click",
	(evt) => {
		evt.preventDefault();
		dragAndDropCreator.createList(jsonCreator, "name", "text", "hello");
		dragAndDropCreator.sendJsonOutput();
	},
	false
);

// --- Import data and init Sortable
dragAndDropCreator.importObjects(jsonCreator, JSON.parse(data)).then(() => {
	Sortable.create(jsonCreator, {
		handle: ".drag",
		animation: 300,
		onUpdate: () => dragAndDropCreator.sendJsonOutput()
	});
});

              
            
!
999px

Console