htmx.ext...chunked-transfer

[![CI][gha-image]][gha-url]
[![NPM version][npm-image]][npm-url]
[![Conventional Commits][conventional-commits-image]][conventional-commits-url]

> Chunked transfer encoding extension for htmx .

This extension adds Chunked transfer encoding to htmx requests.
\following https://github.com/bigskysoftware/htmx/issues/1911

Install

``sh
$ npm install htmx.ext...chunked-transfer
`

`html

`

Usage

`html

...

`

$3

By default, chunks are appended to the target element. Use hx-chunked-mode="swap" to replace the previous chunk with each new one:

`html



Process



`

Append mode (default): Accumulates all chunks

`
Chunk 1:

Loading...

Chunk 2:

Loading...

50%

Chunk 3:

Loading...

50%

Done!

`

Swap mode: Shows only the latest chunk

`
Chunk 1:

Loading...

Chunk 2:

50%

(replaces previous)
Chunk 3:

Done!

(replaces previous)
`

$3

Comment-only chunks (heartbeats) are automatically ignored:

`html

← Ignored, no DOM update


Content

← Processed

Content

← Processed (has content)
`

Examples

- Using Hono
- JSx SSR Suspense

Testing

`bash


Unit tests

bun test

E2E tests (example/oob)

Terminal 1: Start dev server

bun --cwd example/oob dev

Terminal 2: Run tests

PUPPETEER_EXECUTABLE_PATH=$(which chromium) bun test ./example/oob/index.test.ts
``

[npm-url]: https://npmjs.org/package/htmx.ext...chunked-transfer
[npm-image]: http://img.shields.io/npm/v/htmx.ext...chunked-transfer.svg
[gha-url]: https://github.com/douglasduteil/htmx.ext...chunked-transfer/actions/workflows/ci.yml
[gha-image]: https://github.com/douglasduteil/htmx.ext...chunked-transfer/actions/workflows/ci.yml/badge.svg
[conventional-commits-image]: https://img.shields.io/badge/Conventional%20Commits-1.0.0-yellow.svg
[conventional-commits-url]: https://conventionalcommits.org*