typed-htmx

Definitions for htmx attributes in JSX.

Usage

You can configure typed-htmx either as pure type declarations, or as a JSX templating engine.

As type declarations

Configure your tsconfig.json as follows:

{
  "compilerOptions": {
    "jsx": "react",
    "moduleResolution": "node16", // or "nodenext"
    "types": ["typed-htmx" /** and any other types you need */]
  }
}

An alternative is to include a triple-slash directive wherever you need completions for htmx attributes:

/// <reference types="typed-htmx" />

function MyComponent({ children }) {
  return <div hx-get="/asd">{children}</div>;
  //          ^?: string | undefined
}

If your frontend library injects its own JSX types, you'll need to augment it. See the example project for a demo. typed-html and React are supported out of the box.

As a JSX templating engine

If you prefer to use JSX only for its templating capabilities in the vein of typed-html, you can use typed-htmx/typed-html which is included with this library and optimized for htmx usage:

• Attributes such as hx-vals and hx-headers may also accept an object literal, which will be stringified on demand.
• Configurable options for sanitization, defaults to a no-op.

Configure your tsconfig.json as follows:

{
  "compilerOptions": {
    "jsx": "react-jsx",
    "jsxImportSource": "typed-htmx/typed-html",
    "moduleResolution": "node16" // or "nodenext"
  }
}