How to make a JSON Editor in Bubble?

Hey Guys,

I’ve got an app where users can enter JSON in a text field (the JSON is used somewhere not relevant atm). I want to convert the plain text field into a form of sorts, where the user is able to define key-value pairs, that get transformed to JSON. Something that looks like this:
image

So far, I’ve had to create KeyValue pairs in the database and I’m generating JSON through it and things are working out. But i’d like to extend functionality by adding a “raw” editor where the users can edit JSON directly in a multiline input.

The issue i edit the raw form, Im unable to update the KeyValue pairs in my database to match the updated JSON. Any clues on how I can go about this? Such that each time I update in raw mode, the KeyValue pairs get updated automatically?