Integrations with Backend Frameworks

Use Alpine with Laravel, Rails, Django, and other server‑rendered frameworks.

Alpine with Server‑Rendered HTML

Alpine is backend‑agnostic. It works wherever HTML is served. This makes it the perfect companion for traditional frameworks like Laravel (Blade), Ruby on Rails (ERB), Django, or even plain PHP.

Laravel + Livewire

In Laravel Livewire, Alpine is bundled and works seamlessly. You can use Alpine directives directly in Blade components. Alpine handles the client‑side interactivity, while Livewire manages server communication.

Rails ERB Example

<%= content_tag :div, data: { controller: 'toggle' }, class: 'p-4' do %>
  <button @click="open = !open">Toggle</button>
  <div x-show="open">
    <%= @post.content %>
  </div>
<% end %>

Django Templates

Simply include the Alpine CDN in your base template and use Alpine directives anywhere. You can mix Django template tags with Alpine expressions – just be careful with curly braces (use {% verbatim %} if needed).

Plain PHP

<div x-data="{ open: false }">
  <button @click="open = !open">Toggle</button>
  <div x-show="open">
    <?php echo htmlspecialchars($content); ?>
  </div>
</div>