htmx README

The project's README from github.com/bigskysoftware/htmx. As one markdown file: README.md.

</> htmx

high power tools for HTML

Discord Netlify Bundlephobia Bundlephobia

introduction

htmx allows you to access AJAX, CSS Transitions, WebSockets and Server Sent Events directly in HTML, using attributes, so you can build modern user interfaces with the simplicity and power of hypertext

htmx is small (~14k min.gz'd), dependency-free & extendable

motivation

By removing these arbitrary constraints htmx completes HTML as a hypertext

quick start

  <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/htmx.min.js"    
          integrity="sha384-2OatzQy1H+Zd/IIrjr1TcuDGqLXeHhbooAyJY1KdQMKnr4LZ22k31GBLdYKHmVjg" 
          crossorigin="anonymous"></script>
  <!-- have a button POST a click via AJAX -->
  <button hx-post="/clicked" hx-swap="outerHTML">
    Click Me
  </button>

The hx-post and hx-swap attributes tell htmx:

"When a user clicks on this button, issue an AJAX request to /clicked, and replace the entire button with the response"

htmx is the successor to intercooler.js

installing as a node package

To install using npm:

npm install htmx.org --save

Note there is an old broken package called htmx. This is htmx.org.

website & docs

contributing

Want to contribute? Check out our contribution guidelines

No time? Then become a sponsor

hacking guide

To develop htmx locally, you will need to install the development dependencies.

Run:

npm install

Then, run a web server in the root.

This is easiest with:

npx serve

You can then run the test suite by navigating to:

http://0.0.0.0:3000/test/

At this point you can modify /src/htmx.js to add features, and then add tests in the appropriate area under /test.

htmx uses the mocha testing framework, the chai assertion framework and sinon to mock out AJAX requests. They are all OK.

haiku

javascript fatigue:
longing for a hypertext
already in hand

htmx (bigskysoftware/htmx)

frontend-framework
Searching Database…

49.6K ·GitHub
Htmx
What is this?htmx lets you use AJAX, CSS Transitions, WebSockets and Server Sent Events directly in HTML through attributes, so you can build dynamic UIs without writing JavaScript.
Is it a JavaScript framework or something lighter?It's a small, dependency-free client-side library, not a full framework; it extends plain HTML with new attributes rather than requiring a build system or component model.
How do I add it to a project?Install it as an npm package, or just drop in the script via a script tag; then add attributes like hx-post and hx-swap to your existing HTML elements.
Do I need a build step or backend framework to use it?No specific backend or build tooling is required; htmx just needs a server endpoint to respond to the AJAX-style requests triggered by its attributes.
Is there a gotcha when installing via npm?Yes: there's an old, broken package literally named 'htmx' on npm - the real package is 'htmx.org'.
What triggers htmx requests?Not just clicks and form submits - any element can issue a request on any event, and any HTTP verb (GET, POST, PUT, DELETE, PATCH) can be used, not just GET and POST.
Can htmx update more than the whole page?Yes, responses can swap into any part of the page, not just replace the entire screen, giving fine-grained control over what HTML gets updated.
What came before htmx?htmx is the successor to intercooler.js, an earlier project by the same author that pioneered AJAX-via-attributes in HTML.
Why does htmx exist?The author questioned why only links and forms could make HTTP requests, why only clicks/submits could trigger them, and why only full-page swaps were possible - htmx removes those arbitrary HTML constraints.
What are similar projects?feathers, react-admin, swagger-ui, msw, templ, wangEditor, html-webpack-plugin, ky
Which topics is it in?htmx, rest, frontend-framework, websocket, rest-api, html, frontend, library, javascript, web, developer-tools
Creator
bigskysoftware
Size
137.4 MB
Stars
49.6K
Updated
CommitSep 22Releasev4.0.0Aug 28
Age
6y
Commits · 90 Days