Automatically Update Field References When Grouping in Design Manager

Hi all -

I’m wondering if there are any developer plugins, extensions, or general tips to solve this common workflow issue.

Part of the workflow of creating a new module from scratch within the Design Manager includes grouping fields together in the sidebar.

bearons_0-1742913368889.png

When rearranging individual fields between groups or creating new groups out of existing fields, however, the developer must then manually update all references to those fields within the code. This tedious and mistake-prone process takes up a not insignificant amount of development time and seems something that can be automated. Before I begin considering creating a solution on my own, does anyone in the community know if there exists any tools, settings, or tricks to automatically updating field references when fields are moved between groups in the design manager?

Very much appreciate any time and support on this! Hopefully this thread will help other developers facing the same issue, too.

Hi @bearons, I hope that you are well!
Great question, thanks for asking the HubSpot Community!
I have found this similar post “Dynamically change field group name in module” where the solution from @evaldas might be of interest!
Also, I’d love to ask some of our Top Experts: Hi @sylvain_tirreau, @zach_threadint and @Bortami do you have suggestions to help @bearons, please?
Have a wonderful day and thanks so much in advance for your help!
Warmly,
Bérangère

Thanks for your reply @BérangèreL , though that post is not quite what I am looking for. I am looking to update the actual module code when a module field is rearranged, grouped, or removted. Hopefully some others can help! Tagging someone I know is quite helpful: @Jnix284

Hi @bearons It looks like @Bortami and @BarryGrennan beat me to it, I know it’s not the answer you were hoping for but hopefully it helps you to understand the limitations better!

I don’t think you’re really going to find a satisfactory solution to this.
The first thing I looked into was Alias Mapping but that’s more for updating fields without disrupting pages that were already created with that module.
You could maybe use something like python watchdog in local development to monitor your fields.json for changes. My knowledge of python is incredibly basic. Although I feel like the ways in which you could possibly be changing the fields (thus the fields.json) would be so varied that it’d be hard to write some catch all that’d be right all the time.
That’s kind of the crux of the issue - the way you could be changing the fields can vary so much and indeed the ways in which you can insert the hubl can vary hugely too.
I’d love to be corrected here, would be a great time saver. But I think you’re stuck with Ctrl + F and Replace All


Barry Grennan

Freelance HubSpot CMS Developer

Website | Contact | LinkedIn

Yeah, this is a super common pain point. The Design Manager’s field grouping UI looks nice, but moving fields around and having to manually update every reference in the code is rough. Unfortunately, there’s no built-in tool that automatically updates field references when you move them between groups.

What I’d recommend instead is improving your dev workflow by working locally. That way, you can manage your module code and fields.json in a proper code editor (like VSCode), where you can search and update things quickly, use version control, and catch issues before they hit the Design Manager.

You can then integrate a frontend build tool like Vite into your workflow. You can set it up to output compiled assets exactly where HubSpot expects them, so you’re not doing anything manually in the Design Manager unless you absolutely have to.