Data attribute support

This one would be really helpful.
If only we could add data attributes the same way we can add classes, it would prevent creating a a bunch of useless javascript each time we want to.



It would great to know a little bit more about how you’re using Data Attributes and how you’d like Hype fit into your workflow. Thanks for the suggestion!

Hi Daniel, and sorry for the late answer.
I had no time to build you some example in hype, but I will as soon as I can.

For this request, I was dreaming about that ability to assign data attributes to symbols with the same ui as custom behaviours, so a textfield for naming the data attribute and then a second one to assign a value to it. The reason why, here’s an example :

I want to create an ui counter item symbol, as a module with it’s own mechanic . Let’s say I code few javascript functions which are loaded on my symbol “On load”. By assigning a data-value=5, my script will assign 5 as a default value for this ui item. Now, if I want to have another drag item with another default value in the scene, I just put another data value and it’s done, while keeping only one reference in the library !

In conclusion, I could have only one “clock symbol” in the library and instantiate it with some different values (ex data-hour=2, data-minute=6)

Do you understand what I mean ? (sorry English is not my mother tongue)

1 Like


+1 for the data attribute.

For instance, I would like to use a library for i18n, like i18next:

The data attributes is used to “easily” associate a key to a text element for it to be automatically translated by the library.

I would also like to easily use Angular with one of my project. Ng uses the data attribute.

Thanks Daniel.

1 Like

Right now if I want to add an attribute to, say, a rectangle element in Hype, I have to use javascript like this:
hypeDocument.getElementById('box').setAttribute('ng-show', 'loaded');

It would be extremely helpful if we could add one or more attributes to the selected element in the Identity tab. A common use case would be when integrating an animation into an existing app (like angular), we can assign data-my-property: 'My Value' or ng-hide: 'isHidden'.

It would be very cool if we could set this at the scene level - since it’s just a div.


It would be helpful to be able to store some arbitrary data on elements and symbols. Using the ID and Class fields to store information that is passed as arguments is a bit hacky, and could be cleaned up with the ability to add a number of ‘data-’ attributes. This is especially important when building more complex interactions.