HubSpot is a great tool for building websites. It lets developers create custom parts, called modules. Marketing teams can easily use these modules to build web pages by simply dragging and dropping them.
But building lots of these modules takes a lot of time. It can get really boring because developers have to write the exact same type of code over and over again. They have to write long setup files, create the HTML, and make sure everything looks good on all devices.
Now, many developers are using AI tools like ChatGPT or GitHub Copilot to work faster. AI is not perfect. It cannot do everything for you. But if you use it smartly, it can save you hours of boring work.
This guide explains how HubSpot developers can use AI to build modules faster, while keeping their code clean and easy to use.
Why Building HubSpot Modules Takes So Long
HubSpot gives you a lot of power, but it also makes developers do a lot of manual setup work for every single module.
1. Writing the fields.json File
Every single module needs a file called fields.json. This file tells HubSpot what buttons and text boxes to show to the marketing team. Even a simple module needs you to type out the code for:
- Text boxes
- Image uploaders
- Color pickers
- Repeating lists
Typing out this code for dozens of modules takes forever and it is really easy to make typing mistakes.
2. Writing the Code and Logic
HubSpot uses a coding language called HubL. Developers mix HubL with normal HTML to make the web pages work. They have to write the same basic loops and "if" statements every day. Doing this repetitive work takes time away from solving bigger problems.
3. Making It Look Good
After the basic code is done, developers still need to write CSS to make the module look nice. They have to test it on mobile phones and make sure it is easy for blind people to use with screen readers. All these steps add up.
How AI Helps Developers Work Faster
AI cannot build a perfect HubSpot module all by itself from just one simple prompt. However, it is amazing at doing the boring, repetitive typing for you.
Generating the Setup Files
One of the best ways to use AI is to let it write your fields.json file. You can just tell the AI what you need in plain English. For example, you can say, "Make a fields.json file for a pricing card with a title, a picture, and a button."
The AI will quickly type out all the starting code. You still have to check it to make sure it is right, but it saves you from doing all the heavy typing.
Creating Basic Code Snippets
AI is pretty smart when it comes to basic HubL code. It can quickly write the code patterns that you use every day, like:
- Writing the code to show an image properly.
- Writing a loop to show a list of items.
- Writing a rule to hide a box if the user leaves it empty.
Generating Base Layouts
A lot of websites use the same types of layouts, like a grid of features or a list of customer reviews. Instead of starting from a blank page, you can ask AI to write the basic HTML for you. Then, you can step in and add the special HubSpot code to make it work.
Finding Answers Quickly
HubSpot has a lot of rules. Instead of searching through long pages of instruction manuals, developers can just ask the AI a question. The AI can give you a quick summary and show you an example of the code you need.
Where AI Still Makes Mistakes
You cannot trust AI blindly. If you do, your website might break. You need to know where AI gets confused.
Making Up Rules
Sometimes, AI just invents things. It might try to use a field type that HubSpot does not even support. It might misspell a property or forget a required ID. A developer always needs to double-check the AI's work against HubSpot's real rules.
Handling Complex Data
If your module needs to pull complex data from a database (like HubDB), AI often gets very confused. It struggles to write complex queries and filters. For the hard stuff, human developers are still much better.
Not Ready for Real Users
AI does not know what your whole website looks like. It might write code that is hard for the marketing team to understand in the editor. A human always needs to review the module and make sure it is easy to use before putting it on a live website.
The Best Way to Use AI
Smart developers use AI as a helpful assistant. Here is a simple step-by-step workflow that works really well:
- Plan it out: Decide what your module needs to do and what fields it needs.
- Let AI type the basics: Ask AI to write the basic
fields.jsonfile and the starting HTML code. - Fix the mistakes manually: Check the AI's code. Fix any errors and connect the HubSpot data properly.
- Make it look perfect: Add your own styling so it looks great on phones and computers.
- Test it out: Try using the module in HubSpot to make sure it is easy for everyone to use.
Final Thoughts
AI is not going to steal a HubSpot developer's job. But it is a super helpful tool. By letting AI do the boring typing and basic setup, developers can save hours of time every week.
The secret is knowing what AI is good at and knowing exactly when you need to step in and do the real work.
Building HubSpot modules from scratch takes time. Rapid lets you upload any UI screenshot and generates a complete, production-ready HubSpot module (with fields.json, HubL bindings, and proper structure) in under 60 seconds. Try it free →