Livereload for Design Manager

To keep the files of a theme organized you have to split them into many files and include them via {% include %} and {% import %} into the main file.

/* style.css */
{% import "Custom/page/css/settings.css" as settings %}
{% import "Custom/page/css/macros.css" as macros %}
{% include "Custom/page/css/custom.css" %}


/* main.js */
{% include "Custom/page/js/custom.js" %}


Everytime you make a change on an imported or included file you have to execute the following manual steps:

  1. Save the File
  2. Publish the File
  3. Save the Main File
  4. Publish the Main File (
  5. Refresh the browser or browsers

During development you have to repeat these steps many thousand times. That is not only tedious but a huge waste of time.


With liverreload you just have to save the file (!


In modern html stacks it is a standard to provide a file watcher and live reload function.

1 Reply
HubSpot Product Team
HubSpot Product Team
updated to: In Planning