htmx

htmx Examples

Overview

htmx is a lightweight JavaScript library that updates parts of a page by making simple HTTP requests and swapping in server-rendered HTML. That makes it a strong match for Lua Server Pages (LSP), where the server already excels at generating HTML directly.

This directory currently contains the introductory example used in the tutorial LSP + htmx: A Powerful Duo for Embedded Web Apps.

Files

• introduction/index.html - The browser-facing page for the introductory htmx example.
• introduction/users.lsp - Server-side LSP endpoint that returns the HTML fragment used by the page.

How to run

Start the introduction example with the Mako Server:

cd htmx
mako -l::introduction

For more detail on starting the Mako Server, see the command line video tutorial and the command line options documentation.

After the server starts, open the HTTP URL printed in the Mako console.

How it works

The browser loads index.html, and htmx issues HTTP requests to users.lsp whenever the page needs updated server-rendered content. Instead of exchanging JSON and manually rebuilding the UI in JavaScript, the server returns ready-to-insert HTML fragments.

Packaging for Xedge

The Xedge-compatible app in this directory is the introduction example. See Xedge App Deployment for the detailed deployment workflow.

cd introduction
zip -D -q -u -r -9 ../htmx-introduction.zip .

Upload the generated ZIP with the Xedge App Upload tool.

Notes / Troubleshooting

• If the page loads but nothing updates, confirm that users.lsp is being served and that JavaScript is enabled.
• This example keeps the frontend intentionally small so the htmx request/response pattern is easy to inspect.