@flightdev/ui-htmx

HTMX adapter for Flight Framework. Server-driven UI with HTML over the wire.

Table of Contents

- Installation
- Quick Start
- Configuration
- Template Helpers
- Extensions
- API Reference
- License

---

Installation

``bash
npm install @flightdev/ui @flightdev/ui-htmx
`

No peer dependencies required. HTMX is loaded via CDN by default.

---

Quick Start

`typescript
import { defineUI } from '@flightdev/ui';
import { htmx } from '@flightdev/ui-htmx';

const ui = defineUI(htmx());

const result = await ui.adapter.renderToString({
component: () =>

,
props: {},
});

console.log(result.html);
`

---

Configuration

Configure the HTMX adapter with options:

`typescript
import { htmx } from '@flightdev/ui-htmx';

const adapter = htmx({
version: '2.0.2',
extensions: ['json-enc', 'loading-states'],
cdnUrl: 'https://unpkg.com/htmx.org',
});
`

$3

| Option | Type | Default | Description |
|--------|------|---------|-------------|
| version | string | '2.0.0' | HTMX version to use |
| extensions | string[] | [] | HTMX extensions to load |
| cdnUrl | string | unpkg | Custom CDN URL |

---

Template Helpers

Use helper functions to generate HTMX attributes:

`typescript
import { htmx, hxGet, hxPost, hx, attrsToString } from '@flightdev/ui-htmx';

// hx-get with options
const loadAttrs = hxGet('/api/items', {
target: '#list',
swap: 'innerHTML',
trigger: 'click',
});

// hx-post with options
const submitAttrs = hxPost('/api/submit', {
target: '#result',
swap: 'outerHTML',
});

// Build HTML element
const button = hx('button', loadAttrs, 'Load More');
// Load More
`

---

Extensions

Load HTMX extensions for additional functionality:

`typescript
const adapter = htmx({
extensions: [
'json-enc', // JSON encoding for requests
'loading-states', // Loading indicators
'class-tools', // Class manipulation
'preload', // Preload on hover
],
});
`

---

Full Page Example

`typescript
const adapter = htmx({
extensions: ['loading-states'],
});

function renderPage(items) {
return

Items

${items.map(item =>

• 
  ${item.name}
  hx-target="closest li"
  hx-swap="outerHTML"
  hx-confirm="Delete this item?">
  Delete
  
  

).join('')}

Add

${adapter.getHydrationScript({ html: '' })}


;
}
`

---

API Reference

$3

Create an HTMX adapter instance.

`typescript
function htmx(options?: HTMXAdapterOptions): HTMXAdapter;
`

$3

| Method | Description |
|--------|-------------|
| renderToString(component, context?) | Render to HTML string |
| getHydrationScript(result) | Generate HTMX include script |
| getClientEntry() | Get client entry code |

$3

| Function | Description |
|----------|-------------|
| hxGet(url, options?) | Generate hx-get attributes |
| hxPost(url, options?) | Generate hx-post attributes |
| hx(tag, attrs, content?) | Create HTML element string |
| attrsToString(attrs)` | Convert attributes object to string |

$3

| Capability | Supported |
|------------|-----------|
| Streaming | No |
| Partial Hydration | No |
| Islands | No |
| Resumable | No |
| SSG | Yes |
| CSR | Limited |
| Server Components | No |

---

License

MIT