Alpine.js starter
Alpine.js for small, declarative interactivity right in your HTML.
Open in editor Free. No install, no sign-up.
- alpinejs
The code
Three files, exactly what you get in the editor.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Alpine.js starter</title>
<script defer src="https://cdn.jsdelivr.net/npm/alpinejs@3/dist/cdn.min.js"></script>
</head>
<body>
<main class="page">
<header>
<a href="https://alpinejs.dev" target="_blank"
><svg class="logo" role="img" aria-label="Alpine.js" viewBox="0 0 128 128">
<path
fill="#77c1d2"
fill-rule="evenodd"
d="M98.444 35.562 126 62.997 98.444 90.432 70.889 62.997z"
clip-rule="evenodd"
/>
<path
fill="#2d3441"
fill-rule="evenodd"
d="m29.556 35.562 57.126 56.876H31.571L2 62.997z"
clip-rule="evenodd"
/>
</svg>
</a>
<h1>Alpine.js</h1>
<p>Your new, lightweight, JavaScript framework.</p>
</header>
<section x-data="{ count: 0 }">
<h2>Counter</h2>
<div class="row">
<button x-on:click="count++">Increment</button>
<span class="count" x-text="count"></span>
</div>
</section>
<section x-data="{ open: false }">
<h2>Dropdown</h2>
<button @click="open = ! open">Toggle</button>
<div class="panel" x-show="open" x-transition @click.outside="open = false">
Contents...
</div>
</section>
<section
x-data="{ search: '', items: ['foo', 'bar', 'baz'], get filteredItems() { return this.items.filter((i) => i.startsWith(this.search)) } }"
>
<h2>Search</h2>
<input x-model="search" placeholder="Search..." />
<ul>
<template x-for="item in filteredItems" :key="item">
<li x-text="item"></li>
</template>
</ul>
</section>
</main>
</body>
</html>
Questions
Can I use Alpine.js without a build step?
Yes. This starter loads Alpine.js straight from a CDN, so it runs in the browser with no npm install, bundler, or config.
How do I start a Alpine.js project online?
Click Open in editor. HTMLDrop copies this starter into a new drop with index.html, style.css, and script.js, and the preview updates as you edit.
Is it free?
Yes. Public drops, live collaboration, versions, and embeds are free, and you do not need an account to start.
Can I share or embed my Alpine.js demo?
Yes. Every drop gets a public link and an embed code, and you can invite others to edit it with you in real time.