hyperHTML is killing it!

Andrea Giammarchi
Aug 1, 2017 · 3 min read

If you haven’t heard or read about hyperHTML already, allow me to quickly recap of what it is about:

  1. it’s a revolutionary way to use standard ECMAString Template literals
  2. it’s entirely based on the W3C DOM standard (it’s not an innerHTML)
  3. and since everything is based on standards, it requires zero tooling overhead and it works on the client as well as on the server

Oh, hello viperHTML

What if I told you I could create a NodeJS counterpart of hyperHTML capable of sharing exact same views with it?

And what if such library could also automatically stream asynchronously interpolations as Promises, as soon as these are resolved?

That’s right, viperHTML is a real isomorphic library that is incredibly easy to use and on top of that does many extra handy things:

  1. views 100% compatible with those used on the client-side
  2. automatic HTML layout minification, including static JS and CSS
  3. same JIT strategy for unbeatable performance on repeated views
  4. optionally asynchronous layout delivered always ordered, as soon as the top-down chunks are resolved
  5. compatible even with DOM Level 0 events!

And on top of that …

Best in class performance

Ever heard of the Hacker News Progressive Web Application ?

It’s the nowadays TodoMVC showcase application but delivered as PWA.

The viper-news version is delivering a 100% SSR (Server Side Rendered) application via viperHTML, and it takes over via hyperHTML and views loaded on demand thanks to the amazing Webpack bundler.

Insanely easy to use

Forget JS and Web development fatigue, if you know a bit of JS, CSS, and HTML, you’re already productive.

Which IDE works best?” All of them, it’s plain good’ol JavaScript.

Do I need a transpiler?” Only if you want to target older browsers, otherwise no.

Do I need a build step?” Only if you want to optimize the hell out of your Web application, otherwise no.

Do I need …” oh, come on, it’s a RAD (Rapid Application Development) technology, you can overload it as much as you need but you can start from a page like the following one:

most basic hyperHTML setup

… but I already know this FW …

Good, it means you can compare through live examples your Framework of choice: is it React, Vue.js, Polymer, or Angular?

All these links would bring you to a direct comparison from relative “Getting started” examples re-implemented via hyperHTML.

The family is growing

Grouped in viperhtml.js.org and represented by @viperHTML twitter account, the amount of projects around this new way to create blazing fast dynamic Web content are growing up daily:

  1. there is a HyperHTMLElement class, ideal to create Custom Elements and compatible with Babel transpiled code too
  2. there is an Express like hyperhtml-app project that brings Front End routing through pop and push states in a way that feels natural as writing a backend app
  3. there is a basicHTML project which is helping me test-covering 100% of other projects, giving me also the ability to implement a nativeHTML prototype

100% Code Coverage

Everything that has been implemented in hyperHTML, including workarounds for old IE and WebKit browsers, it’s being fully test-covered, and as long as this metric does not mean “perfect software”, what’s working now is granted to do so.

Can you bet on your daily JavaScript stack coverage too?

And the same care for tests and coverage is also used in viperHTML, HyperHTMLElement, and basicHTML: 100% code coverage or GTFO!

The live-tested browser centric hyperhtml-app is constantly tested on real Mobile and Desktop browsers but its internals are fully covered too.

Easy to bootstrap your next PWA

I’m still working on this project, but it brings in a ready-to-go folder structure with some helper to bundle views, similar to viper-news.

I just need time to do all these things! But …

I’m Fully Committed

These days I’m doubling down on Open Source Software and I want to create all the documentation and support that’s needed per each of these projects!

Everyone is welcome to help me on this mission:

make Web Development easy, cross platform, and standard again!

Thanks in advance for spreading the word 💕


If you’re still skeptic about all this, please read this comment before leaving.

Andrea Giammarchi

Written by

Web, Mobile, IoT, and all JS things since 00's. Formerly JS engineer at @nokia, @facebook, @twitter.

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade