astro-htmx

astro-htmx

This Astro integration adds HTMX.org to your project so that you can use HTMX.org anywhere on your page.

• Installation
• Usage
• Configuration
• Examples
• Troubleshooting
• Contributing
• Changelog

Installation

Manual Install

First, install the astro-htmx package using your package manager. If you're using npm or aren't sure, run this in the terminal:

npm install astro-htmx htmx.org

Then, apply this integration to your astro.config.* file using the integrations property:

  // astro.config.mjs
  import { defineConfig } from 'astro/config';
+ import htmx from 'astro-htmx';

  export default defineConfig({
    // ...
    integrations: [htmx()],
    //             ^^^^^^^^
  });

Usage

Once the integration is installed, you can use HTMX.org directives and syntax inside any Astro component. The HTMX.org script is automatically added and enabled on every page of your website.

Check Astro Integration Documentation for more on integrations.

Limitations

The HTMX.org integration does not give you control over how the script is loaded or initialized. If you require this control, consider installing and using HTMX.org manually. Astro supports all officially documented HTMX.org manual setup instructions, using <script> tags inside of an Astro component.

---
// src/pages/index.astro
---

<!-- Example: Load HTMX on a single page. -->
<script>
  import "htmx.org";
</script>

Configuration

The HTMX.org integration does not support any custom configuration at this time.

Examples

• The Astro HTMX example shows how to use HTMX in an Astro project.

Contributing

This package is maintained by xstevenyung. You're welcome to submit an issue or PR!