I already wrote about htmx and Astro View Transitions.

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

I 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 where I wanted it, but it 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.

Lessons in this unit:

0:	Introduction
1:	Client-side routing and view transitions
2:	View Transitions and Dark Mode
3:	Adding React Framer Motion animations to an Astro site
4:	Use React component in Astro
5:	Passing Astro components to React components
6:	htmx and Astro View Transitions
7:	▶︎ htmx forms and Astro View Transitions