Alpine.js Has a Free Reactive API That Replaces jQuery and Vue for Simple UIs

Alpine.js gives you reactive, declarative UI in HTML attributes — like Vue but without the build step. Perfect for adding interactivity to server-rendered pages. Getting Started <script defer src= "https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js" ></script> Core Directives Toggle & Show <div x-data= "{ open: false }" > <button @ click= "open = !open" > Toggle Menu </button> <nav x-show= "open" x-transition > <a href= "/home" > Home </a> <a href= "/about" > About </a> </nav> </div> Lists & Loops <div x-data= "{ todos: [], newTodo: '' }" > <form @ submit.prevent= "todos.push({ text: newTodo, done: false }); newTodo = ''" > <input x-model= "newTodo" placeholder= "Add todo" > <button> Add </button> </form> <template x-for= "(todo, i) in todos" :key= "i" > <div> <input type= "checkbox" x-model= "todo.done" > <span :class= "todo.done && 'line-through'" x-text= "todo.text" ></span> <button @ click= "todos.splice(i, 1)" > x </button> </div> </template> <p x-text= "'Done: ' + todos.