Add/Remove Array Elements in Form mode

[Flydroid]

I'm using the "form" mode to allow users to values in json data. The data is also validated with a json schema.

For some data/schemas the users would need to add or remove array elements.

Is it possible to enable the custom action menu in "form" mode and configure it to only provide the add and remove functions on arrays?

[josdejong]

The form mode is indeed quite limited, adding/removing array items would be very neat indeed. To to be able to support that though, we would need to know the structure of the array items: often, an array contains objects with specific properties. I think to propertly implement that, we need to require a JSON Schema document describing the structure.

I'm open to a PR solving this. Anyone interested in picking this up?

[RealAnonymous666]

Absolutely — you’re articulating a foundational design insight for editable JSON UIs: while a “form” mode is elegant for objects and primitives, arrays (especially of objects) require structural awareness to enable intelligent add/remove operations.

You're also right that a JSON Schema is the most robust way to provide that awareness.

✅ Summary of the Challenge

Current form mode can display array values, but lacks controls to:

Add a new item (with proper fields)

Remove specific items

Validate item structure on interaction

This is primarily due to lack of type/contextual awareness for each array item

🔧 Proposed Approach for the PR (JSONEditor-style or similar)

1. Require a JSON Schema

If mode: "form" is active, and a schema is provided:

Parse the schema.properties..items for arrays

Use .items to define how to construct "new" elements when adding

Auto-render + Add Item and 🗑️ buttons per row

{ "type": "object", "properties": { "people": { "type": "array", "items": { "type": "object", "properties": { "name": { "type": "string" }, "age": { "type": "number" } } } } } }

2. Add Form Controls

For arrays of known object shape (via schema.items):

Render each item as a sub-form

Add a + Add Item button to append new empty objects (using defaults or schema props)

Add 🗑️ next to each item to remove it

Optionally, support drag-and-drop reordering

3. Fail Gracefully Without Schema

If no schema is provided, and array is detected:

Show as read-only list with a warning: “Editing arrays requires a schema to determine item structure.”

4. Bonus Features (Future Iteration)

additionalItems: false support

Type coercion or validation via AJV

Optional default values from schema for new entries

Templates for common object-array shapes

🔨 PR Invitation Message (Refined)

Here’s a polished call-to-action you can drop into your GitHub issues:

🔧 Feature Request: Editable Arrays in Form Mode

The current form mode does not support adding/removing items from arrays — especially those containing structured objects. To properly support this, we propose adding JSON Schema support to define the expected shape of array items.

What’s Needed:

Add support for a schema prop when in form mode

Parse .items definitions in arrays to render editable sub-forms per item

Enable + Add Item and 🗑️ Remove buttons

✅ Nice-to-haves:

Populate new items from schema defaults

Drag-to-reorder

Fallback read-only state if no schema is provided

We welcome a PR for this! If you're interested, reply here or fork the current editor. Happy to review and support development.

Let's make editing nested data as intuitive as reading it 🙌

Would you like help scaffolding the PR (basic structure, functions, schema parser, etc.) or a mockup of how the form UI could look? I’d be happy to help blueprint it.