framework/alpine.js
An Alpine.js Playground and Online Editor, No Build
Sprinkle behavior onto plain HTML with Alpine x-data and x-on directives and watch it work in a live preview, with no build step and nothing to install.
<div x-data="{ count: 0, open: false }">
<button @click="count++">Add</button>
<span x-text="count"></span>
<button @click="open = !open">Toggle</button>
<p x-show="open">Now you see me.</p>
</div>01 platform
Why Alpine.js fits a browser editor so well
Alpine is reactive behavior expressed as HTML attributes, with no build step by design. That is exactly the shape a browser editor wants — nothing to compile between what you type and what runs, so the loop is as instant as it gets.
-
Behavior in the markup
x-data,x-on,x-modelandx-showadd state and interactivity right on the elements, so a dropdown or a counter is a few attributes rather than a component in a separate file. -
No build, ever
Alpine reads the attributes at runtime, so there is nothing to compile. The page you write is the page that runs, which keeps the edit-and-look loop immediate.
-
Small and focused
Alpine is tiny and deliberately limited to enhancing HTML, so it loads instantly and is quick to learn — the reason it is reached for over a full framework for interactive touches.
-
Private and installable
The page lives in your browser, never on a server, and installs as a PWA — so an experiment stays yours and works offline.
02 deep dive
State and behavior as HTML attributes
Alpine is a small set of directives, and the editor is a good place to see each one act on the page as you add it.
x-data declares a scope. An element with x-data="{ open: false }" gets its own reactive state, and everything inside it can read and write those properties — the component boundary, as an attribute.
x-on (or @) handles events. @click="open = !open" runs an expression on an event, so interactivity is written inline where it happens rather than wired in script.
x-model, x-show, x-text bind the DOM. Two-way binding, conditional display and text output are directives, so the DOM stays in sync with the state with no manual updates.
- scope
- x-data
- events
- @click, x-on
- bind
- x-model
- show
- x-show / x-if
<div x-data="{ q: '' }">
<input x-model="q" placeholder="Filter">
<template x-for="item in items.filter(i => i.includes(q))">
<li x-text="item"></li>
</template>
</div>03 features
What ships with an Alpine.js project
Everything below is on the moment you open the Alpine.js editor, which starts as an e-commerce product grid with a slide-out cart and toasts.
-
A live preview
The page runs against the real DOM and updates the moment you save, so a directive's effect is visible immediately — the point of a no-build library.
-
Alpine loaded for you
Alpine is available and its plugins resolve from npm through esm.sh, so directives work and add-ons load with no node_modules.
-
HTML, CSS and JS together
Keep markup, styles and any helper scripts in a real project tree, so an Alpine page has structure rather than being one box.
-
The VS Code engine
Monaco with multi-cursor, find-and-replace and the command palette for the HTML an Alpine app lives in.
-
A console beside the page
Logs, warnings and errors print next to the preview, so an expression that threw is easy to catch.
-
Git and export
Commit through isomorphic-git and export the project as plain HTML, CSS and JS — no lock-in.
04 deep dive
Reactive data with x-data and x-model
Alpine's reactivity is small but real, and the editor makes it obvious how state, binding and derived values fit together.
State is plain objects. The object in x-data is reactive, so changing a property updates every directive that reads it — no store to set up for a self-contained piece of UI.
Derived values are getters. A getter inside x-data computes from state, so a total or a filtered list stays correct as inputs change, expressed right in the markup.
Shared state uses stores. Alpine.store holds state across components when a page needs it, so a cart count in the header follows the cart on the grid without prop-passing.
- reactive
- x-data object
- derived
- getters in x-data
- shared
- Alpine.store
- bind
- x-model two-way
<div x-data="{ items: [], get total() {
return this.items.reduce((n, i) => n + i.price, 0);
} }">
<span x-text="'$' + total.toFixed(2)"></span>
</div>05 workflow
From a plain page to an interactive cart
No install, no build, no dev server — the whole loop from static HTML to an interactive page driven by attributes.
- new project → Alpine Store
- created index.html · Alpine ready
- add x-data cart + @click add-to-cart
- preview: cart count updates live
- add x-show slide-out cart panel
- panel toggles · derived total shown
- git commit -m "reactive cart"
- [main 3f9a2c7] reactive cart · 2 files
-
Nothing compiles
Alpine reads attributes at runtime, so a save is a reload — the loop is as instant as an editor gets.
-
The same loop on a tablet
It runs client-side, so a tablet runs the page the same way a laptop does, with nothing installed.
-
Share by link
Send a live preview URL and the recipient uses the interactive page.
06 ecosystem
Alpine.js among the web technologies
Alpine is one of many things the editor runs — the same tab enhances plain HTML, compiles a framework and runs a language, per file.
07 languages
What the editor runs beside Alpine.js
An Alpine.js page sits beside everything else the editor compiles in the browser, renders natively, or runs on demand.
Compiled in your browser11
Zero build step. Transform runs on a Web Worker, so typing never blocks.
- JSX
- TSX
- TypeScript
- Vue SFC
- Svelte
- Angular (JIT)
- SolidJS
- SCSS
- Sass
- Less
- Pug
Rendered natively8
Straight to the live preview, no transform in the way.
- HTML
- CSS
- JavaScript
- JSON
- Markdown
- Jupyter (.ipynb)
- SVG
- YAML
Executed on demand22
70+ languages run through a self-hosted Piston engine. stdout, stderr, images and tracebacks land in the console.
- Python
- Java
- C
- C++
- C#
- Go
- Rust
- Ruby
- PHP
- Kotlin
- Swift
- Lua
- Scala
- Perl
- Haskell
- Elixir
- Dart
- R
- Julia
- SQLite
- Bash
- PowerShell
08 questions
Alpine.js in the browser — common questions
Do I need a build step to use Alpine.js?
No — Alpine is built to need none. It reads x-data, x-on and the other directives from your HTML at runtime, so the page you write is the page that runs. There is no compile, no dev server and no node_modules; opening the editor is the whole setup.
Does the page update live as I edit?
Yes. The page runs against the real DOM and reloads on save, so a directive's effect — a toggle, a filter, a computed total — is visible immediately, which is exactly what a no-build library is for.
How do x-data and x-model work?
x-data declares a reactive state object scoped to an element, and x-model two-way binds an input to a property in it, so typing updates state and state updates the DOM through directives like x-text and x-show, with no manual updates.
Can I use Alpine plugins?
Yes. Alpine's plugins — such as the mask, focus or persist plugins — resolve from npm through esm.sh, so you can add them to a project without a local install.
Can I share state across components?
Yes. Alpine.store holds state outside any single x-data scope, so a value like a cart count can be read in the header and written from the grid without passing props around.
Can I keep HTML, CSS and Alpine in one project?
Yes. Projects are multi-file, so markup, styles and helper scripts live together with a tree and tabs, and the whole thing commits with Git and exports as plain HTML, CSS and JS.
Do I need to install anything to use XCODX Studio?
No. XCODX Studio is a browser-based IDE — the editor, the compilers and the preview all run client-side. There is no download, no package manager to set up and no configuration file to write. Opening the editor is the whole setup step.
Where is my code stored?
In your own browser. Projects, file history and Git objects live in local storage on your device and are never uploaded to a server. That also means XCODX works offline: it is a Progressive Web App, so you can install it and keep coding with no connection.
Is XCODX Studio free?
Yes. The editor, the live preview, the 70+ language runtimes, npm installs, Git and the integrated terminal are all free to use.
Can I use XCODX on a tablet or Chromebook?
Yes. The editor is a responsive web app, so a Chromebook, an iPad or an Android tablet gets the same compilers and the same preview a laptop does — there is no desktop-only build, because there is no build to install at all. The layout adapts to the screen rather than shrinking a desktop UI into it.
Can I export a project or move it to my own machine?
Yes. Export the whole project as a zip with its folder structure intact and open it locally, or commit it and push. It is ordinary source on disk from that point on — no proprietary format and no lock-in, which is also why importing an existing repository from GitHub works the same way in reverse.
Nothing to install
Open the Alpine.js editor now
An interactive page driven by HTML attributes on screen in under a minute — no build, live preview, with no account wall and nothing to install.