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.

Alpine.js Playground - Online Editor with Live Preview

5 files

Browser preview

Alpine.js 3ReadyHTMLLn 1Ln 1, Col 1

About the Alpine.js playground

HTML-first Alpine.js playground for rapid prototyping with directives like x-data, x-on, and x-bind. Perfect for sprinkles of interactivity.

v3.17.4Alpine.js runtime

src/main.jsentry file

projectworkspace

livebrowser preview

How it works

Write

Choose a source file from the explorer and edit it with Monaco.

Dependencies

Edit package.json to add browser-compatible npm packages or change versions. Preview packages load from esm.sh. Successful previews save resolved versions for ranges and tags with your draft and shares; change the range to resolve again. Scripts and build plugins run only in downloaded projects.

Preview

Auto-run updates the browser preview as you type. Turn it off to run your changes manually.

Inspect

Use the console for browser logs and errors, or evaluate a command against the preview.

Share or download

Share creates a snapshot link. Download exports the source so you can continue locally.

index.html

<!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>

src/main.js

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')

Alpine.jsAlpine.js Playground

Write

Dependencies

Preview

Inspect

Share or download

index.html

src/main.js

How to use the Alpine.js playground

Features

Running and inspecting code

Browser playground limits

Run

Editing

Navigation

Selection

Console shortcuts