See changes in html and css in realtime

[Victor_Herrero]

I was wondering if anybody knows a way to use codepen or a similar tool with marketo

Having to reupload a CSS or HTML file everytime you change something makes it cumbersome to work. (upload, reaprove, refresh, repeat)

Last time i tried uploading a marketo template to codepen, it wouldn't load forms or styles completely

Maybe it's just a matter of knowing how to set it up it properly. Maybe there is a similar service...

Thanks in advance!

[Frank_Breen2]

Have you tried the following Chrome Extension: Marketo Guided Template Builder - Chrome Web Store?

It's a really cool extension that allows you to view Guided Templates offline. Jonathan Ankiewicz​ developed it, it helps me in the process of developing and having to do less uploading, etc...

[Anonymous]

Thanks for the mention.

I do have a second version half built that will allow you to actually update the input fields on the fly same as in the templates but I haven't had a chance to finish it.

But knowing more people are using it I may have to really force myself to find the time.

[Victor_Herrero]

I installed it but I'm not sure how to use it to be honest :S

Should I use it while editing the html of the template within marketo? Perhaps while modifying things from inside the developer tools on a landing page... ?

Thanks!

[Frank_Breen2]

If you open up your offline code in Chrome and switch this on, then you'll see the code in the same way as if it was in a Marketo LP, I then use Chrome Inspect to do my tweaks and translate that back into the actual code, basically you're cutting out the process of uploading each time, approving and re-approving to see changes.

[Victor_Herrero]

I'm sorry, I'm new to markup languages.

How do you "open up your offline code in Chrome" ?

I've tried opening my html files with chrome before, but they don't render correctly because they are an empty template, so I imagine that's not what you mean, right?

[Anonymous · Accepted solution]

I build the chrome extension to help with it. Building templates through Marketo is not pleasant.

Download the extension.
Open the HTML page in the browser you are working on. Then click on the Marketo extension. Turn it on and it will take all of the meta tags and distribute the information throughout the page and your page will render correctly.

If you have any questions or comments please feel free to address me with them. At some point when I can get some more free time I plan to release a second version but until then.

[Victor_Herrero]

Ok, so I think I get it now, just needed a little step by step:

1. Open locally stored html template file with chrome (looks bad)
2. Turn on extension, page reloads completely (looks good, like a rendered html marketo template)
3. Work on the html file inside an editor (like sublime), save changes locally
4. Go back to chrome tab, hit the extension, page renders with changes
5. Repeat 3 and 4 ...

I haven't tried steps 3 and 4, but if the extension really works like this, you and your extension deserve a LOT of credit!

[Anonymous]

Thank you... there is so much more I want to do but I have so much to get done already I can't get to it.

[Victor_Herrero]

Perhaps if you dropped the xbox controller...

(Just a joke, I have trouble dropping it myself)

Your extension does something I think Marketo should have addressed long ago.

When it comes to editing assets, Marketo's user experience is really bad.

You can "drag and drop" modules in guided templates, sure, but they go from top to bottom only, to reorder you need to go 1 by 1, deleting takes for ever....

Is there a way to load forms as well, with your extension ?