I have an application where users can setup workflow steps. The workflow setup is a editable table with a field for configuration. The issue I have is with this field. This field has some JSON snippet. And, since it is in a table column the user doesn't see the full information and the edit area is very small.

Any suggestions on how to build a better UI where the information in the configuration field is visible for the user and there is enough space to edit. enter image description here

  • 1
    what do you have now? please post a mockup so we can visualize it
    – Devin
    Nov 29, 2023 at 17:03

1 Answer 1


Open a modal to paste or edit JSON would be one of the options, instead of doing it inline.

Firebase has a nice inline editing workflow – it's material, so they add a large input on top of the field, it's elevated 1 lvl above previous content, and has an explicit Save button, despite not being presented as a modal component (no scrim, etc).

Firebase inline modal-ish example

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.