I think I am overthinking this again, but I can not come up with a clean solution to a “simple” problem: Tiddler data is a JSON tiddler holding an object. Tiddler Mask shows all those properties in a nice table and there is a way to edit those properties.
I am pretty sure there is a better solution for this since those redundant buttons hurt my soul. I am not bound to the way this edit procedure works. However I want fields to not be editable by default (i.e. all are edit-text by default) to prevent accidental typos from sneaking in. So a way to “activate” the edit mode for a cell would be ideal.
What I have cooked up so far does work somewhat but the problem is that clicking the “Set” button whilst the “Key” field is empty completely wipes the data tiddler which is not quite the intended behaviour to say the least 
Tiddler “data”:
{
"foo": "hello",
"bar": "baz"
}
Tiddler Mask:
<table>
<tr><th>Key</th><th>Value</th></tr>
<$list filter="[[data]indexes[]]" variable="prop">
<tr>
<td><<prop>></td>
<td><$view tiddler="data" index=<<prop>> /></td>
</tr>
</$list>
<$set name="temptiddler" value=<<qualify $:/temp >> >
<tr>
<td>
<$edit-text tiddler=<<temptiddler>> field="key" placeholder="Key" />
</td>
<td>
<$edit-text tiddler=<<temptiddler>> field="value" placeholder="Value" />
<$reveal type="nomatch" stateTitle=<<temptiddler>> stateField="value" text="" >
<$button>
Set
<$set name="key" tiddler=<<temptiddler>> field="key">
<$set name="value" tiddler=<<temptiddler>> field="value">
<$action-setfield $tiddler="data" $index=<<key>> $value=<<value>> />
</$set>
</$set>
<$action-deletetiddler $tiddler=<<temptiddler>> />
</$button>
</$reveal>
<$reveal type="match" stateTitle=<<temptiddler>> stateField="value" text="" >
<$button>
Remove
<$set name="key" tiddler=<<temptiddler>> field="key">
<$action-setfield $tiddler="data" $index=<<key>> />
</$set>
<$action-deletetiddler $tiddler=<<temptiddler>> />
</$button>
</$reveal>
</td>
</tr>
</$set>
</table>
