Installation & Setup

Add Alpine.js to your project in seconds – CDN or npm. Perfect for any backend.

How to Install Alpine.js

Alpine.js can be added to any project in seconds. There are two main ways: CDN (for quick prototyping) and npm (for larger projects with build tools). Both are free and open‑source. The library is tiny (~15kB gzipped), making it an excellent choice for enhancing server‑rendered pages without the overhead of a full SPA framework.

💡 Tip

For learning / small projects, just use the CDN. You don't need a build step! Simply include the script and start writing Alpine components directly inside your HTML.

When to Use

Use the CDN when you need a quick interactive component on a static HTML page or a server‑rendered template (e.g., Laravel Blade, Rails ERB, Django). The CDN approach works great for simple widgets like dropdowns, modals, tabs, and even form validation. Use npm when you have a JavaScript build step (Vite, Webpack) and want to bundle Alpine with your app code. The npm version also gives you access to the full plugin system and allows you to use ES modules.

CDN Installation – Step by Step

1. Open your HTML file.
2. Copy the following script tag and paste it into your <head> section. The defer attribute is crucial; it tells the browser to run the script after the DOM has been fully parsed, so Alpine won't try to initialise before your elements exist.

Code
<script defer src="https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js"></script>

3. After adding the script, you can immediately start using Alpine directives (x-data, x-show, etc.) anywhere in your HTML. No additional configuration is needed. You can even place multiple Alpine components on the same page – they will all work independently.

npm Installation – Step by Step

1. Install the package via npm or yarn:

Code
npm install alpinejs

2. Import Alpine in your main JavaScript entry file (e.g., app.js) and call Alpine.start():

Code
import Alpine from 'alpinejs'

Alpine.start()

3. If you plan to use Alpine's plugins or custom directives, import and register them before calling Alpine.start(). For example, to add the Persist plugin:

Code
import Alpine from 'alpinejs'
import persist from '@alpinejs/persist'

Alpine.plugin(persist)
Alpine.start()

Important Notes

  • Alpine does not require a build step – it works directly in the browser. This makes it ideal for traditional multi‑page apps.
  • The defer attribute on the script tag is essential; without it Alpine may try to evaluate components before the DOM exists, leading to errors.
  • If you use a module bundler, import Alpine and call Alpine.start() in your entry point after all your custom data and plugins are defined.
  • Alpine is designed to be sprinkled onto existing HTML. You can use as many or as few Alpine components on a page as you like.
Can I use Alpine without any build tools?

Yes! That’s exactly what the CDN is for. Just drop the script tag and start writing x-data. No build step, no configuration.

Is Alpine a replacement for Vue/React?

Not exactly. Alpine is designed for sprinkling interactivity into server‑rendered HTML, while Vue/React are full SPAs. But for many use‑cases Alpine can do the job with far less code. If your page is mostly static with a few interactive bits, Alpine is often a better choice.

How do I update Alpine to the latest version?

For CDN, just change the version number in the URL. For npm, run npm update alpinejs. Always read the changelog before upgrading.

⚠️ Warning

If you’re using a framework like Laravel Livewire, Alpine is already included. Don’t add it twice, or you'll get conflicts!

Live Hello World

Hello, !

Helpful? Share this page!↑ Back to top