Hype DocumentLoader

This is a geeky extension. It uses a tiny runtime proxy to fetch the loader data directly offering instant access to it. This allows to read and maipulate some values you wouldn’t usually haveaccess to … starting with a list of all associated resources. Some values are already part of the regular Hype API others are very geeky and useful to only a subset of developers. Be reminded that the internal Hype data structure is not officially supported and could change at any time… neither the less, this extension offers ways for certain projects to inspect files, layers, scenes and timelines for whatever reason that might be necessary. This extension offers two new Hype events.


This callback acts as a filter and receveis the data in event.data. You can create and act upon the data. If you manipulate the data and want that to be passed on to the build process return it at the end of the callback.

	//EXAMPLE: Adding something to the head of the page
	function documentDataAddToHead(hypeDocument, element, event){
		console.log ('HypeDocumentData', event.data);
		// manipulate data. For example add something to the head 
		event.data.headAdditions.push('<!-- hello -->');
		// return to assign
		return event.data;
	if("HYPE_eventListeners" in window === false) { 
		window.HYPE_eventListeners = Array();
	window.HYPE_eventListeners.push({"type":"HypeDocumentData", "callback":documentDataAddToHead});


This callback offers a way to prevent Hype from rendering immediately and allows to delay/manage the render process. It receives the render command as part of the event asevent.render and can be triggered at any time with event.render();. If you take over the time you want Hype to render disable regular rendering by returning false from the callback.

	//EXAMPLE: Render Hype with an one second delay
	function documentRender(hypeDocument, element, event){
		// create some visual feedback (totally optional)
		var containerElm = document.getElementById(event.id)
		var newElm = document.createElement('div');
		newElm.innerHTML = "<br>Let us delay this for 1 second!";
		// let us delay
		// return false to block instant render
		return false;

	if("HYPE_eventListeners" in window === false) { 
		window.HYPE_eventListeners = Array();
	window.HYPE_eventListeners.push({"type":"HypeDocumentRender", "callback":documentRender});

Child extension in the works: Thinking about adding some helper functions to interpret the data…this will become its own extension using the event callback to not bloat the core functionality of this fine little helper. Have fun.

Code repository on GitHub:

Demo (output in the console):

Download Demo:

1.0 Initial release under MIT
1.1 Removed additional loading request and asynchronicity
1.2 Added notification system to allow further extensibility
1.3 Tweaked notifyEvent to be additive, added hypeDocument.notifyEventAdditivum
1.4 Added new event HypeDocumentRender, Refactored name to HypeDocumentLoader.js and event to HypeDocumentData

Content Delivery Network (CDN)

Latest version can be linked into your project using the following in the head section of your project:

<script src="https://cdn.jsdelivr.net/gh/worldoptimizer/HypeDocumentLoader/HypeDocumentLoader.min.js"></script>

Optionally you can also link a SRI version or specific releases.
Read more about that on the JsDelivr (CDN) page for this extension at https://www.jsdelivr.com/package/gh/worldoptimizer/HypeDocumentLoader

Learn how to use the latest extension version and how to combine extensions into one file at


↑ look at project
1.1 Removed additional loading request and asynchronicity

Did you have a specific need for one of the bits of data from this?

Yes, the resources (and maybe timelines). But in general it’s interesting to explore.

1 Like

↑ look at project
1.2 Added notification system to allow further extensibility

You can now listen to an Hype Event called HypeDocumentLoaderInfo and receive the data in event.data. Obviously hypeDocument and element are null in the call. The keys hasPhysics, documentName, mainContainerID are read only at that point, so you can use them for your logic but not overwrite them. The data you receive is a copy so to overwrite what Hype uses to build the document just return event.data after modification.

Code example for creating your own loading indicator callback

Here is an example (requires Hype DocumentLoaderInfo 1.2+) to implement your own loader (don’t need to enable it in Hype, even better leave the “Loading indicator” setting off in the IDE saving you some kilobytes):

<!-- please use local copy (no hotlinking in production, testing is okay)  -->
<script src="https://playground.maxziebell.de/Hype/DocumentLoader/HypeDocumentLoader.min.js"></script>
    //set the Hype build your using
    function documentData(hypeDocument, element, event){
        // create your own loading screen display (remeber
        event.data.loadingScreenFunction = function(shouldShow, mainContentContainer){
            // your logic here using the arguments provided by Hype
            console.log('loadingScreenFunction', shouldShow, mainContentContainer);
        // return to apply
        return event.data;
    if("HYPE_eventListeners" in window === false) { window.HYPE_eventListeners = Array();}
    window.HYPE_eventListeners.push({"type":"HypeDocumentData", "callback":documentData});

As a reference here is the function Hype usually defines at that point giving you the know little grey rounded notification with the label “Loading”. All the following code is actually hard coded into the export Hype makes so disabling “Loading indicator” and doing your own can even save you some kilobytes.

function (shouldShow, mainContentContainer) {
	var loadingPageID = mainContentContainer.id + "_loading";
	var loadingDiv = document.getElementById(loadingPageID);

	if(shouldShow == true) {
		if(loadingDiv == null) {	
			loadingDiv = document.createElement("div");
			loadingDiv.id = loadingPageID;
			loadingDiv.style.cssText = "overflow:hidden;position:absolute;width:150px;top:40%;left:0;right:0;margin:auto;padding:2px;border:3px solid #BBB;background-color:#EEE;border-radius:10px;text-align:center;font-family:Helvetica,Sans-Serif;font-size:13px;font-weight:700;color:#AAA;z-index:100000;";
			loadingDiv.innerHTML = "Laden";
		loadingDiv.style.display = "block";
		mainContentContainer.setAttribute("aria-busy", true);
	} else {
		loadingDiv.style.display = "none";
		loadingDiv.setAttribute("aria-hidden", true);

↑ look at project
1.3 Tweaked notifyEvent to be additive, added hypeDocument.notifyEventAdditivum

This means you can register multiple callbacks and they receive the data in the sequential order you registered them and they can all manipulate the same event.data (additive).

Added bonus:
The notification system (since 1.2) is based on Hype’s internal way of doing it and therefor this extension registers some needed helpers hypeDocument.notifyEvent and hypeDocument.notifyEventAdditivum (new). These can also be used by you to create your own events, making things possible discussed in this post and thread:

↑ look at project
1.4 Added new event HypeDocumentRender, Refactored name to HypeDocumentLoader.js and event to HypeDocumentData

This is an exciting update as it refactors the extention and we drop the info in favor of the nice Hype and two words I am trying to maintain across the extensions. The event delivering the data is now called HypeDocumentData and this update introduces a new event called HypeDocumentRender. So now you can not only fiddle with the data you can actually delay rendering and use the render trigger to wait for some other process to finish or manage rendering Hype.

had a first look and wow this enables programmatically duplicating and manipulating of Hype-elements at loadtime. way cool! great :clap:

1 Like

That is the idea and at one point I was planning on creating another module that builds on the document loader using its callbacks to offer some helper functions. This library will most probably stay pretty basic like now to allow it to be the base for many other extensions building on the events it renders. Much appreciated that somebody with your great expertise sees the potential! :vulcan_salute:

1 Like

petal.hype.zip (19.2 KB)

create hype-element-instances on the fly. thx for preparing @MaxZieb :slight_smile: