htmx-playground

Htmx Playground

A simple code sandbox for playing around with HTMX. No setup needed!

HTMX Playground

HTMX Playground

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

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.

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

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.

Limitations

  • No page navigation
  • Limited mobile support

Libraries used

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

Contributing

I made this project because I wanted it to exist, and nothing else. You are welcome to create issues, and I'll look into it when I have time, but expect a bumpy road if you want to extend the code yourself.

Top categories

svelte logo

Want a Svelte site built?

Hire a Svelte developer
Loading Svelte Themes