How to use data magic tags in HTML snippets

If you don't know how to set data with Hype Data Magic please read and follow the getting started guide. For this example, we will be using data-magic-key inside the innerHTML. First set the data in your Hrad HTML to the following for this example to work:

HypeDataMagic.setData({
    name: 'Max Ziebell',
    button: 'Start over',
});

Then copy & paste the following into an rectangle on stage using the pencil tool after double-clicking it:

 "<span data-magic-key="button">button</span>" is the phrased used in this demo from <span data-magic-key="name">name</span> to advance to the next scene.

Hype Data Magic works based on using a query to search for attributes containing the magic dataset keys. Hence, you can also use them inside the innerHTML of an rectangle (actually a DIV).

1. Double clicking a rectangle containing a data-magic-key shows the keys instead of the actuall preview.
2. If you want to edit the underlying inner HTML just click the pencil icon
3. This will open the actual inner HTML and you can use data-magic-key and the other Hype Data Magic specific dataset value in there
4. Note how the Additional HTML Attributes doesn't require any keys in such a setup