Hype Data Magic

noticed that too ... had three executions of the dataType-callback where to expect one.

For most cases, one wants to use the handler at the HypeScenePrepareForDisplay level. In some cases involving the full Hype API (like triggering animations) one would want the handler to fire using HypeSceneLoad. So, at least two triggers will be needed. Either with the one handler and the event.type or two handlers for each circumstance. I'll investigate.

Update: So, I am in the process of refactoring the code a bit. The main difference being that the mutation-based updates become optional for the exported version. This removes the asynchronous nature and allows me to fire them much more precise. The handlers will now be fired twice but there will be a way to distinguish between scene prepare and load events.

Update2: If you are wondering why I am observing contenteditable in the IDE version. I discovered last fall that you can inject HTML and a double click makes the new content permanent in the current document. I even coded an extension called HypeClickEmbed and another HypeTemplateVars. I never released them as this would depend too much on an unsupported hack/quirk to be used in production even though it offered some neat possibilities. In this case I am actively avoiding this behavior. Meaning, that preview text becomes part of the save file by deleting any content when you double-click a linked rectangle.

1 Like

good catch :slight_smile:

1 Like

Yes, if your interested I can DM you that code but no warranty.

Concerning the extension Hype Data Magic... I fixed most issues and will be releasing the new version ASAP (probably today). I’ll post a ping here and all people that downloaded it on Gumroad will also be notified.

↑ look at project
1.1 Uncoupled refreshes from mutations
1.2 Refactored data handler and IDE preview

I was hard at work updating Hype Data Magic to become more stable. I still consider it "unfinished" but it is slowly getting there. That said, please play around with the update and send me feedback on the forum if you feel like it.

I was still contemplating if I integrate a built-in data loader for external files. Also, I want to add more examples in the near future like a slider, chart or the mentioned example for consuming external JSON with a live preview.

↑ look at project
1.3 added data-magic support for innerHTML and lots of preview fixes

This release concerns mainly the broken live preview and adds a new option to add data-magic-keys into innerHTML instead of in the attribute panel.

Hint: to check if the export contains any static text portions (user imputed and not dynamic) you can always just make a regular test export and enable the inclusion of text in the document for search engines. Then inspect the file to see what text is actually found by Hype in the document. You will see that most of the text in the current test files is really not in the Hype file and actually only a preview directly from you data source. When using the new innerHTML feature only a placeholder is kept for readability. Open for suggestions on the later.

1 Like

↑ look at project
1.4 Improved previews, added index helper, fetchData

Some of the new things that are included are improved previews, added index helper and the ability to fetch data from online sources. Make sure to read about CORS to enable local testing with Safari for the forum examples here: https://github.com/worldoptimizer/HypeCookBook/wiki/Accessing-external-APIs-from-Hype-Previews

There was also some code refactoring done and some custom behavior commands have been added for your convenience. Happy exploring and do let me know what you think.


I have been busy but this project hasn't been forgotten. I was already exploring some advanced use-cases (indexes and fetchData) in the file found on Gumroad but after returning to the project today I strip all the fancy stuff and released a stable core version ready for production to GitHub. The version number of the GitHub core release now reset to v1.0 to reflect the standalone release. The core release, includes a CDN options, a doxdox documentation and a getting started guide in the GitHub README:


Here are some examples:

Infinite data-driven carousel using Hype Data Magic

Simple scoreboard using Hype Data Magic


↑ look at project
I added a trailer video and reactivated my YouTube-Channel at https://www.youtube.com/channel/UCYJ4gdnHdm41AvMW7bmwwCA
Please, Like and Subscribe :slight_smile:


↑ look at project
1.3.3 Added forceRedraw (bugfix), HypeDataMagic.refresh and auto refresh

I made some simple dices while testing this bug fix and small updates:
SimpleDices.hype.zip (48,2 KB)

This comes very close to my wet dream for hype of loading in JSON or CSV files with feeds for images and text. Impressive, i'll keep an eye on this :ok_hand:

why close? the version provided via gumroad seems to have fetch-requests included ...

Whooops I didn't see that.
Amazing, going to check this out soon, one step closer to the creative at scale dream in Hype.

1 Like

As @h_classen mentioned. That is possible and is even easier with the auto-refresh (v1.3.3) when setting data. See the following example:
simple_fetch_example_with_hype_data_magic.hype.zip (41,6 KB)

This example is with a simple fetch that loads from resources without any preloader or error handling (easy to add, though). Nothing fancy, but it should demonstrate the case. The code snippet used is:

// element - DOMHTMLElement that triggered this function being called
// event - event that triggered this function being called
function fetch(hypeDocument, element, event) {
	// load data using fetch 
		.then(response => response.json())
		.then(data => {

PS: You can also directly include data (head) or use JSONP to avoid any Cross-Origin-Policies.


Hello @MaxZieb !

I wish I know how to include an external URL for a button or for an iFrame. Could you please offer me support?

Thank you!

Option 1: You can just write a Hype function that uses getData and get the URL and opens it

Option 2: You can write a custom handler for buttons


HypeDataMagic.addDataHandler('button', function (hypeDocument, element, event){
	if (event.data.label) element.innerHTML = event.data.label;
	if (event.data.url && !element.dataset.linked) {
		element.dataset.linked = true;
		var clickHandler = function(e){
			window.location = event.data.url;
		element.addEventListener('mousedown', clickHandler, false);
		element.addEventListener('touchstart', clickHandler, false);

HypeDataMagic-CustomHandler.hype.zip (19,1 KB)


Thank you so much @MaxZieb !

I was playing around with the following:


HypeDataMagic.addDataHandler('hypefunction', function (hypeDocument, element, event){
	var hypeFunctionName = element.getAttribute('data-hype-function');
	if (hypeFunctionName && hypeDocument.functions) {
		var hypeFunction = hypeDocument.functions()[hypeFunctionName];
		if(hypeFunction) hypeFunction(hypeDocument, element, event);

Allowing to forward any data to a Hype function… there might be use cases for this, but it lacks a live preview as Hype functions only can be called in preview. It might be useful for people not wanting to get into creating handlers or for complex use-cases that don't require a preview anyway.

The following example only shows how the data is received… nothing really useful apart from demonstrating the concept: HypeDataMagic-CustomHandler-hypeFunction.hype.zip (17,8 KB)

Crude visualization how this handler forwards a call:


Thanks @MaxZieb this example is a useful visual overview.

1 Like