Alpine.js

Alpine.js is a small JavaScript framework for the interactive bits of a page that is otherwise rendered on the server: menus, modals, tabs, form fields that react to each other. It describes itself as a tool for composing behavior directly in your markup, in the spirit of jQuery for the modern web.

How it works: an x-data attribute declares a reactive state object for an element and its children. Other directives read and change that state: x-on (or @) listens for events, x-show hides and shows elements, x-text and x-bind write values into the page, x-model binds form inputs, and x-for repeats elements. When the state changes, the bound parts of the page update.

What you get: a library you add with one deferred script tag, or install from npm as alpinejs and start with Alpine.start(). Magic properties such as $refs, $watch and $store cover element references, watchers and global state shared across components, and official plugins add input masks, intersection and resize observers, focus trapping, collapse, anchoring, morphing, sorting and localStorage persistence.

The limits: Alpine adds behavior to HTML that already exists; its directives, magics and plugins don't include routing or a data-fetching layer, so page structure comes from your server or another tool. Expressions live inside HTML attributes, and evaluating them needs unsafe-eval under a Content Security Policy; the separate CSP build avoids that but forbids arrow functions, template literals, globals like window and several other JavaScript features in those expressions.