Add Generated HTML Code Preview to Design Manager

When editing a web page or email template in Design Manager today, we have two views that toggle back and forth: Edit and Preview. 

 

It would be enormously helpful to web developers working to build templates in HubSpot if there were a third option to view the currently generated HTML that the page they are working on will produce. 

 

HubSpot modules add HTML to pages that we can all see if we do an Inspect Element in a web browser, but opening another window is not as efficient as it could be if we could toggle that HTML view right inside the design manager along with Edit and Preview. As developers, we constantly flip between Edit and Preview to see progress. It would be nice to have that same kind of real time access to the generated HTML as well. 

 

One huge advantage the HTML view could provide is scannability. In the Edit view, we can't see all the custom CSS Classes or IDs we've added at a glance.

 

Best practices teach us to label the modules intelligently with class and ID names so that we aren't forced to click "Edit CSS" to see the classes or IDs we've added. While this is good practice, it's still not the same as debugging CSS and HTML in tandem.

 

In short, we can see our CSS directly within the Design Manager, why not the HTML that the current iteration of the page will generate as well?

 

As an added help, "Open" and "Close" comments surrounding modules would be a huge help.

 

Perhaps the biggest help would be to highlight the Classes, IDs or Inline CSS we've added in the Edit view in some way so that they are easy to spot in this HTML view. That would allow us to quickly scan our HTML and switch to the CSS file for faster coding and debugging.

 

The HTML preview doesn't have to be editable, though it would be wonderful if the things we can edit in the Edit view were also editable here as well. e.g. the CSS classes or IDs we've added in the Edit view were also editable in the HTML view.

 

We realize the auto-generated divs and classes that HubSpot uses to make pages responsive need to be protected, especially with people who aren't well versed in HTML or CSS. Those elements should not be editable, but seeing them and all the rest of the HTML generated right in the Design Manager along side Edit, Preview, and our CSS could greatly help developers accelerate their template coding process. 

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