HTMX history and the back button

Mike's Notes

Note

Resources

• Resource

References

• Reference

Repository

• Home > Ajabbi Research > Library >
• Home > Handbook > 

Last Updated

18/04/2025

Article

By: Mike Peters

On a Sandy Beach: 20/04/2025

Mike is the inventor and architect of Pipi and the founder of Ajabbi.

words

Code

snippit

Mikes Notes

I have been building a ribbon UI component and experimenting with different ways to do this. You can go and try them out.

• Version 1 (Uses CSS, tabs not stable)
• Version 2 (Uses HTMX)
• Version 3 (Uses CSS and HTMX; tabs not stable)
• Version 4 (Uses CSS and HTMX, tabs stable and back button works)

Version 4 seems to be OK.

To get the browser back button to work, I added the meta HTML code below

Resources

• https://ajabbi.com/eng/reference/design-system/components/ribbon-test1.html
• https://ajabbi.com/eng/reference/design-system/components/ribbon-test2.html
• https://ajabbi.com/eng/reference/design-system/components/ribbon-test3.html
• https://ajabbi.com/eng/reference/design-system/components/ribbon-test4.html
• https://stackoverflow.com/questions/72478010/htmx-disable-saving-snapshot-of-the-dom-with-hx-push-url-true

Code

<meta name="htmx-config" content='{"refreshOnHistoryMiss":"true"}' />