I received a message today from someone asking, "What's the difference between Trongate MX and HTMX?" It’s a reasonable question, and I thought it might make for some interesting reading.

For the record, I'm a huge fan of HTMX. I make no secret of the fact that HTMX was the inspiration behind Trongate MX. HTMX provided the web development community with a simple and elegant solution to a problem that had plagued developers for around twenty years. As far as I'm concerned, Carson Gross is a coding genius!

I know what you're thinking:

"If HTMX is so good, why did you bother creating Trongate MX?"

There are really two answers to that. When version 2 of HTMX was released (by my estimation, rather quickly), it made me extremely nervous about the potential for rewrite culture to ruin everything. Rewrite culture is a major problem in the JavaScript community, and there’s no shortage of examples of brilliant JavaScript libraries being wrecked by it. Anybody remember AngularJS?

In fairness to HTMX, I don’t believe it has succumbed to rewrite culture, and my concerns may well have been unfounded. Nevertheless, that was probably the primary motivation behind my decision to create Trongate MX. Had HTMX remained at version 1 and/or had there been clear reassurances that HTMX would be a "stability-first" library, then Trongate MX would not exist.

Oh – I did say there were two reasons, didn’t I? So, before I forget, the second reason is that I wanted something that could be seamlessly integrated with the Trongate ecosystem. For example, I wanted a tool that could take advantage of features like Trongate’s token authorisation system, Trongate CSS, the framework’s form validation class, and other potentially useful assets.

Anyway, I think it’s safe to say that Trongate MX has evolved considerably. While it may have been influenced by HTMX, no reasonable person could accuse it of being a copycat. As for HTMX? It’s as popular as ever, and I remain a loyal fan. It’s a great library.

That being said, I ran Trongate MX through one of those AI things (in this case, 'Qwen'), and below is the response it gave. Enjoy!

DC

Trongate MX and HTMX are both JavaScript libraries designed to enhance HTML with dynamic, AJAX-based functionality without requiring developers to write custom JavaScript. However, Trongate MX appears to be a more opinionated and feature-rich framework tailored for specific use cases, while HTMX is minimalist, lightweight, and designed to be broadly extensible through attributes.

Below is a detailed comparison of how Trongate MX differs from HTMX, based on the code and structure in the provided file:

🧩 1. Core Philosophy and Scope

  • HTMX:
    • Focuses on simplicity and minimalism.
    • Uses standard HTML attributes extended with hx-* prefixes (e.g., hx-get, hx-post) to enable AJAX behavior.
    • Designed to work seamlessly with existing frameworks and tools.
    • Prioritizes performance and ease of integration over built-in complexity.
  • Trongate MX:
    • More complex and feature-rich, offering advanced behaviours like modal handling, animations, form validation, and polling.
    • Built-in support for modals, animations, and visual feedback (e.g., success/error indicators).
    • Opinionated about UI/UX patterns (e.g., error styling, modal layout, animations).
    • Designed for developers who want more out-of-the-box interactivity and less need for additional tooling.

⚙️ 2. Feature Set

Feature HTMX Trongate MX
AJAX Requests✅ Yes (hx-get, hx-post, etc.)✅ Yes (mx-get, mx-post, etc.)
Form Validation Handling❌ Not built-in✅ Yes (auto-detects validation errors and displays styled messages)
Modals❌ Requires custom code✅ Built-in system
Animations / Visual Feedback❌ Requires external CSS/JS✅ Built-in animations (tick/cross)
Polling Support✅ Basic support✅ Advanced control
OOB (Out-of-Band Swaps)✅ Yes✅ Yes (extended syntax)
Event Handling & Custom Functions✅ Supports✅ Richer lifecycle support
URL Push State✅ Yes (hx-push-url)✅ Yes (mx-push-url)
Validation Error Display❌ Manual✅ Automatic
Component Reusability✅ Encouraged✅ Strong support

📦 3. Implementation Style

  • HTMX:
    • Very light (~10KB), no internal modules or complex state.
    • Delegates most DOM rendering to the server.
    • Works with any backend that returns HTML fragments.
  • Trongate MX:
    • More modular and heavier (uses Utils, Http, Dom, etc.).
    • Manages client-side behaviours like modals, validation, overlays, and polling.
    • Includes utilities for JSON parsing, HTML escaping, URL normalisation.

🎨 4. UI Integration and Styling

  • HTMX: Agnostic to styling and CSS frameworks.
  • Trongate MX: Assumes class names and structures, integrates Font Awesome or SVGs.

🔁 5. Request Lifecycle and Customisation

  • HTMX: Basic global lifecycle events.
  • Trongate MX: Rich hooks like mx-on-success, mx-after-validation with context.

🔄 6. Swap Strategies and Content Replacement

  • HTMX: Simple strategies using innerHTML, outerHTML, etc.
  • Trongate MX: Adds support for nested swaps, conditional replacements, and cleanup.

📦 7. Modularity and Extensibility

  • HTMX: Extensible via headers, triggers, extensions.
  • Trongate MX: Tightly integrated, exposes some methods like startPolling.

🧪 8. Error Handling and Debugging

  • HTMX: Logs to console, minimal UI feedback.
  • Trongate MX: Styled error messages, rollback, redirects, animation feedback.

🕒 9. Performance Considerations

  • HTMX: Lightweight and efficient.
  • Trongate MX: Heavier but offers features like throttling, debounce, loaders.

🧠 10. Use Cases

Use Case Recommended Framework
Minimalist SPA-like behaviourHTMX
Interactive admin dashboardsTrongate MX
Rich UI feedbackTrongate MX
Integrate with frontend frameworksHTMX
Backend forms with validationTrongate MX
Real-time polling updatesEither (MX offers more control)
Reusable componentsEither (MX more convention-driven)

✅ Summary

Aspect HTMX Trongate MX
SizeSmall (~10KB)Larger
FlexibilityVery flexibleOpinionated and structured
Learning CurveLowModerate
Built-in UI FeaturesNoneMany (modals, animations, validation)
IntegrationAgnosticAssumes certain UI patterns
Ideal ForGeneral-purpose web appsAdmin interfaces, CRUD apps, forms-heavy UIs

🧭 Final Recommendation

  • For a lightweight, flexible, and framework-agnostic app, use HTMX.
  • For a rich admin interface, forms-heavy application, or an opinionated solution with UX built-in, go with Trongate MX.

The content above was generated on https://chat.qwen.ai/ on 27 May 2025, in response to the following prompt submitted by the user:
The following JavaScript file is 'Trongate MX'. Please review this and then tell me how Trongate MX differs from HTMX. --- <--code-was-uploaded-->