HMPL

Product Introduction

1. Definition: HMPL.js is a lightweight server-oriented template language for JavaScript, classified as a templating engine for dynamic web interfaces. It enables HTML rendering with server-driven logic through declarative syntax.
2. Core Value Proposition: It eliminates heavy JavaScript frameworks by providing block-based templating, secure HTML rendering, and server synchronization—optimizing bundle size while enabling dynamic UI updates via server interactions.

Main Features

1. Block-Based Templating: Uses {{#block}} syntax to define reusable UI components triggered by events (e.g., after="click:#btn"). Integrates JSON5 for expressive data structures and DOMPurify for XSS-safe HTML rendering.
2. Customizable Fetch API: Supports all HTTP methods (GET/POST/OPTIONS/TRACE) with full RequestInit customization. Declaratively handles pending/error states via {{#indicator}} blocks tied to HTTP status codes (e.g., trigger="401").
3. Time-Based Syncing: Automatically refreshes content at intervals using cron-like syntax (e.g., sync="every 30s"), reducing manual AJAX calls for real-time dashboards or live feeds.

Problems Solved

1. Pain Point: Reduces client-side complexity for server-driven apps, replacing verbose JavaScript (e.g., Alpine.js event handlers) with concise templates. Mitigates XSS risks via DOMPurify integration.
2. Target Audience:
   • Frontend developers seeking lightweight alternatives to React/Vue.
   • Full-stack engineers building CMS-driven sites (e.g., blogs, admin panels).
   • Teams prioritizing security-compliance in user-generated content rendering.
3. Use Cases:
   • Dynamic form submissions with auto-validation.
   • Real-time data dashboards (e.g., stock trackers).
   • Server-controlled partial UI updates (e.g., notifications, live comments).

Unique Advantages

1. Differentiation: Outperforms HTMX in HTTP method support and JSON5 integration, while surpassing Alpine.js in XSS protection. At ~24KB gzipped, it’s 1.14x smaller than Alpine and 1.67x smaller than VanillaJS equivalents.
2. Key Innovation: Combines SSR-like safety with client-side interactivity via "request blocks," enabling complex server interactions without framework bloat. Achieves 100% test coverage for reliability.

Frequently Asked Questions (FAQ)

1. Is HMPL.js suitable for SEO-heavy sites? Yes, its server-driven templates render SEO-friendly static HTML while enabling dynamic hydration without JavaScript overhead.
2. How does HMPL handle security vulnerabilities? It enforces DOMPurify sanitization by default for all rendered HTML, blocking XSS attacks in user-generated content.
3. Can HMPL integrate with existing backends? Absolutely—it works with any JSON API via customizable fetch requests, including custom headers and CORS support.
4. What’s the learning curve for HMPL? Developers familiar with Handlebars or HTMX adapt quickly due to its intuitive block syntax and comprehensive documentation.
5. Does HMPL support TypeScript? Yes, it includes TypeScript definitions for type-safe template development and error prevention.