Introducing: CopilotA tool for HubSpot Developers

Mac Download

* This is still in beta -- but it's stable! WIP y'all

** Make sure this app ends up in your Applications folder. Either unzip and place it manually or use the provided .dmg to do it for you.

*** MacOS is currently only supported... Kind of ... Message me on linkedIn or the HubSpot slack if you're interested in a PC version.

Special thanks to Tim Joyce. If it weren't for his inspiration and encouragement Copilot would quite possibly not exist at all. P.S. He is a great HubSpot+ dev. Check him out

Copilot Image

What is Copilot?

What a darn good question. Copilot is, and will continue to be, a free open-source tool for Developers in the HubSpot ecosystem. It was created with the intent of being Copilot, "riding shotgun" (an american idiom), Skipper, or whatever you want to call the person/tool making your life a bit easier and less stressful.

In its current state Copilot is only trained to handle flights involving Module Creation. More specifically, handling field.json files.

Copilot Image

Copilot Quickstart

Once you have Copilot installed and opened. Click the "Set Theme Directory" button. This will open up a system dialog and allow you to select a folder. I recommend setting this to the top level-theme folder that you are working on. Copilot will do all the dirty work and parse through your file system only grabbing Field.json files and will display them all in the left-most pane.

Select any fields.json file and Copilot will display that file in a visual Drag and Drop format.From here the editing experience should be pretty similar to what you see in Design Manager on HubSpot. Edits to files and fields are not written until you click the save button

Copilot Image

I recommend using this tool in tandem with watch command fired from the CLI targeting the same theme folder set when clicking on the "Set theme directory" button. Watched field.json files will be updated and automatically uploaded into HubSpot.

Copilot Image

Global Partials

Global partials, in relation to fields.json files, are reusable JSON snippets. They provide a single source of truth for common field groupings that you may want to keep consistant across your theme.

To use them click the "Set Global Partials" button. This will open a system dialog prompting you to select a directory. If you don't have a directory already created, I recommend making a globalFields directory (Name it whatever you want) in your theme. This will be uploaded into HubSpot/source control with your theme. Once the directory is created and set in Copilot -- will see a new mode dropdown in the left pane. This will allow you to switch between "module" and "global partial" mode.

Once in "global partials" mode. You can click on the "+" icon to add a new global partial. A dialoge will open for you prompting you to name your new file. Be sure to save this as a .json file and to keep it within the "Global Partials" directory that you specified earlier.

Copilot Image

Add some fields -- and save your new partial -- then swicth over to module mode. Click on the "Globe" button in the center pane to add any global partials to a module.

Copilot Image

Example: Your theme has an animation component to it. All modules need to be able to animate in/out. Build a single "global partial". Include it in all of your modules. When the client wants to add an additional animation type -- simply edit the original global partial and Copilot will update all of the modules using that particular partial auto-magically. Pretty neat!

IMPORTANT: How Does this work?

Once you add a global partial to a module Copilot will create a COPILOT.srcemap.json in the root directory specified when the "Set Theme Directory" Button was clicked. That is why I recommend setting that to the top theme level. This file will be uploaded into HubSpot and source control tools as well. This means that, regardless as to whether or not you have a build process anyone on your team can fetch the theme from HubSpot and Copilot wills still recognize Global Partials (unless they were modified in design Manager). Pretty Neat!

Copilot Image

Final Thoughts

Copilot is a WIP. It is in a working state right now and it will be something that I plan on working on in my free time for the forseeable future. Report any bugs to me either on the HubSpot slack channel or preferrably on Copilot's Issue Page

I am also interested in hearing about what you would like to see included in Copilot! Want to see current features extended? Want Copilot to do something totally different? Play with HubDB? Custom Objects? Let me know how it can be useful to your workflow!

Happy coding!

-- Beej