Mode:
Duration:
1
Coding works best on desktop or with an external keyboard.
Alpine.js Counter with Even/Odd Display - Alpine-js Typing CST Test
Alpine.js Counter with Even/Odd Display — Alpine-js Code
Displays whether the counter is even or odd.
<div x-data="{ count: 0 }">
<h2>Counter: <span x-text="count"></span> (<span x-text="count % 2 === 0 ? 'Even' : 'Odd'"></span>)</h2>
<button @click="count++">+</button>
<button @click="count--">-</button>
</div>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 Auto Dark ThemeAlpine.js Counter with Reset HistoryAlpine.js Counter with Input BindingAlpine.js Counter with Toggle AnimationAlpine.js Counter with Max/Min LimitsAlpine.js Counter with Conditional Message