JSFiddle - React, Tailwind, and code Playground

by Ico Dimchev

HTML

<h1>Edit the JSON Below</h1>
<pre id="pre" contenteditable>{"text-color": "green"}</pre>

CSS

:root {
   --text-color: green;
 }

 h1 {
   color: var(--text-color);
 }

 #pre {
   padding: 10px;
     border: 1px solid lightgrey;
 }

JavaScript

const $html = document.documentElement;
const $pre = document.querySelector('#pre');

$pre.addEventListener('input', () => {
	const superFakeJSON = JSON.parse($pre.innerText);
  Object.keys(superFakeJSON).forEach((key) => {
  	$html.style.setProperty(`--${key}`, `${superFakeJSON[key]}`);
   });
});