Feature Request: JSON Editor

[phoenixtechnam]

Good day,

I often use JSON datasets to build page sections, e.g. implementing lists using collections and complex global variables.
For ease of usage und to keep syntax correct even in larger datasets, I use this JSON editor:

https://github.com/josdejong/jsoneditor

It would be great to have that inside the Webstudio editor as well, I believe it would help especially non-programmers to create and maintain JSON datasets for global variables and collections, using a convenient UI instead of a simple textarea box.

The above mentioned project also has a successor, but I personally find it too over-loaded with features.

https://github.com/josdejong/svelte-jsoneditor

[TrySound]

I think say some "table" representation of json data would be more user friendly. Maintaining more complex data is too hard even with such editor.

[kof]

Thought about this too. JSON editor is a UX nightmare. Not much better than just editing text, in many instances worse. I agree with @TrySound table-based editor will be easier to use as UI.

I think fundamental UX problem comes from trying to represent deep nesting in one view. There must be a better way to do it. I could imagine a table can have a cell that links to another table, but when you open it, its not showed inline, but opens that other table.

[kof]

Another one for reference https://github.com/cloydlau/json-editor-vue

[phoenixtechnam]

Don't really understand your arguments.
The editor I mentioned makes it easy to create and maintain simple and complex datasets with features like duplication of objects, re-sorting of array items and collapse/expand views. I wouldn't call it a "UX Nightmare" and definitely better than manually editing JSON text. Also note that one can switch between text view and tree view. So you can keep the text view as the default option when opening an expression.

By the way, congrats to your great efforts so far to build an open-source and (potentially) self-hosted UI-based page builder.
I am currently evaluating options to move away from our home-grown code-based editor, particularly looking for open-source solutions with AI support for web design agencies. We are mostly building static websites.

Having long JSON arrays and nested objects is an absolute neccessity for my work and very difficult to maintain in a simple textbox.

[kof]

I am pretty sure if you talk to some designers, they will not like to work in that json editor. Its just alien concept to them. At the same time devs won't like it too, because they will prefer code editor with good autocomplete and linter that shows errors well.