# Adding Components Automatically **URL:** \ **Category:** Elements\ **Created:** [May 3, 2025, 6:50pm UTC](https://forums.realmacsoftware.com/t/adding-components-automatically/47386 "2025-05-03T18:50:20Z")\ **Posts on this page:** 9\ **Page:** 1
**Author:** ![HalGumbert](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/halgumbert/32/28819_2.png) [@HalGumbert](https://forums.realmacsoftware.com/u/HalGumbert)\ **Post date:** [May 3, 2025, 6:50pm UTC](https://forums.realmacsoftware.com/t/adding-components-automatically/47386/1 "2025-05-03T18:50:20Z")
Is there a way to add [elements](https://elementsapp.io/) to a container with different attributes in an automated way? I want to create database forms using Custom Components but not via the GUI. Once the components are placed, I’d use the GUI. Ideally, I’d create some javascript with an array of components with Component Name, Table Name, Column Name, etc. Then [Elements](https://elementsapp.io/) could use the array add the Components to a Container in the order defined in the array. Once placed, I’d manually organize the Container… Is this possible? ---
**Author:** ![dan](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/dan/32/28516_2.png) [@dan](https://forums.realmacsoftware.com/u/dan)\ **Post date:** [May 4, 2025, 2:47pm UTC](https://forums.realmacsoftware.com/t/adding-components-automatically/47386/2 "2025-05-04T14:47:05Z")
Hmm, I don’t think there’s a way to currently automate this… But, I’m wondering what you’re actually trying to do? It might be better to build a single component to take in your data and add controls in the component inspector to manage it. If you could give us more details, I’m sure we could work with you to find a solution 😊 ---
**Author:** ![HalGumbert](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/halgumbert/32/28819_2.png) [@HalGumbert](https://forums.realmacsoftware.com/u/HalGumbert)\ **Post date:** [May 4, 2025, 3:47pm UTC](https://forums.realmacsoftware.com/t/adding-components-automatically/47386/3 "2025-05-04T15:47:36Z")
I’d like the benefits of the [Elements](https://elementsapp.io/) GUI, but I don’t look forward to adding database labels and fields manually. I create database-driven web apps for small biz that are not static sites but more of a List Detail interface where you click on a Record in the List and it populates fields in the Detail. The pic at the bottom shows some of the Contacts Module. I created a proof of concept Custom Component with some attibutes: ![image](https://europe1.discourse-cdn.com/flex005/uploads/realmacsoftware1/original/3X/3/e/3ea38a86cdc4352b6b6ee730726630e474d7713e.png) Instead of dragging and manually setting a Component for each Column from the Table, I’d like to create a JSON array of Components with their names and property values and then ask [Elements](https://elementsapp.io/) to add them. That’d be huge for automating. I could use my SQL Table Schema to create the JSON sorted in the correct order and plop them into the GUI in no time! Just that would rock, but being able to create a hierarchy would be next level. Imagine having JSON that defines a Card… Start with a Container with a sub Container for a Title, a sub Container for the Body, then place Custom Components in the Body. You’d end up with a Cards like in my pic below without dragging and dropping everything. List Detail Interface ![image](https://europe1.discourse-cdn.com/flex005/uploads/realmacsoftware1/original/3X/f/6/f687e7ff31b908a85c194a16d3aad27141b7b68b.jpeg) ---
**Author:** ![ben](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/ben/32/28488_2.png) [@ben](https://forums.realmacsoftware.com/u/ben)\ **Post date:** [May 5, 2025, 11:31am UTC](https://forums.realmacsoftware.com/t/adding-components-automatically/47386/4 "2025-05-05T11:31:09Z")
> [@HalGumbert](#): > > I create database-driven web apps for small biz that are not static sites but more of a List Detail interface where you click on a Record in the List and it populates fields in the Detail. The pic at the bottom shows some of the Contacts Module. So if I understand you correctly, you want to loop over a list of items (people for example), and when each item is clicked, display more details on that item. Is that correct? > [@HalGumbert](#): > > I’d like to create a JSON array of Components with their names and property values and then ask [Elements](https://elementsapp.io/) to add them. I think the way to tackle this would be to create a single component in [Elements](https://elementsapp.io/) that loops over the data array — perhaps you have an API endpoint to get the JSON? This way you could design a card using the components in [Elements](https://elementsapp.io/), and feed it data from each item dynamically. There are a few different ways to achieve this, you could server side render the content with PHP (or similar) or you could render the content client-side with javascript. Am I on the right track here? If so, I can expand on this and give you more of a concrete example of how to achieve this in [Elements](https://elementsapp.io/) 🙂 ---
**Author:** ![HalGumbert](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/halgumbert/32/28819_2.png) [@HalGumbert](https://forums.realmacsoftware.com/u/HalGumbert)\ **Post date:** [May 5, 2025, 5:47pm UTC](https://forums.realmacsoftware.com/t/adding-components-automatically/47386/5 "2025-05-05T17:47:18Z")
> [@ben](#): > > So if I understand you correctly, you want to loop over a list of items (people for example), and when each item is clicked, display more details on that item. No. I want to build JSON that describes components and their attributes and have [Elements](https://elementsapp.io/) add the described components to the page in bulk. Adding 30 database inputs by hand is tedious. I want to paste json into Element and have it instantiate each component described in the JSON. Even better be able to add components to other components. I just want to automate dragging on to the page and automate setting attributes. ---
**Author:** ![ben](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/ben/32/28488_2.png) [@ben](https://forums.realmacsoftware.com/u/ben)\ **Post date:** [May 6, 2025, 7:32am UTC](https://forums.realmacsoftware.com/t/adding-components-automatically/47386/6 "2025-05-06T07:32:11Z")
> [@HalGumbert](#): > > I want to build JSON that describes components and their attributes and have [Elements](https://elementsapp.io/) add the described components to the page in bulk. OK, I think I understand what you’re asking for. At the moment, we don’t have any plans to support programmatically adding components to a page from within [Elements](https://elementsapp.io/) itself. That said, it might be worth approaching this from a different angle: Is there a reason you couldn’t dynamically render a list of components using PHP or JavaScript instead? For example, you could design a single “template” card in your project, and then use a script to fetch data from a JSON file, looping through it to generate a new card for each data entry. This way, you’re not manually adding components — you’re generating them dynamically based on your data source. Does that approach sound like it could work for you? ---
**Author:** ![HalGumbert](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/halgumbert/32/28819_2.png) [@HalGumbert](https://forums.realmacsoftware.com/u/HalGumbert)\ **Post date:** [May 6, 2025, 1:41pm UTC](https://forums.realmacsoftware.com/t/adding-components-automatically/47386/7 "2025-05-06T13:41:53Z")
That’s an interesting idea. Only issue with that is the loss of drag and drop in the GUI. Oh welll… ---
**Author:** ![ben](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/ben/32/28488_2.png) [@ben](https://forums.realmacsoftware.com/u/ben)\ **Post date:** [May 6, 2025, 2:38pm UTC](https://forums.realmacsoftware.com/t/adding-components-automatically/47386/8 "2025-05-06T14:38:36Z")
> [@HalGumbert](#): > > Only issue with that is the loss of drag and drop in the GUI. You’d still be able to drag and drop to create the template component. It’d work similar to how I had things setup in the [Blogging Preview video](https://www.youtube.com/watch?v=zeR9QPBpHbY) from a couple of weeks ago — rather than getting the data from markdown files, you’d fetch the data from a JSON file/endpoint. ---
**Author:** ![HalGumbert](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/halgumbert/32/28819_2.png) [@HalGumbert](https://forums.realmacsoftware.com/u/HalGumbert)\ **Post date:** [May 6, 2025, 3:17pm UTC](https://forums.realmacsoftware.com/t/adding-components-automatically/47386/9 "2025-05-06T15:17:52Z")
Thank you.