Alpine Transitions Previewer

an open source project to preview alpine transitions in realtime

Alpine Transitions Previewer

If you use Alpine.js and Tailwindcss, this can fit in really nicely to your design process, but if you also have a TailwindUI license, there is a bit more value.

alpine-transitions-preview is an open-source (MIT) one-page Alpine.js/tailwindcss application which is designed to perform primarily two functions. it is not affiliated or supported by alpine.js or tailwindcss

  1. It allows you to preview your Alpine.js transitions so you can preview & tweak them easily before moving them to your application. (see below)

  1. It allows you to copy/paste blocks of transition code (like for modals/dropdowns/other js components in TailwindUI) into the page, and it will output the proper alpine.js transitions markup (see below)