Hype + Blocs - Text Placeholders

Hi there!

I'm new to Hype, but love it already!

I'm using Blocs to create and manage the homepage of my girlfriend, who is a singer (Homepage). I thought it would be great if I could make her Tour Dates more simple on the eyes, by just showing Date and location and have the additional info only appear when hovering on the Date/Location field.

While this would be easy for me to create with Hype, the problem is, that it would be very inconvenient to manage the tour dates in Hype.

So I wonder if there is a possibility to make a template for blocs, where I have the desired Hype animation, but can still edit the displayed information inside blocs. At the same time the information should only be editable inside blocs, but no more when the site is published.

I'm curious if there is anything like this done before or if this rather tricky. Full disclosure, I'm not a coder. I can understand basic html, but no css, so if CSS or HTML is used, I'd also need to know how.

Thank You very much for the help!! :slight_smile:

Hi @mr.birdy!

I started typing up an answer, but in using the Hype Bric, I found I could not embed two Hype animations (whether the same or different). This seems like it might be a bug, and would probably prevent you from achieving the goal of having a template Hype animation that has multiple instances on a page.

If you use the Hype bric, can you reproduce this problem/are you able to have multiple hype animations on a page?

(The answer itself if did work is a yes, but it will be tricky and require a little bit of javascript code)

1 Like

Hey Jonathan!

Thank you very much for your answer :slightly_smiling_face:

For me it is possible to have two Hype animations with the Hype bric! Strange it doesn't
work for you. I have everything updated to the newest version, including Mac OS (M1).

I’d love to hear about your solution, even though I’m not sure I’ll be able to follow :sweat_smile:

So if you’re willing to help I’d really appreciate the effort!

EDIT: Correction, You're right. I can't have more than one Tumult Bric working. I could've sworn it worked yesterday. Well that is really frustrating.

So, Only got the trial version of Blocs, just to have a look at this.

Boy, 10min learning curve of how to get the Hype Animation in and display. figured it out.

So once I got thing going I added a single Hype project and tried to display the inside two columns ( i.e two instances of the same file) Did not display. All I got was one. So I re exported from Hype with a different name and tried that. Both now preview and display.

1 Like

Thank you very much! Thats a bummer, but at least I know what's the "bug" now. Ill try to ask the developer if he can make it so we can display two of the same instances of one Hype project.

So I found a workaround!

Instead of using the Hype Bric, I use the HTML Bric and insert the HTML Code Hype created. Also the Resources Folder of the Hype Document must be placed in the webpages root folder.

So since this problem is out of the way, maybe you're still motivated to share your coding solution? :innocent:

Thx so much!

So I had a play with this.

Now I do feel if I had more time I would figure out how to use the Native API etc. to build a custom bric that you could load multiples and call Bloc functions. But alas got as far as feeling it should be possible.

Also I have the trial.

What I did manage to do is create a simple Hype project that has a Rectangle with a class name of testext - This will be used in the code below later.

And an on scene load javascript function that simply calls

var date_columns = [...document.querySelectorAll('.datecol')]

for (let i = 0; i < date_columns .length; i++) { 
 var thisDateElement =  date_columns[i].querySelector('.testext') 

thisDateElement.innerHTML =  date_columns[i].getAttribute("data-label-name"); 



I add a couple of these hype projects to their own column/row on a Bloc page.

my exports are still as I describe above, just renaming each export.


Now in Blocs I select the Column element that a hype Embed is in;
I give it the class name: datecol

I then give it an Additional Attribute. data-label-name = some text

I do this for each embed's column.
Using the same class name datecol
Using the same Additional Attribute name data-label-name
This additional Attributes will become where you do you editing in Blocs.

The code in the hype projects will run at load, because our hype projects call it.

The code searches for all the elements with the class name of datecol
It then loops over them looking for their contained element with the class name of testext

The element (.testext) will get the text value that is held by its embeds column's additional html named "data-label-name"

This means you only have add all the duplicate embeds to the Blocs project once.

And you can then do your edits in Blocs using the columns additional attributes.
( you can give them more than one)

Screenshot 2023-08-03 at 18.54.34

Anyway maybe a start..

** UPDATED where we call the Javascript code, originally I had it in the blocks code editor, but now it s simply in the hype projects.


Wow thx. That looks interesting, I'm gonna check this out when I got some more time, since this is already advanced stuff for me.

I'll give feedback as soon as I gave it a try.


I think @MarkHunte's answer probably is the right approach since it uses some of the constructs from Blocs like their custom attributes.

When I was trying to use the Hype Bric that wasn't a possibility. My answer hasn't been tested at all, but this is what I had previously written:

My test license to Blocs is for an older version, so I'm not quite able to fully flesh out the workflow right now... but I think the answer would be "yes, but it will be a little bit tricky."

It will definitely venture into using some JavaScript code territory, but isn't a lot and hopefully relatively straight forward.

Right now Blocs has a "Bric" for Hype that makes it pretty easy to embed Hype content. See:


Unfortunately, there really aren't too many options for this bric to help control inner content.

The good news is that the Hype Bric puts Hype content directly on the webpage (vs in an isolated iframe), so this at least makes modifications a bit easier.

I think there would be two main steps:

  1. Make sure you have a deterministic ordering for each of the elements on the page
  2. Apply values from a table of data in this ordering

Working backwards, if you want the editing to be in Blocs, the way I'd probably store data would be in the Blocs Page Settings > Code section. This could be a little bit of JavaScript JSON. It might look something like:

window.tourDates = [
    {"date" : "Jan 20, 2023", "location": "Nashville, TN"},
    {"date" : "Jan 23, 2023", "location": "San Francisco, CA"},

The JSON data has each line as an entry. It takes the form of "key" : "value", so if you need more data per item in your document, you could add more keys like that. If you will have more entires, then add a whole line that matches the {...}, part in the list.

Now you need to work on step one which can determine which item from the list to apply to which Hype animation on the page.

I'd probably do this within the Hype document itself; it should be able to figure out its basic order on the page by looking at all elements that match the main Hype container div class, and seeing which one it is.

This can be added as a Run JavaScript… action on any On Scene Load event for scenes that need to replace values:

var documentElements = document.getElementsByClassName("HYPE_document");
var currentDocumentElement = hypeDocument.getElementById(hypeDocument.documentId());
var documentIndex = documentElements.indexOf(currentDocumentElement);
var currentTourDate = window.tourDates[documentIndex];

Now in the Hype document, we have the tour date. So the next thing to do would be to take the data from the individual tour date and apply it to elements in the scene.

I recommend doing this through class names, though there's certainly other ways to do it. So for an element meant to contain the date, you could add a class name in the Identity Inspector to a specific element. Let's call that class name "myDate". Likewise you can do the same for location, we'll just call that class name "myLocation".

Then you'd add a bit more code to the On Scene Load function you made before that would find these elements within the current scene and set the values. It would look like:

var currentSceneElement = hypeDocument.getElementById(hypeDocument.currentSceneId());

var dateElements = currentSceneElement.getElementsByClassName("myDate");
for(var i = 0; i < dateElements.length; i++) {
	dateElements[i].innerHTML = currentTourDate["date"];

var locationElements = currentSceneElement.getElementsByClassName("myLocation");
for(var i = 0; i < locationElements.length; i++) {
	locationElements[i].innerHTML = currentTourDate["location"];

And that should generally do the trick.

There's plenty of different approaches and ways to be more sophisticated (including using Hype Data Magic), but this is the general approach.


Thank you so much, it’ll take some time until I can figured it out, since I have exams right now. But I’ll let you know if I was able to get it to work. Thx :heart:

1 Like