htmx-types

HTMX Types

I couldn't find a framework-agnostic version of typed-htmx, so I made this one!

Exposes types for all of the HTMX attributes and event handlers.

Also populates the global htmx object with all of its top-level functions and config.

Add to Framework config

Create a types.d.ts or shims.d.ts (or add to your existing one) and override your framework HTML types.

Marko

import type { HtmxAttributes, HtmxEvents } from "htmx-types";

type MarkoHtmxEvents = { [K in keyof HtmxEvents as `on-${K}`]: HtmxEvents[K] };

declare global {
  namespace Marko {
    interface HTMLAttributes extends HtmxAttributes, MarkoHtmxEvents {}
  }
}

Astro

[!NOTE] Since Astro templates are server-only they don't have event handling attributes built-in

import type { HtmxAttributes } from "htmx-types";

declare global {
  namespace astroHTML.JSX {
    interface HTMLAttributes extends HtmxAttributes {}
  }
}

Solid

[!NOTE] I couldn't get on:htmx:foo to work in Solid so I left it out. Is this a parser bug?

import type { HtmxAttributes } from "htmx-types";

declare module "solid-js" {
  namespace JSX {
    interface HTMLAttributes<T> extends HtmxAttributes {}
  }
}

Others

I didn't test with any other frameworks, but this should work with anything you plug it in to! Please send a PR if you end up using it for something else 😁.