Text in Hype after exporting it to HTML

Is there a way that the text i wrote in hype to get it inside html file, so i can edit it after that in html without going back to hype

Not really, you will need to edit from Hype.

In a pinch, you can edit the *_hype_generated_script.js file, as this contains all the inner HTML, but it is in a javascript form so you’ll have to be careful with quoting and I’d only do small changes. Since this is the export, changes won’t get propagated back and this isn’t recommended nor supported.

If this is something you need to do regularly (say often updating data), a more sophisticated solution would be to use javascript and your own data file that could read and insert into specific elements.

Is there a hope to do it in future :slight_smile: ?

I think the suggestion @jonathan makes is not that hard to do but if you want possibley an even simpler way then you could use css - content to set the content of your text.

This has a couple of benefits.

Any css you place in the projects head file will normally be live in the Preview and Hype layout.

The styles also are exported in the html ( afaik).
Which means you can edit the html after exporting.

Here is an example. Also I would suggest you use class names for the elements/css rather than id.
This may save hassle later if you need to change things up and giving an element a class name especially just for css is just a simple to add and access as an id.

Note , to set content you can set it the be before or after existing content. The example below sets it before but the elements never have any original content.

testTextContent_mhv1.hype.zip (17.1 KB)

thank you so much, the point that if i give my client any project he asked to have ability to edit the text, which not logic by doing that in css, it seems there is no choice to do it in Normal HTML :frowning: , But i appreciate your reply :slight_smile:
best regards

Well not really,

As mentioned above. You can have the text pulled from a .txt file. which they can edit.

Any complexity comes from how many elements and pointing to the right ones.

Can you put up an example project with some elements that have text you want to change.
Also an example of what you would change it to… in html

It would then be easier to possibly post an example that does this relative to you…

get the text from a google sheet?



This does work, and I am using it a lot.
Incidentally I have just completed writing code to do similar to this but with a private (company domain) google share group using app-script as opposed to a public google jsonp. I can directly access the drive files. Works amazingly well actually.

But I was actually thinking they just need to use your XMLHttpRequest code to do this.

Which means they just need external .txt file/s which the client will understand.

	 <script  type="text/javascript"> function myCallback(hypeDocument, element, event){ 

var request = new XMLHttpRequest();
request.open('GET', '/sometext.txt', true);

request.onload = function() {
  if (request.status >= 200 && request.status < 400) {

    var obj =  request.responseText 
 document.querySelector('.text1').innerHTML = obj

  } else {


request.onerror = function() {




if("HYPE_eventListeners" in window === false) {
window.HYPE_eventListeners = Array();

the text file can be text with html

<h1>line one</h1>


or plain text.


Not in the short term, but I do think it is a good feature request from the perspective of data-driven documents and supporting localization. In other words, if you need to do this please move forward with the excellent solutions above :slight_smile:.

1 Like