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 让你直接在 HTML 中通过属性使用 AJAX、CSS 过渡、WebSockets 和 Server Sent Events，无需编写 JavaScript 就能做出动态界面。
它是 JavaScript 框架，还是更轻量的东西？它是一个小巧、无依赖的前端库，而不是完整的框架；它通过新增属性扩展普通 HTML，不需要构建系统或组件模型。
我该如何把它加入项目？可以作为 npm 包安装，也可以直接通过 script 标签引入脚本；然后在现有 HTML 元素上添加 hx-post、hx-swap 等属性即可。
使用它需要构建步骤或后端框架吗？不需要特定的后端或构建工具；htmx 只需要一个服务器接口来响应由其属性触发的 AJAX 类请求。
通过 npm 安装时有什么需要注意的坑吗？有：npm 上确实存在一个旧的、已损坏的、名为 'htmx' 的包，真正的包是 'htmx.org'。
什么会触发 htmx 请求？不仅限于点击和表单提交——任何元素都可以在任何事件上发起请求，而且可以使用任何 HTTP 动词（GET、POST、PUT、DELETE、PATCH），而不只是 GET 和 POST。
htmx 能只更新页面的一部分，而不是整个页面吗？可以，响应内容可以替换页面的任意部分，而不必替换整个屏幕，从而精细地控制哪些 HTML 被更新。
htmx 之前有什么？htmx 是 intercooler.js 的继任者，intercooler.js 是同一作者早期的项目，率先实现了通过属性在 HTML 中使用 AJAX。
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