module HTMX for ProcessWire: Build reactive, state-aware components effortlessly

[ukyo]

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!

 

 

 

[Ivan Gretsky]

I can't see the video. Is it just from where I'm at?

[ukyo]

@Ivan Gretsky I don't know why but video is there and I can see 🙂

[BitPoet]

21 hours ago, ukyo said:

@Ivan Gretsky I don't know why but video is there and I can see 🙂

The video uses the HEVC codec (h.265). Firefox on Windows doesn't support h.265 due to licensing issues. A workaround is to download the video and open it with whatever video viewer is associated with mp4 files.

[ukyo]

@BitPoet Thank you for info 🙂 I updated video

[elabx]

Fantastic, thank you so much ukyo!