remix logo

Hacker Remix

Show HN: Mizu.js – Lightweight HTML templating library for any-side rendering

225 points by lowlighter 5 months ago | 86 comments

Hey HN,

I'd like to share a fun project I've been working on: mizu.js.

It's a js library that add functional attributes support into your html, designed to be a simple and flexible alternative to fully-fledged web frameworks (such as Vue, React, and Angular), while offering more capabilities than other lightweight options (like Alpine.js and htmx).

As it's written using modern ES features and due to its isomorphic nature, it can be run in both browsers and runtimes (Node, Deno, Bun) without any changes. This makes it ideal for client-side and server-side rendering, as well as static site generation, whichever environment you prefer.

Just include the script in any web page (or backend) to get started. You can template content, bind attributes, add interactivity, handle HTTP interactions, create custom components, and much more — all out of the box, without any configuration, transpilation steps, or builds.

I hope you'll find mizu.js as exciting and useful as I do and I'd love to get your feedback! You can learn more about it at https://mizu.sh!

Online playground: https://mizu.sh/playground Custom builder: https://mizu.sh/build Code coverage: https://mizu.sh/coverage GitHub: https://github.com/lowlighter/mizu

## Motivation ##

Nowadays, setting up a complete environment and installing thousands of packages is often required just to create a simple "Hello World" page. Yet, with the current ECMAScript standard, vanilla JS has never been more powerful. It offers built-in custom HTML components, proxies for changes tracking, weak references for better memory management, and many new data structures and methods.

So why is web development still insanely complex?

mizu.js aims to avoid adding bloat on top of native features, and instead focus on providing convenience helpers. It's basically "glue" around all these native features with added sugar, a recipe for a lightweight yet powerful utility.

All evaluated expressions are interpreted as vanilla JavaScript, and you add your instructions directly into your HTML. So if you know already know about JS/HTML, then you're already 80% know of how to use mizu.js (add an extra 10% if you've used Vue, Alpine.js or htmx in the past as some syntax and concepts are inspired by it), the rest is basically just remembering the directive names. The learning curve is that small.

Also, you may have heard of https://matcha.mizu.sh, a CSS stylesheet to instantly make your web page stylized. Well, it's a great companion to mizu.js. With both of them, you can create MVPs for your projects super fast!

esco27 5 months ago

I appreciate the no-build-step approach. It’s refreshing to see a return to simplicity, even if it feels cyclical—similar libraries have come and gone, but that’s how the web evolves. As browsers continue to improve and embrace web standards, it makes sense to lean into tools that trend toward minimalism and simplicity. Great job!

cleanerbob 5 months ago

[dead]

spankalee 5 months ago

I love that this lets you create custom elements! I think that's a big missing feature from HTMX (even though HTMX can already use custom elements).

I'm working on a somewhat similar system called Heximal. It focuses on adding full-fledged templating to the <template> element, and full declarative component definitions to HTML, plus some built-in custom elements like <h-var>, <h-out>, <h-scope>, <h-include>, and <h-fetch> that make HTML more of a declarative programming language.

A big difference from HTMX is that it doesn't rely on magic attributes, but instead adds full data-binding with rich expressions for any attribute or text content, and control flow, to <template>. And component definitions include defining properties, attributes, styles, etc.

These things are being proposed for HTML, so Heximal is somewhat of a polyfill for HTML from the future. Or it's a bit like Tangle or Curvenote.

https://github.com/elematic/heximal/

mdhb 5 months ago

I’m so glad you’re still working on this, I hadn’t seen any updates in the repo lately and wasn’t sure if you changed focus areas or something.

spankalee 5 months ago

Thanks. I'm working on a few things. I'll get back to Heximal soon!

pickpuck 5 months ago

Does it implement the proposed Declarative Custom Element spec with slice templating?

https://github.com/EPA-WG/custom-element

spankalee 5 months ago

There is no declarative custom element spec yet. Just a bunch of discussions.

corinroyal 5 months ago

I love the information architecture of this site. You jump right in to demonstration code and a reference and only later the marketing text. So refreshing. I can see at a glance what the project is and what makes it different. Kudos!

lowlighter 5 months ago

Thanks! It's always hard to find a nice balance between explaining your project and showing how it actually work

replwoacause 5 months ago

Here is an alternative without the funky license

https://data-star.dev