Revealing the full HTML code

Exporting & Previewing
#1

Hello,

Loving Hype 4 the moment I laid eyes on it. However, is there a way to show the full html codes after export instead of it being wrapped around a script tag?

What I am trying to achieve is similar to Adobe Muse where it generates the full html codes. With that one can seamlessly design a website in Hype, export it and use, let’s say, VS Code to enhance the codes (like adding forms/data storage).

Looking forward to hearing from you.

#2

I wasn't exactly sure what you meant, so I decided to test things out.

Using the "Bounce" template as an example…

Screen Shot 2020-02-29 at 6.46.38 AM
Screen Shot 2020-02-29 at 6.46.38 AM2840×744 120 KB

...the exported folder can be dragged-and-dropped onto Visual Studio Code. That's nice, but it seems what you want to do is not really that great of an experience. Hype exports mainly JavaScript code and it is minified.

...but that doesn't stop me from adding things like forms or "LocalStorage" to my Hype project. I just add it with HTML or JavaScript — directly in Hype. You can even right-click a JavaScript file to open it in Visual Studio Code.

Screen Shot 2020-02-29 at 6.50.39 AM
Screen Shot 2020-02-29 at 6.50.39 AM1072×1010 121 KB

NOTE: External Editors is a "Pro" feature — Tumult Hype Professional

Screen Shot 2020-02-29 at 6.53.36 AM
Screen Shot 2020-02-29 at 6.53.36 AM880×712 42.6 KB

ANOTHER NOTE: Right-Click (Control + Click) to bring up that menu on the "Edit Head HTML" button. (Not the most intuitive, but effective.)

Here's an example of LocalStorage…

function add() {
    hypeDocument.getElementById(element.id).style.backgroundColor = "#005493";
    if (window.scored == false) {
        window.score = window.score + 1;
        window.scored = true;
        if (window.score > window.high) {
            window.high = window.score;
            localStorage.high = window.score;
        }
    }
}

Basically, the high score is being saved to LocalStorage — Easy!

And other times, I simply add custom HTML to elements themselves. That's how I can add HTML forms to my project.

#3

Hype content is rendered on the fly from a JSON object after a document loader class makes sure that wanted and necessary preloading has completed … so no, you cannot create a ready HTML.

I wrote a helper for people using Hype to layout stuff and then need the exported HTML. This works great but it only creates a “snapshot” of the dynamic JS app Hype is constantly generating.

2 Likes
#5

Thank you so much for your reply.

Unfortunately I am already aware of this capability, but your screenshots helped me realised I can use other apps to edit resources within Hype.

Loving Hype even more :smiley:

#6

Thank you!

This is exactly what I have been stuffing the internet for. Now with the enabler, I can also share with other developers.

Just being curious, are there other interesting hype extensions I may use in my Hype project? If so, where can I get them?

Looking forward to hearing from you.

#7

Be aware that Hype uses absolute positioning and renders responsive layouts with JavaScript, so making a snapshot the code remains absolute positioned but without the JavaScript (so the responsive part doesn’t work). But for some scenarios (fixed sized layouts) these exports are useful. For more extensions look at the extensions’ category in this forum and at my GitHub…

1 Like