Skip to content

xstevenyung/astro-htmx

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

22 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

astro-htmx

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

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

Contributing

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