HTMX Playground HTMX playground with examples

"Finally a way to use HTMX as a SPA framework"
Hackernews commenter

HTMX Playground is a simple code sandbox for playing around with HTMX. No setup needed!

Check out the examples! I've adapted them from the original htmx.org examples.

It allows you to write code in a backend-like environment, running entirely inside the browser. You can define endpoints within server.js and render your own templates. It will run a mock server that intercepts outgoing requests from HTMX. The request handling and templating engine should be very familiar to people who use Django. In principle, this project isn't specific to HTMX, so you are free to try out other libraries as well.

Saving & sharing

  1. Press "Copy as JSON" in the top right.
  2. Upload the contents as a Gist, and enter the raw URL in "Load Playground"
  3. The URL on this page will update, and can now be shared.

The code is available on GitHub.

Caveats

  • No page navigation
  • Limited mobile support

Additionally, server.js can be stateful (such as in the Click to Edit example), but any update to the state in the on.get("/") view will be lost. This is due to the fact that the initial page load is retrieved in a seperate iframe, before updating the on-screen iframe.

Libraries used

  • Svelte
  • Ace (code editor)
  • PollyJS (mock server)
  • Nunjucks (templating engine)