🏠 back to Observable

Hypertext literal

We’ve been hard at work on a new and improved tagged template literal for HTML and SVG, and we’d love your feedback!

Please try it in your notebooks and let us know what you think by replying to this thread. Thank you!

10 Likes

Looks really powerful. May try the iterable serialization with an Advent of Code puzzle, perhaps with css grid.

In the near future, we plan to incorporate hypertext literal into our standard library as the default way of generating content on Observable.

How backwards compatible is this with the previous html tagged literal? Should anyone worry about this breaking past notebooks?

1 Like

It is not backwards compatible, although in many cases it is trivial to adopt the new behavior. We are not going to redefine the behavior of the existing literal and break old notebooks. The exact rollout strategy is still to be determined, but preserving the behavior of existing notebooks is a requirement.

7 Likes

Cool! I’ve really enjoyed using the built-in html literal. This will be even better!
I was intrigued by this line: “If you want incremental updates for performance (or transitions), you can opt-in, but it’s nice to keep things simple by default.”
What would be the pattern for using htl on Observable with transitions or incremental updates?

That wouldn’t be handled directly by hypertext literal. You could use another library such as D3 to implement transitions or incremental updates, perhaps selecting elements that were generated by the html template literal.

I found something which seems like a little bug on the new html. I could be wrong, but the standard html works but the latest html won’t in this case

In this notebook the button when clicked won’t change from ON to OFF using the latest html (hypertext literal html), but the standard lib html works fine.

It looks like your notebook is using HTM with React, not Observable’s hypertext literal? Hypertext literal creates DOM directly and is not suitable for using with a virtual DOM library such as React.

1 Like