Alpine.js Snippets

v0.0.1 · by Assem Alwaseai · added 3 November 2026

Comprehensive Alpine.js v3+ code snippets for faster development

Snippets

How to install

With Forge Super installed, the button above opens the app on this extension, where you press Install. Nothing is installed until you do.

You can also open the Extensions panel in the app and search for Alpine.js Snippets. The extension's id is alpinejs-snippets.

Don't have Forge Super yet? Download it here.

README

From the extension's repository, written by its authors and not by Mentenaz. See the source.

Alpine.js Snippets for Zed

Comprehensive Alpine.js v3+ code snippets for faster development in Zed editor.

Features

🚀 30+ Alpine.js snippets covering all major directives
💡 IntelliSense-friendly with descriptive names and tab stops
🎯 Component patterns for common use cases (modals, forms, toggles)
📝 Complete examples with proper Alpine.js syntax
⚡ Optimized for productivity with logical tab order

Available Snippets

Core Directives

Prefix	Description
`x-data`	Component data initialization
`x-data-obj`	Data object with init method
`x-init`	Element initialization hook
`x-show`	Conditional element visibility
`x-bind`	Attribute binding
`x-on`	Event handling
`x-text`	Text content binding
`x-html`	HTML content binding
`x-model`	Two-way data binding

Conditional Rendering

Prefix	Description
`x-if`	Conditional template rendering
`x-for`	List rendering
`x-for-key`	List rendering with key

Event Shortcuts

Prefix	Description
`@click`	Click event handler
`@submit`	Form submit handler
`@keydown`	Keydown event handler

Styling & Classes

Prefix	Description
`:class`	Conditional CSS classes
`:style`	Inline style binding

Transitions

Prefix	Description
`x-transition`	Basic transition
`x-transition-enter`	Enter transition classes
`x-transition-leave`	Leave transition classes

Component Patterns

Prefix	Description
`alpine-comp`	Basic component structure
`alpine-modal`	Modal component
`alpine-toggle`	Toggle component
`alpine-form`	Form with validation

Utilities

Prefix	Description
`x-cloak`	Hide until initialized
`x-ignore`	Skip Alpine initialization
`x-ref`	Element reference
`x-teleport`	Move element in DOM
`alpine-cdn`	Alpine.js CDN script
`alpine-store`	Global store definition

Installation

Clone or download this extension
Place in your Zed extensions directory
Restart Zed
Start typing Alpine.js snippets in HTML files!

Usage

Simply start typing any snippet prefix in an HTML file and press Tab to expand. Use Tab to navigate through placeholder values.

Example

Type alpine-comp and press Tab:

<div x-data="{
  property: value,
  
  init() {
    // initialization code
  },
  
  method() {
    // method body
  }
}">
  <!-- component content -->
</div>