Alpine.js — guide & examples
HTML-first Alpine.js playground for rapid prototyping with directives like x-data, x-on, and x-bind. Perfect for sprinkles of interactivity.
About Alpine.js
HTML-first Alpine.js playground for rapid prototyping with directives like x-data, x-on, and x-bind. Perfect for sprinkles of interactivity.
Runtime: v3.15.12
Features
- Alpine 3.15
- HTML-First Directives
- JavaScript Modules
- Local File Imports
- Progressive Enhancement
- Instant Preview
Browser playground limits
- • Code runs in a sandboxed browser preview, without Node.js, a backend, or private environment variables.
- • The Console prompt can inspect browser globals and the rendered DOM, but not variables scoped inside ES modules or component state.
- • Download the project when you need build plugins, server APIs, native modules, or a production dependency workflow.
How to use the Alpine.js playground
- Edit a source file from the project explorer — the live preview recompiles automatically.
- Add, rename, duplicate or delete project files as needed. Update affected imports after renaming or moving a file.
- Use the console for logs and errors, and Format to tidy the active file.
- Share the complete project or download a Vite project ZIP with its source files and package.json.
Editing
Select next occurrenceCtrl / ⌘+D
Delete lineCtrl / ⌘+Shift+K
Move line up / downAlt+↑ / ↓
Copy line up / downAlt+Shift+↑ / ↓
Navigation
Go to symbolCtrl / ⌘+Shift+O
Selection
Select all occurrencesCtrl / ⌘+Shift+L
Terminal
Interrupt / kill processCtrl+C
Send EOF (close stdin)Ctrl+D
Console shortcuts
Press Enter to evaluate, ↑ and ↓ to browse command history, and Ctrl/⌘ + L to clear the console.
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Alpine.js Playground</title>
</head>
<body>
<main class="app-shell" x-data="counter">
<p class="eyebrow">Alpine.js · HTML-first reactivity</p>
<h1>Build with Alpine directives</h1>
<p class="intro">
Keep the structure in HTML, then add focused behavior with
<code>x-data</code>, <code>x-text</code>, and <code>@click</code>.
</p>
<section class="counter-card">
<div>
<span class="label">Component state</span>
<strong x-text="count">0</strong>
</div>
<button type="button" @click="increment">
Increment
</button>
</section>
</main>
<script type="module" src="/src/main.js"></script>
</body>
</html>
import Alpine from 'alpinejs'
import { counter } from './components/counter.js'
import './styles.css'
window.Alpine = Alpine
Alpine.data('counter', counter)
Alpine.start()
console.log('Alpine.js is ready')
Frequently asked questions
- Is the Alpine.js playground free?
- Yes. The Alpine.js playground is completely free with no sign-up — write, run and share Alpine.js code in your browser.
- Do I need to install anything to run Alpine.js online?
- No. The live preview compiles and runs in your browser. After downloading the project, install its dependencies before running it locally.
- Can I share or export my Alpine.js code?
- Yes. Share creates a link to your project. Download exports a Vite project ZIP with its source files and package.json.
- Does the editor support autocomplete and live preview?
- It does — a Monaco-powered editor with autocomplete and formatting, a live preview that updates as you type, and a console for logs and errors.
compilebytes.com/tools/alpine