Alpine

Alpine.js

Alpine.js adds reactive behavior directly in HTML markup using x- attributes. It's ideal for adding interactivity to server-rendered pages without a build step or SPA framework.

Installation

// main.js — npm module setup
import Alpine from 'alpinejs';
window.Alpine = Alpine;
Alpine.start();

Core Directives

  
  Toggle
  
    This content can be toggled
  

  
  Count: 
  Increment

  
   5">
    Count is greater than 5!
  

Data Binding

  
  
  Hello, !

  
  
    Colored text
  
  
    Blue
    Red
  

  
  
    Dynamic styles
  

Loops

  
    
      
        
        ×
      
    
  

  
    
    Add
  

Event Handling

  
  Prevent default
  Click once
  

  
  

  
  
    Count: 
  

  
  Dispatch

Component Patterns

  
    Menu
    
  

  
    Profile
    Settings
    Logout
  

  
    General
    Security
  

  General settings...
  Security settings...

Reusable Data with Alpine.data

  // Register reusable component
  document.addEventListener('alpine:init', () => {
    Alpine.data('todoList', () => ({
      items: [],
      newItem: '',
      add() {
        if (this.newItem.trim()) {
          this.items.push({ text: this.newItem, done: false });
          this.newItem = '';
        }
      },
      remove(index) {
        this.items.splice(index, 1);
      },
      get remaining() {
        return this.items.filter(i => !i.done).length;
      },
    }));
  });

  
    
    Add
  
  
  
    
      
      
      ×
    
  

Working with htmx

  
    Article Title
    Edit
    Delete
  
  
    
    Save
    Cancel
  

Stores (Global State)

  document.addEventListener('alpine:init', () => {
    Alpine.store('notifications', {
      items: [],
      add(msg) { this.items.push({ text: msg, id: Date.now() }) },
      remove(id) { this.items = this.items.filter(n => n.id !== id) },
    });
  });

Click me

  
    
  

Magic Properties

  
  
  Focus input

  
   $refs.list.scrollTo(0, 99999))">
    Add & scroll
  
  
    
  

  
   console.log('items changed:', val))">

Key Patterns

• Use x-data on a parent element to define reactive scope — everything inside shares that state
• Use x-show for toggling visibility (CSS), x-if for conditional DOM insertion
• Use x-model for two-way binding on inputs, selects, checkboxes
• Use event modifiers (.prevent, .stop, .debounce, .outside) to reduce boilerplate
• Use Alpine.data() to extract reusable components with methods and computed properties
• Use Alpine.store() for global state shared across components
• Pairs excellently with htmx: Alpine handles UI state, htmx handles server communication

Source & license

This open-source skill is cataloged on AgentStack and links to its original source — we do not rehost the code.

• Author: TerminalSkills
• Source: TerminalSkills/skills
• License: Apache-2.0
• Homepage: https://terminalskills.io/

Install and usage instructions live in the source repository linked above.