HTMX integration with Astro (Meta framework) #1425
Replies: 3 comments 3 replies
-
|
It would be great! I'm building a website using Astro and I really miss some htmx utilities. |
Beta Was this translation helpful? Give feedback.
-
|
Hi, It appears to be quite straightforward to integrate htmx into Astro; or are there specific features that you've found aren't available? Basically as long as your "backend" can take in requests and return HTML, optionally with specific headers, it should be good to work with htmx regardless of the language/framework For Astro, this worked for me:
// say_hi.html.js file
export async function get({ params, request }) {
return {
body: 'Hello World',
};
}<!-- content of index.astro's template -->
<main>
<button hx-get="say_hello.html" hx-target="#outcome">Click me</button>
<div id="outcome"></div>
</main>Hope this helps |
Beta Was this translation helpful? Give feedback.
-
|
Thank you for your reply, I used your way of integrating them and it works :) |
Beta Was this translation helpful? Give feedback.
-
|
@FlorentDardenne There is https://github.com/xstevenyung/astro-htmx which could be sufficient already. |
Beta Was this translation helpful? Give feedback.
-
|
I benchmarked Bun/Astro/HTMX vs Bun/Elysia/HTMX and the implementation using Astro was about 3-4x slower than just using Bun + Elysia and JSX or TSX templates. Bun + Hono and TSX templates was even faster, but it lagged behind Elysia in features, so I moved away from it for my experiments. Also You can use Astro if you need to, but it's a waste and code-bloat if all you're getting out of it is the templates. Links to Experiments |
Beta Was this translation helpful? Give feedback.
-
|
Is that stil the case? |
Beta Was this translation helpful? Give feedback.
-
Hi,
I discovered recently Astro and Htmx (yesterday). Two amazing tools for SSR websites !
An implementation htmx/Astro sample should be very interesting package (and a good way to promote Htmx).
Regards,
Florent
Beta Was this translation helpful? Give feedback.
All reactions