htmx 팀이 8개월의 작업 끝에 2026년 8월 28일 htmx 4.0.0을 정식 공개했다. 서버가 렌더링한 HTML 조각을 속성만으로 페이지에 끼워 넣는 이 라이브러리는 그동안 자바스크립트를 최소화하려는 백엔드 중심 개발자들에게 꾸준히 지지를 받아왔다. 이번 4.0은 겉으로 드러나는 사용 방식은 htmx 2와 거의 같지만, 내부 구조와 몇 가지 기본 동작에서 의도적인 방향 전환을 담았다. 개발팀은 이 변화를 두고 htmx 기반 애플리케이션이 '100년 가는 웹 서비스'로 남을 수 있는 자리에 놓이도록 명시적으로 선택한 결과라고 설명한다.
출발점은 별개 프로젝트였던 fixi를 만들며 fetch() API와 비동기 프로그래밍에 익숙해진 경험이었다. htmx는 하위 호환성 문제 때문에 오랫동안 XMLHttpRequest를 사용해 왔는데, 스트리밍 HTML에 관심이 있던 Christian이 fetch() 기반으로 옮기면 라이브러리 전반이 단순해진다는 아이디어를 제기하면서 논의가 본격화됐다. 이후 Michael과 Alex가 합류해 fixi와 htmx 테스트 스위트를 이식하는 방식으로 개발이 진행됐고, 그 과정에서 기존 htmx가 왜 그렇게 동작했는지를 다시 발견하며 구현이 점차 2.x에 가까워졌다고 한다. 그 결과 2.x와 4.x의 실제 동작 차이는 크지 않은 편이다.
세 가지 핵심 변화
사용자 관점에서 눈여겨볼 변화는 세 가지다. 첫째, 내부 통신이 XMLHttpRequest에서 fetch()로 옮겨갔다. 대부분의 사용자에게는 투명하게 처리되지만, 이 전환이 확장(extension) 구조와 스트리밍을 다시 설계할 수 있는 토대가 됐다는 점이 중요하다.
둘째, 속성 상속 기본값이 바뀌었다. htmx 2에서는 intercooler.js 시절부터 이어진 방식으로 부모 요소에 붙인 속성이 자식 요소에까지 기본으로 적용됐다. CSS에서 영감을 받은 이 방식은 강력했지만 CSS가 그렇듯 때때로 이해하기 어렵다는 문제도 함께 안고 있었다. htmx 4에서는 속성 이름 뒤에 :inherited를 명시적으로 붙이지 않는 한 상속되지 않는다. 팀은 이 부분이 2에서 4로 넘어갈 때 가장 큰 마이그레이션 부담이 될 것으로 보고, 상속 표시가 필요한 위치를 찾아주는 커맨드라인 도구를 함께 제공한다. 반대로 hx-disinherit 같은 속성은 더 이상 필요 없어 제거하면 된다.
셋째, 이벤트 체계가 정리됐다. 그동안 라이브러리 수명에 걸쳐 유기적으로 늘어난 이벤트들은 언제 무엇이 발생하는지 파악하기 어려웠는데, htmx 4에서는 모든 이벤트가 htmx:phase:action[:sub-action] 형태의 규칙을 따른다. 업그레이드 검사 도구는 hx-on 속성과 자바스크립트 코드에서 찾을 수 있는 옛 이벤트 이름을 표시해 준다.
히스토리 처리와 새 기능
뒤로 가기 지원 방식도 달라졌다. htmx 2는 페이지 스냅샷을 localStorage에 캐시했는데, 이 스냅샷에 서드파티 자바스크립트가 만든 DOM 변경이 함께 담겨 복원 시 로직 없이 변경 흔적만 남는 문제가 잦은 이슈의 원인이었다. htmx 4는 localStorage 캐시를 쓰지 않고, 뒤로 가기 시 페이지를 다시 가져와 ` 또는 [hx-history-elt] 요소에 교체해 넣는다. 이렇게 하면 서드파티 라이브러리가 대체로 자연스럽게 동작하고, 요청 캐싱이 잘 갖춰져 있으면 속도도 빠르다. 로컬 캐싱을 원한다면 sessionStorage에서 히스토리를 복원하고 Alpine.js 같은 스크립팅과 잘 연동되도록 설계된 hx-history-cache 확장을 별도로 사용할 수 있다.
새 기능도 두 가지가 눈에 띈다. 하나는 기본으로 지원되는 모핑(morphing) 스왑이다. 저자가 htmx 2에 넣을지 고민했던 idiomorph를 Michael이 알고리즘을 개선해 통합했다. 다른 하나는 태그로, 기존 out-of-band 스왑과 비슷하지만 단순히 한 요소를 새 버전으로 교체하는 것 이상을 할 때 의도가 더 분명하게 드러난다. 여기에 fetch() 전환을 계기로 확장 구조를 다시 설계하면서 여러 새 확장과 세 종의 스트리밍 HTML 확장이 만들어졌고, Alpine.js·jQuery·hyperscript에서 영감을 받아 DOM 기반의 HATEOAS 친화적 반응성을 표방하는 소형 프런트엔드 스크립팅 도구 hx-live도 새로 등장했다. 어떤 확장을 골라야 할지 고민하고 싶지 않은 사용자를 위해, 인기 있는 확장을 함께 묶은 htmax.js` 번들도 배포판에 포함됐다.
도입을 고민하는 실무자를 위한 참고
주목할 점은 배포 정책이다. 팀은 버전을 명시하지 않은 CDN URL에 의존하는 사용자를 강제로 끌어올리지 않기 위해 NPM에서 4.0을 latest로 지정하지 않았다. 2027년 초까지 2.x가 계속 latest로, 4.0은 next로 유지되며 웹사이트만 4.0을 기준으로 삼는다. 설치는 패키지 매니저에서 4.0.0 버전을 지정하거나 CDN으로 연결하면 된다. 마이그레이션을 돕는 업그레이드 도구와 에이전트 스킬, 그리고 LLM을 위한 스킬 파일도 함께 제공된다.
실무 관점에서 이번 릴리스의 성격은 분명하다. 급진적 재설계가 아니라, 내부는 현대적 API로 갈아끼우되 오래 유지되는 서비스에 유리하도록 몇 가지 기본값을 정리한 안정 지향 업데이트에 가깝다. 다만 속성 상속 폐지와 이벤트 이름 변경은 규모가 큰 코드베이스일수록 손이 가는 작업이라, 제공되는 검사 도구로 영향 범위를 먼저 파악하는 편이 안전하다. htmx 2는 무기한 지원되므로 당장 옮겨야 할 이유가 없다면 서두를 필요는 없으며, 새 프로젝트를 시작하거나 히스토리·스트리밍 관련 이슈를 겪고 있다면 4.0의 방향성이 검토할 만한 선택지가 된다.