Hype Data Magic

Example using Hype Data Magic with customData

One can also use Hype Data Magic to bind a rectangle to a variable in a data source. The default data source is used when using HypeDataMagic.setData(({lorem:'ipsum'}), but one can use arbitrary source names like HypeDataMagic.setData({lorem:'ipsum'}, 'myData'). It is even possible to use hypeDocument.customData with the keyword customData as seen in the following example:

Example_Hype_Data_Magic_bind_customData_to_rectangle.hype.zip (20,6 KB)


↑ look at project
1.3.5 Function in data constructs are now resolved, new handler 'variables' resolves to customData, exposed default 'handler', to change use HypeDataMagic.setDefault('handler', 'text'), new default 'customData' is used to init hypeDocument.customData (in addition to old 'customDataForPreview'), new default 'allowDataFunctions' is set to true and allows for functions in data, new default 'allowVariables' is set to true and allows for variables in default handlers image and text, exposed low-level functions resolveVariablesInString, resolveVariablesInObject and cloneObject

This release adds another layer of data in form of custom data variables (can also be tweaked to use other sources using the default 'variables'). Given some data like:

    greeting: 'Hello ${userName}, welcome!',

You can assign greeting as usual to a rectangle by assigning it with data-magic-key set to greeting. New is the possibility to update partial strings with variables.

The variable ${userName} will be substituted from the default variable source hypeDocument.customData. So, if you set hypeDocument.customData.userName = 'Max' and subsequently refresh using hypeDocument.refresh() the display will be updated.

Variables are mapped to hypeDocument.customData and can also be set from outside Hype using the already established

HypeDataMagic.setDefault('customDataForPreview', {
    userName: 'Max'

and the now new

HypeDataMagic.setDefault('customData', {
    userName: 'Max'

The difference being that the new option sets the custom data beyond only the preview.

The new variable allows nested notation. Given some custom data like:

HypeDataMagic.setDefault('customData', {
    user: {
        name: 'Max',
        age: 46,
        gender: 'male',
        loves: [
            "Tumult Hype",
            "classical music"

variables can reference the data as follows, ${user.name}, ${user.age}, ${user.gender}, ,${user.loves[0]}, ${user.loves[1]}. As you can see, you can mix object and array notation just like in magic keys.

Another new thing is that data can contain functions. This is totally optional and can also be disallowed if you feel strongly about it. Given you assign your data through JavaScript, defining a branch using a function allows creating data or sub-branches dynamically. These functions don't accept any parameters, but given the context you define them in (like Hype function or Hype Events) you can even use hypeDocument in the function itself.

    dynamic: function(){
        return {
            data: 'I am a random number: '+Math.round(Math.random()*100)

The data-magic-key would be dynamic.data and result in the text I am a random number: 34'… with the number changing on every refresh. The same also works for variables.

${resourcesFolderName} is now substituted if found in an unresolved form. Hype currently doesn't resolve the variable in external JS files, and at least this little workaround resolves it as a variable inside of Hype Data Magic keys when displayed with default handlers. If you have a custom handler, you can just chain your handler behind the new variables handler.

Just set data-magic-handler and set it to variables, myhandler for example.

I just realized that the ${variable} syntax collides with template literals. But, I am keeping the syntax and for that special case my suggested workaround is…

To avoid immediate substitution in such cases, use a substitution like :sparkles: instead of $ and replace it:

var myLiteralString = `
✨{variable} is 
in this 
literal`.replace('✨', '$');

I might add an alternative like this for template literal built into Hype Data Magic in a future version.


Reactive custom data and multiple options for variables is coming in a couple of hours. Really happy about this one… Oh and I forgot the dataset variables features (really powerful).


↑ look at project
Version 1.3.6

  • Added dataset variables and the handler 'dataset',
  • Added data-magic-sets to enable comma separated queries for foreign datasets, parent(s) and closest()
  • Added default refreshOnCustomData and reactivity to custom data,
  • Exposed HypeDataMagic.enableReactiveObject (low-level) allowing to create you own reactive objects,
  • Exposed HypeDataMagic.disableReactiveObject (low-level) to revert a object back to normal,
  • Added HypeDataMagic.debounceByRequestFrame (helper) to create a function version that is debounced by rAF,
  • Added HypeDataMagic.createSequence (helper) as a function factory for sequences progress on demand,
  • Change default on all forceRedraws (Safari-Bugfix) to false, you can enable them if needed for IDE or exports only,
  • Added HypeDataMagic.setDefault('highlightDataMagic', true); to allow inspecting regions managed by Data Magic,
  • Added inline syntax for data-magic-key as source:key (this overrides any branch lookups),
  • Added inline syntax for variables as source:key, add %{} and (sparkles-emoji){} options for variable names,
  • Refactored observer in IDE portion, added plenty of comments to code

↑ look at project
Version 1.3.7

  • Reverted the observer in IDE portion (only affects preview in IDE, fixing quirks)

Version 1.3.8

Version 1.3.9

  • Refactored findMagicAttribute, exposed it as findAttribute,
  • Added the ability to traverse data-magic-braches further with +,
  • HypeDataMagic.setData now offers to set a key on a object
1 Like

5 posts were split to a new topic: Refreshing the view in Hype Data Magic

So did @MaxZieb make the TeamTumult yet @jonathan? :innocent:


Hello everyone,

I came across a problem while working on a project and have found a potential solution that I'd like to share with this community. During my search, I've found a data handler that has been particularly helpful in embedding video examples into my work.

I have been storing this solution on my hard drive (HD) and I think it could be useful to some of you:

HypeDataMagic-Video-Data-Handler.hype.zip (322,1 KB)


Hype Data Magic: Master Variable Manipulation for Optimal Data Management


Very nice again Max!, Really keen on the screen recording style too, did you use special software for that, or manual framing?

Also a different question regarding Data magic that might be out of scope for what you've intended it to do. But how difficult would it be to pull data from a spreadsheet locally (say to the head of the document) when it's exporting? So data can be managed from within a spreadsheet online, but be a standalone offline file after exporting (for example with display ads).

Not sure if this is something that can be done within Data magic or is more likely to be a custom export script.


In my older videos, I did the framing manually, but then I found http://screenstudio.com/
About using data from Excel or Numbers… there is a solution, same thread, further up…
Hype Data Magic - #28 by MaxZieb

1 Like


I have not really looked at this before. Very nice.

One thought I had was the live Labels you have

You could change the content: "Data Magic"; in the document.styleSheets[0].insertRule :... line


content: "Data Magic: " attr(data-magic-key) "" ;

Which gives

Which makes them more useful I think.

Update re Max's replies below

If you want to implement this yourself before @MaxZieb updates this in the next version after Hype DataMagic 1.3.9.

In the un-minified version : HypeDataMagic.js


content: "Data Magic";

within the line of code on line 1199


content: "Data Magic: " attr(data-magic-key) "" ;

Save and close.

To minify it yourself use : Closure-Compile


Thank you for the great suggestion. I was thinking about this a while back, but if I implement it, I was experimenting with showing the entire key (including branches etc.). That would need to set a data- element based on the key when being resolved and use that in the display. Haven't updated in a while and have some minor issues to fix anyway. I will include this in a 1.4.x in the upcoming months. The patch you provided is easy enough for the key only in the mean time. Thank you!

Maybe in your post above, include line numbers of v1.3.9, so people can modify it. BTW I am using Closure-Compiler to minify.


I used HypeDataMagic to get data from a google sheets and it works amazing.
Im thinking of using it on a education-platform so that I can pull the data from google sheets so that it is easier to update many data at the same time.

So now I tried to use the data from the data-magic text-elements to draw charts. But I can't get any data from the text-fields it is just blank. Is there a way to do this that I have missed?

You can always use Hype Data Magic handler:

or Hype Reactive Content

3 posts were split to a new topic: Problems using Hype Data Magic with Fetch (CORS)

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.

As this is pretty much an uncommented repost of some older notes. First, this is provided as is under the MIT license and given that it is free, I am doing this in my free time.

Not sure if this is meant to inspire doing more along the mentioned topics… but if that was the intention, here is my feedback.

Won't happen as JS itself has enough robust ways of loading data… like promise-based fetch etc. The problem of loading external data from the file system or third party (CORS) can't be solved by an internal loader either as it relies on the same mechanism.

All these examples exist in this thread and across the forum, just search for them.

↑ look at project
Version 1.4.0

  • Fixed bug not using branches from inner elements data-magic-key definitions
  • Fixed a retrieval bug by adding baseElement to findAttribute limiting the search to an element
  • Fixed legacy code usage of substr in favor of slice
  • Added HypeDataMagic.resolveVariables allowing to resolve variables in objects and strings (auto detected wrapper)
  • Added HypeDataMagic.constructVariablesContext allowing to construct a variables context for resolving variables
  • Added new default autoVariables allowing to resolve variables automatically before handlers are called
  • Added legacy support for handling variables in text and image handlers
  • Switched display from Data Magic to key content as suggested by @MarkHunte

Thanks, @MarkHunte, for the feedback and also this release was long in the making
(around two years time have passed since the last update) :wink:


↑ look at project
Version 1.4.1

  • Removed a leftover console.log from debugging