Skip to content

htmx forms and Astro View Transitions

I already wrote about htmx and Astro View Transitions.

But I’ve got a new tip to work with forms.

Had this issue today with a form controlled by htmx (htmx sends a POST request when this form is submitted) that was working fine until I enabled View Transitions on the site (built with Astro).

I was POSTing data to a URL like /api/project/:project_id and expected the returned HTML of this POST request to be shown in the place I wanted to, but turns out View Transitions automatically trigger a page transition and that reloads the current page:

So basically my page refreshed before htmx could handle the response from the server. I was a bit confused until I analyzed carefully my requests log server-side.

Adding data-astro-reload to the forms fixed the problem.


I wrote 21 books to help you become a better developer:

  • HTML Handbook
  • Next.js Pages Router Handbook
  • Alpine.js Handbook
  • HTMX Handbook
  • TypeScript Handbook
  • React Handbook
  • SQL Handbook
  • Git Cheat Sheet
  • Laravel Handbook
  • Express Handbook
  • Swift Handbook
  • Go Handbook
  • PHP Handbook
  • Python Handbook
  • Linux Commands Handbook
  • C Handbook
  • JavaScript Handbook
  • Svelte Handbook
  • CSS Handbook
  • Node.js Handbook
  • Vue Handbook
...download them all now!

Also, JOIN MY CODING BOOTCAMP, an amazing cohort course that will be a huge step up in your coding career - covering React, Next.js - the 2025 edition, starting on February 4th, is now open for signups!

Bootcamp 2025

Signups open NOW!