My Favourite Alpine.js Plugins

• @ryangjchandler/alpine-clipboard
• @marcreichel/alpine-autosize
• @ryangjchandler/alpine-tooltip
• @alpinejs/collapse

I've been using Alpine.js since it came out and have spent countless hours developing my own plugins and using other peoples plugins, so here's a list of some of my favourites.

#@ryangjchandler/alpine-clipboard

I'll start the list off with a biased choice. This is a package that I built to make copying things to the clipboard super easy.

You can use the $clipboard() magic function to copy some text to the clipboard, or if you're using a button and don't want to write out the x-on:click handler yourself, you can use x-clipboard too.

The underlying browser API is Promise based, so it's also possible to do something after the text has been successfully copied.

$clipboard(text).then(() => { ... })

Overall, this is a super useful plugin and I'm glad I made it because I use it in basically all of my projects.

#@marcreichel/alpine-autosize

This is another excellent plugin that I use a lot. It turns a plain ol' <textarea> into an auto-resizing one, which is great for UX.

You install the plugin, add x-autosize to the <textarea> and it just works!

<textarea x-autosize></textarea>

#@ryangjchandler/alpine-tooltip

This is another one of my plugins that integrates Tippy with Alpine. It's used in a bunch of projects and the number of CDN hits is regularly above 900,000!

There's not much more to say about it really – it just makes it super easy to create tooltips without rolling the code yourself.

<button x-tooltip.raw="Saving will bust the cache automatically.">
	Save
</button>

#@alpinejs/collapse

This one is an official plugin. It provides a new directive x-collapse that work in conjuction with x-show to make "revealable" or "collapsing" elements super simple.

There are browser elements like <detail> that also do this, but they don't have any transitions or animations. That's the sort of polish you want in your product, that's the sort of polish that this plugin provides.

<button type="button" x-on:click="open = !open">
	Toggle
</button>

<div x-show="open" x-collapse>
	Toggled!
</div>