Mode:
Duration:
1
Coding works best on desktop or with an external keyboard.
Alpine.js Counter with Toggle Animation - Alpine-js Typing CST Test
Alpine.js Counter with Toggle Animation — Alpine-js Code
Toggles dark/light theme with a smooth transition animation.
<div x-data="{ isDark: false }" :class="isDark ? 'dark-theme' : 'light-theme'" x-transition>
<button @click="isDark = !isDark">Toggle Theme</button>
</div>
<style>
.dark-theme { background-color:#222; color:#eee; transition: all 0.3s; }
.light-theme { background-color:#fff; color:#000; transition: all 0.3s; }
</style>Alpine-js Language Guide
Alpine.js is a lightweight, declarative JavaScript framework that provides reactivity and interactivity directly in your HTML. It is often described as 'Tailwind for JavaScript' - offering the power of large frameworks with minimal overhead.
Primary Use Cases
- ▸UI interactivity in server-rendered pages
- ▸Toggles, tabs, dropdowns, modals
- ▸Form validation and dynamic behavior
- ▸Progressive enhancement for static sites
- ▸Small-to-medium widgets without frameworks
Notable Features
- ▸HTML-driven reactivity
- ▸Lightweight (~8 KB min+gzip)
- ▸No build step required
- ▸Component-style syntax using HTML attributes
- ▸Vue-like reactivity with minimal API
Origin & Creator
Created by Caleb Porzio and released in 2019 as part of the Laravel/Blade ecosystem, inspired by Vue.js reactivity but built for small, inline components.
Industrial Note
Alpine.js excels for micro-interactions, widgets, and progressive enhancement - especially in server-rendered environments like Laravel, Rails, Phoenix, and Django.
Quick Explain
- ▸Alpine.js allows developers to build reactive, interactive UI without a build step.
- ▸It adds behavior directly through HTML attributes like x-data, x-model, and x-on.
- ▸Alpine is designed to be a lightweight alternative to frameworks like Vue or React for simple-to-moderate interactive needs.
Core Features
- ▸x-data for component state
- ▸x-bind for dynamic bindings
- ▸x-on for event handling
- ▸x-model for two-way binding
- ▸x-show/x-if for conditional rendering
Learning Path
- ▸Start with HTML-first reactive basics
- ▸Learn x-data, x-show, x-model, x-on
- ▸Study Alpine lifecycle hooks
- ▸Use plugins for advanced features
- ▸Build reusable Alpine components
Practical Examples
- ▸Dark mode toggle
- ▸Dropdown menu
- ▸Modal windows
- ▸Form validation
- ▸Sortable/interactive lists
Comparisons
- ▸Lighter and simpler than Vue/React
- ▸More declarative than jQuery
- ▸More HTML-first than Solid/Vue
- ▸More SPA-friendly alternatives: Vue, Svelte, Solid
- ▸Better for small enhancements than React
Strengths
- ▸Very small and fast
- ▸Perfect for server-rendered environments
- ▸Inline, declarative syntax is easy to adopt
- ▸No tooling, bundling, or complex setup
- ▸Great for enhancing existing markup
Limitations
- ▸Not ideal for large single-page applications
- ▸Limited ecosystem compared to Vue/React
- ▸No virtual DOM or heavy component logic
- ▸Not suited for extremely complex state management
- ▸Less tooling support than modern SPA frameworks
When NOT to Use
- ▸Large-scale SPA applications
- ▸Complex routing or navigation apps
- ▸Heavy state management
- ▸Apps requiring virtual DOM optimization
- ▸Cross-platform mobile apps
Cheat Sheet
- ▸x-data="{ count: 0 }" - define component
- ▸x-on:click="count++" - event
- ▸x-model="name" - two-way binding
- ▸x-show="open" - conditional
- ▸:class="{ active: open }" - bind attributes
FAQ
- ▸Is Alpine.js like Vue?
- ▸Yes - but much lighter and without a VDOM.
- ▸Does Alpine need a build step?
- ▸No, it works directly in HTML.
- ▸Can Alpine replace React or Vue?
- ▸For small interactive components - yes.
- ▸Is Alpine good for SPAs?
- ▸No, it’s designed for server-rendered pages.
- ▸Does Alpine support TypeScript?
- ▸Partially - through TS definitions.
30-Day Skill Plan
- ▸Week 1: Directives - x-data, x-bind, x-on
- ▸Week 2: Forms + bindings (x-model)
- ▸Week 3: Components + transitions
- ▸Week 4: Plugins + Alpine stores
- ▸Week 5: Build reusable Alpine modules
Final Summary
- ▸Alpine.js is a minimal, declarative JavaScript framework for adding interactivity to HTML.
- ▸It provides Vue-like reactivity in a tiny footprint.
- ▸Perfect for server-rendered apps, micro-interactions, and quick UI behavior.
- ▸Ideal for teams who want interactivity without heavy frameworks.
- ▸Zero build step, fast, and extremely easy to use.
Project Structure
- ▸index.html - main file
- ▸scripts/ - optional JS utilities
- ▸alpine.js or app.js - optional Alpine initialization
- ▸No required folder structure
- ▸Ideal for multi-page apps
Monetization
- ▸Interactive SaaS dashboards with Alpine
- ▸Alpine UI kits
- ▸Premium Alpine plugins
- ▸Courses/teaching Alpine
- ▸Website enhancement services
Productivity Tips
- ▸Use magic helpers ($refs, $store, $watch)
- ▸Keep HTML declarative and simple
- ▸Extract repeated logic into Alpine stores
- ▸Use x-transition for smooth animations
- ▸Use Alpine plugins to avoid boilerplate
Basic Concepts
- ▸x-data for component initialization
- ▸x-init for lifecycle
- ▸x-model for form bindings
- ▸x-show/x-if for conditionals
- ▸x-on for event handling
More Alpine-js Typing Exercises
Alpine.js Basic CounterAlpine.js Counter with LocalStorageAlpine.js Counter with Max LimitAlpine.js Counter with Even/Odd DisplayAlpine.js Counter with Auto Dark ThemeAlpine.js Counter with Reset HistoryAlpine.js Counter with Input BindingAlpine.js Counter with Max/Min LimitsAlpine.js Counter with Conditional Message