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.
↑ 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:
↑ look at project
I added a trailer video and reactivated my YouTube-Channel at https://www.youtube.com/channel/UCYJ4gdnHdm41AvMW7bmwwCA
Please, Like and Subscribe 
↑ 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 
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.
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
fetch('${resourcesFolderName}/test.json')
.then(response => response.json())
.then(data => {
HypeDataMagic.setData(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
customHandler.js
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)
I was playing around with the following:
customHandler.js
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:
Update: The workaround and approach in this reply isn't needed anymore since version 1.3.4 now supports native forwarding to Hype functions. Just add () to the end of a handler name… see below!
↑ look at project
1.3.4 Ending handler with () forwards them to hypeDocument.functions, exposed resolveObjectByKey and added and exposed resolveKeyToArray (keys can now be arrays), fixed append/prepend bug
Ending handler with () forwards them to hypeDocument.functions
Hence, now you can just specify a handler ending in () to redirect it to hypeDocument.functions. For example, setting the data-magic-handler to myFunction() allows you to use a Hype function to process. Obviously, these types of handlers don't give you any preview in the IDE as the Hype API and hypeDocument.functions isn't present in the web view. These functions are only applied when previewing. Although, one thing you can always is set multiple handlers like setting data-magic-handler to text, myFunction(). That way you will get the regular text output and additionally myFunction() will be triggered on previews/exports. In the following example, a Hype function is used to make the output uppercase. This would make more sense with a regular handler as it also provides a live preview, but either way, here is a simple example:
Custom handler upper() as Hype function with a second handler doing the default text output
Assigning the custom handler as Hype function. Also, demonstrating how handlers can be chained by returning the event object
Leads to the following output as the first handler applies upper() and text adds it to innerHTML (text is the default handler if not declared, so we need to apply it if we use data-magic-handler and also want the regular output)
exposed resolveObjectByKey and added and exposed resolveKeyToArray
These are low-level functions that have been rewritten and are now exposed to the API allowing you to use them to process the key notations used in Hype Data Magic. You can use them to resolve a key on an object and process a key to retrieve its parent, or any other kind of use case. Another thing that has been added is the ability to actually provide arrays instead of only strings as a key. They can even be nested or consist of an array of key notations. For example, given data like this …
var obj = {
deeply: {
nested: {
node: "Hello World"
}
}
};
// using string 'deeply.nested.node'
console.log( HypeDataMagic.resolveObjectByKey(obj, 'deeply.nested.node') );
// using array ['deeply', 'nested', 'node']
console.log( HypeDataMagic.resolveObjectByKey(obj, ['deeply', 'nested', 'node']) );
// using mixed notation in array ['deeply.nested', 'node']
console.log( HypeDataMagic.resolveObjectByKey(obj, ['deeply.nested', 'node']) );
// using nested arrays [['deeply', 'nested'], 'node']
console.log( HypeDataMagic.resolveObjectByKey(obj, [['deeply', 'nested'], 'node']) );
... the result is always resolved. It can actually nest recursively if ever needed. This is done, so one can easily combine any kind of key (string or array or a mixed form). This is certainly a special case scenario, but should add to the robustness as it originates from rewritten and much simpler functions.
To resolve a key directly, you can retrieve it in its flat array notation using HypeDataMagic.resolveKeyToArray. Meaning, all the above key notation can be used with HypeDataMagic.resolveKeyToArray leading to the following array ['deeply', 'nested', 'node'] (given the same example data as above). You can now process a key in any way you see fit (compare, replace and tweak). You could change a specific level or retrieve a parent data node, like in the following example:
// logs out ['deeply', 'nested', 'node']
console.log( HypeDataMagic.resolveKeyToArray('deeply.nested.node'));
// removes last element and logs out ['deeply', 'nested']
var keyArr = HypeDataMagic.resolveKeyToArray('deeply.nested.node');
keyArr.pop();
console.log(keyArr);
fixed append/prepend bug
There was an error when only one of the two special tags data-magic-prefix or data-magic-append have been used, adding a 'Null' string to the output. This was overlooked as I always used it in conjunction or with numbers. This error now has been rectified.
HypeDataMagic.getData now also allow an optional second parameter, being a key. Hence, you can now fetch a specific key using that interface. Forgot to mention that in the short form of the release note.
HypeDataMagic.getData(null, "some.key.here");
The parameter null is the data source and if not passed in defaults to the “shared” one. If you use multiple sources (even as shortcuts) you know what this means, else just use null.
In addition to the older example showing how to use the fetch supported JSON format, here is the same example using fetch to load external data and parse it from a CSV format:
Example with basic CSV processing based on splitting text at the delimiter:
fetch_hype_data_magic_advanced_CSV_version.hype.zip (46,6 KB)*
This example uses a parsing example and allows quoted content and detects line endings and separators. They also can be manually specified:
fetch_hype_data_magic_advanced_CSV_parser_comma.hype.zip (47,8 KB)
In this variation, the only difference is that the data is semicolon separated. This is the case when exporting from Apple Numbers:
fetch_hype_data_magic_advanced_CSV_parser_semicolon.hype.zip (46,7 KB)
This example uses a public Google Docs table as a data source. Just create a table and make it public. Take the link for the table and replace /edit?usp=sharing with /export?format=csv and then fetch the data from that endpoint.
fetch_hype_data_magic_advanced_CSV_parser_google_docs.hype.zip (46,4 KB)
