From the field notes
A form that looks like JSON
I was scrolling through my old Pens again and found a form that looks like JSON (opens in a new tab). Inputs dressed up as syntax-highlighted values, with braces and quotes around them. Not particularly useful, perhaps, but I still like the idea.
So let’s give it another go. This time you can edit the keys, change value types, and nest objects and arrays. Strings, numbers, booleans, and null are all invited. Sorry, regular expressions—you’re not JSON, so you’re not invited this time.
I’ve been recycling a few old ideas lately, mostly because I’m finally motivated to write about them. This is the last one for now, I promise.
Getting the example ready
A little room to experiment.
Click a value and start typing. Hover over a line, or tab into it, to reveal its type selector and the move and delete buttons. Objects and arrays have a button to add another entry. On touch screens, the controls stay visible. Try adding an object inside an array, then moving the whole thing up a line.
I used React for this version, but it would be trivial to port the idea to Angular or vanilla JavaScript. There’s no special React trick behind the braces.
Maybe there’s a use for dynamically rendering a form when the result just needs to be JSON, without a schema telling you what belongs where. Or maybe it’s just a fun little editor. Adding something like Zod (opens in a new tab) validation could be a nice follow-up project.