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)

Searching Database…

49.6K ·GitHub
Htmx
Что это такое?htmx позволяет использовать AJAX, CSS Transitions, WebSockets и Server Sent Events прямо в HTML с помощью атрибутов, так что можно создавать динамические интерфейсы без написания JavaScript.
Это JavaScript-фреймворк или что-то полегче?Это небольшая клиентская библиотека без зависимостей, а не полноценный фреймворк. Она расширяет обычный HTML новыми атрибутами и не требует системы сборки или модели компонентов.
Как добавить это в проект?Установите как npm-пакет или просто подключите скрипт тегом script; затем добавьте атрибуты вроде hx-post и hx-swap к существующим HTML-элементам.
Нужен ли сборщик или серверный фреймворк, чтобы это использовать?Никакой конкретный бэкенд или инструменты сборки не требуются. htmx нужна только серверная конечная точка, которая будет отвечать на AJAX-подобные запросы, вызываемые её атрибутами.
Есть ли подводный камень при установке через npm?Да: в npm есть старый, нерабочий пакет с именем именно 'htmx', а настоящий пакет называется 'htmx.org'.
Что запускает запросы htmx?Не только клики и отправка форм: любой элемент может отправить запрос по любому событию, и можно использовать любой HTTP-метод (GET, POST, PUT, DELETE, PATCH), а не только GET и POST.
Может ли htmx обновлять не всю страницу целиком?Да, ответы могут вставляться в любую часть страницы, а не только заменять весь экран, что даёт точный контроль над тем, какой HTML обновляется.
Что было до htmx?htmx — преемник intercooler.js, более раннего проекта того же автора, который первым реализовал AJAX через атрибуты в HTML.
Зачем вообще нужен htmx?Автор задался вопросом, почему только ссылки и формы могут отправлять HTTP-запросы, почему только клики и отправки могут их запускать и почему возможна только полная замена страницы. htmx снимает эти произвольные ограничения HTML.
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