mizu.js is a lightweight HTML templating library designed to simplify web development by bringing back the simplicity of plain HTML and JavaScript.

Features:

• Plug-and-play: mizu.js can be included and used instantly with vanilla JavaScript expressions and HTML.

• Cross-platform compatibility: It is compatible with a wide range of JavaScript and TypeScript runtimes, including major browsers.

• Any-side rendering: mizu.js allows content rendering wherever needed with user-friendly APIs. It works both client-side and server-side. On the client-side, rendering is explicit, requiring the *mizu attribute to enable mizu.js on a subtree, and reactivity is enabled, so changes to contexts will trigger a re-render. On the server side, rendering is implicit, so the *mizu attribute is not required and reactivity is disabled, meaning changes to contexts are not tracked and will not trigger a re-render.

• Flexibility: Suitable for single page applications, static websites, and interactive websites.

• Simplicity: mizu.js is close to vanilla JavaScript and HTML, ensuring a minimal learning curve.

• Customizability: It allows easy opting in/out of features.

• Hackable: Developers can pick features and customize their setup using developer-friendly APIs and a custom builder.

• Community-driven: Build, share, and reuse custom elements and directives to enhance development.

mizu.js uses directives (special HTML attributes) to instruct how elements should be processed. Some of the directives include:

• *mizu: Enables mizu.js rendering for the element and its children.

• *set: Sets context values for an element and its children.

• *if: Conditionally renders an element.

• *for: Renders an element for each iteration performed.

• *text: Sets element's textContent.

• *html: Sets element's innerHTML.

• *mustache: Enables content interpolation within mustaches ( {{ and }}) from Text child nodes.

• @event: Listens for a dispatched Event.

• :attribute: Binds an element's attribute value.

• ::value: Binds an <input>, <select> or <textarea> element's value attribute in a bi-directional manner.

• %http: Performs a fetch() call that can be handled by %response directives.

• *once: Renders an element once and skip subsequent updates.

• *refresh: Reprocesses an element at a specified interval (in seconds).

mizu.js also provides APIs for client-side and server-side use, with default directives enabled for each. The server-side API can generate static files from various sources, such as strings, local files, callback returns, and URLs.