Jump to content

Recommended Posts

Posted

If you love the simplicity of ProcessWire's API but want the reactive, SPA-like feel of modern frontend frameworks without writing complex JavaScript, this module bridges that gap. It brings native Server-Side Component state hydration, Out-Of-Band (OOB) swaps, and strict security to your ProcessWire application using HTMX.

🚀 What does it do?
This module transforms how you write frontend components in ProcessWire:

  • True Stateful Backend Components: It introduces Component and Ui base classes. Your PHP components automatically rehydrate their state (variables, dependencies, $page assignments) between HTMX AJAX requests! No need to manually parse POST payloads.
  • Auto-Discovery: Just place your components in your site directories. The module automatically discovers and securely namespaces them (Htmx\Component and Htmx\Ui).
  • Zero-Javascript Reactivity: You can handle form submissions, counters, validation, and multi-field updating dependencies directly from PHP using HTMX attributes.
  • Cryptographic Security: The module uses strict HMAC-SHA256 signatures with TTL (Time-To-Live). This guarantees that bad actors cannot modify state payloads or trigger invalid endpoint logic in the browser.
  • WebSockets & SSE Ready: It has built-in helpers to easily hook Server-Sent Events (SSE) and WebSockets onto your templates without exhausting PHP-FPM pools globally.

🛠 How it looks in your code
You simply create a PHP component class, define some public properties, and write an endpoint action:

<?php namespace Htmx\Component;

use Totoglu\Htmx\Component;

class ClickCounter extends Component {
    public int $count = 0;

    public function increase() {
        $this->count++;
    }
}

Then, you can render it anywhere in your site with a single line:

/** @var Htmx $htmx */
echo $htmx->renderComponent(ClickCounter::class);

View the documentation and examples on Github

Feel free to try it out, run the tests included in the repo, and let me know your thoughts or feedback!

  • Like 1

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
×
×
  • Create New...