json to css vars

index.tsx

import { useRef, useEffect, useState } from 'preact/hooks';

export function App() {
  const [keys, setKeys] = useState<string[]>([]);
  const [obj, setObj] = useState<any>();

  return (
    <>
      <textarea
        onInput={(ev) => {
          const vars = JSON.parse(ev.currentTarget.value);
          setObj(vars);
          setKeys((keyof vars));
        }}
      />
      <div style={{ fontFamily: 'monospace' }}>
        * &#123; <br />
        {keys.map((k) => (
          <>
            <span>
              --{k}: {obj[k]};
            </span>{' '}
            <br />
          </>
        ))}
        &#125;
      </div>
    </>
  );
}