Hello:
As the title states, I need to export the standard HTML format for secondary editing using vs code, but the exported file seems to be an HTML webpage compiled from JS. Can it be converted into a traditional HTML webpage?
Thanks!
Hype exports a document as 3 main files:
- an HTML file that has a minimal div and calls a loader script
- the loader script, which also contains all data (elements, timelines, animations, etc.)
- a runtime script that is in charge of executing the hype document/animations
If you need to make changes to the HTML file that do not involve the actual animation, you can use an editor to do so. However you do need to be careful about future exports, as Hype would typically overwrite this file. To deal with this, Hype has an option on the export/save dialog you can uncheck to "Also save .html file" so that it doesn't overwrite it.
Alternatively, if you have source elsewhere that you want to have a Hype animation, all you need to do is paste three lines of code that point it towards the loader script. It looks something like:
<!-- copy these lines to your document: -->
<div id="index_hype_container" class="HYPE_document" style="margin:auto;position:relative;width:600px;height:400px;overflow:hidden;">
<script type="text/javascript" charset="utf-8" src="index.hyperesources/index_hype_generated_script.js?4417"></script>
</div>
<!-- end copy -->
You'd simply need to change the script's src argument to point at the *_hype_generated_script.js location.
As for making changes to the Hype animation itself, we do not recommend or support modifying the JSON data in the loader file for changes. If there's some more dynamic behavior, I'd recommend having some JavaScript glue code that takes your modifications and then changes the InnerHTML/DOM on scene load to reflect what you want.
If what you're doing is very common, there's also Export Scripts that can help automate common HTML changes like those necessary for ads, but this doesn't quite sound like your case.
In Tumult Hype, when you export a project, it indeed creates a JavaScript-based HTML file, where most of the content and animations are controlled through JavaScript rather than traditional HTML and CSS. This approach allows for complex animations and interactivity that might not be feasible with standard HTML and CSS alone.
However, if you’re looking to convert this into a more traditional HTML format for secondary editing in VS Code, there are some limitations to consider:
- Dynamic Content: Much of the content in a Hype-generated HTML file is dynamically generated by JavaScript. Converting this to static HTML would mean losing the ability to dynamically manipulate elements, which is a core feature of Hype.
- Animations and Interactivity: The animations and interactive elements are controlled by Hype’s JavaScript runtime. Converting these into CSS animations (if at all possible) would be a complex and potentially unfeasible task, depending on the complexity of your animations.
- Manual Conversion: You could manually recreate the layout using traditional HTML and CSS, but this would be a time-consuming process and would essentially mean rebuilding the project from scratch.
- Editing within Hype: If you need to make changes, it’s usually best to do so within Hype itself and then re-export. Hype is designed to be the primary tool for editing these projects.
- Embedding Hype Projects: Another approach is to embed the Hype project into a larger HTML document. This way, you can have traditional HTML content around the Hype project, which can be edited in VS Code or any other HTML editor.
- External Editing: For minor edits or custom JavaScript, you can edit the exported .html file directly, or add additional CSS or JavaScript files in the Resources panel in Hype and refer to them in your Hype document.
In summary, converting a Hype-generated project into a traditional HTML format isn’t straightforward due to the nature of how Hype works. It’s designed to leverage JavaScript for dynamic content and complex animations. For extensive changes or to incorporate the project into a larger HTML structure, manual editing or embedding the project within a traditional HTML page are the most viable options.
1 Like
Hah, i was thinking the same thing.
Not sure I fully agree with it being unfeasible//possible to recreate using native css and html That seems to also ignore the use of JS. or other js libraries.
And also not sure any mention of manual recreation is relevant to the question.?
No. The comment is not AI-generated. But I used Grammarly.
Manual recreation is relevant. Example:" If you are exporting to use in a proprietary framework that is not shared and is only used with a particular niche of the industry, let's say Beastcode, for example, mainly works with space and defense training and digital twin industry, you may not have the option of other libraries." "ATOs and such"
Either way, you can recreate it, which is related; you must know how to do it (Canvas with TypeScript, CoffeeScript, WASM). But you are talking about massive work. Knowing the limits of a rendering program "Hype" is imperative to your work and when to be agile to move to another development path, which may include a different program or programming language to markup language.
I didn't go into detail because that was not related. Just thought it was not needed.
I get all that but the question was about conversion not recreation. To be honest , it seemed a lot of information on something that was imho was not needed and I only questioned its inclusion because I assumed an AI wrote it.
You sure your not an AI!
I don’t see how that’s funny; especially for a community leader. Not an AI. Some people put thought and effort into what they say. Hope you don’t treat all customers like this. Going back to Reddit and StackOverflow.
Firstly, Note I am a customer just like you and not part of Hypes team !!
I made the AI assumption independently of Jonathans post. Which I read after yours.
If I had not made that assumption I may have not said
In such a short sentence without elaborating why.
But I do stand by what I have said, I made the joke at the end in an attempt to lighten what I was saying and not to offend! Unfortunately some humour is like Marmite. 
On StackOverflow. answers are very often questioned for relevance...
It is a rare thing on this forum but it does happen on occasion and so it should. Because it is too easy to get a topic of track with clutter. Just like we have right now.
1 Like
I get that a lot on YouTube. I put a lot of time into writing the script, recording the audio, getting rid of mistakes, but people ask me which AI software I use. 
I'm surprised. I don't think either of those sites are as friendly as this one. 
As for the main question… ehhhhh… it might be technically possible, but I wouldn't want to work that way. I suppose the exported code could be tracked with Git, but I'd probably go back to the Hype app to make any changes.
Am I allowed to laugh at that..
I agree and that being coupled with someone more often than not questions you answers, may not be such a joy to hang out at.
@jjbyrne thank you for your contribution 
There were a few structural/wording choices that were polished in a similar manner to how I've seen ChatGPT answer – given it is trained on human writing, this doesn't necessarily mean it was generated from it!
The overall answer was detailed and precise. If it was from AI, it was impressive in its knowledge of Hype . If it was from a human, it was... well impressive in its knowledge of Hype too, but also the thoughtfulness in taking so much time to write out the answer!
Thus it was hard to reconcile if it was made from AI, which is why i asked.
AI generated content (ranging from spam -> low quality -> high quality) is becoming pervasive for forum runners, yet I don't think there's a blanket answer on how to treat it. I especially don't want to incorrectly flag human-made content... so consider this helping me train my own brain classifier.
Anyways, I didn't mean to derail the answer thread with the topic of AI; I should have probably just sent you a DM!
Thanks again!
1 Like