Hello World” Button: Plain JavaScript vs Alpine.js

 in JavaScript  tagged code / JavaScript / hello / world / Alpine by

Introduction

One of the best ways to learn JavaScript—or any front-end framework—is to start with something incredibly simple. In this post, we’ll build the same tiny feature in two different ways: a button that says “Hello World” when you click it. First, we’ll use plain JavaScript. Then, we’ll recreate the same feature with Alpine.js, a lightweight framework designed for simple interactivity without build tools or complex setup.

Version 1: Plain JavaScript

Plain JavaScript requires no libraries, no setup, and no dependencies. You can write an HTML file, add an onclick attribute, and the browser handles everything.

Here’s the core idea:

<button onclick="alert('Hello World')">Click Me</button>

That’s the smallest and cleanest way to trigger a popup message using the browser’s built-in alert() function.

Full HTML Page (Plain JavaScript)

This is a complete standalone HTML file that would display the button on a webpage:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Plain JavaScript Example</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
  <h2>Plain JavaScript Click Me Button</h2>
  <button 
    onclick="alert('Hello World')" 
    style="padding: 10px 20px; background: #1e40af; color: white; border-radius: 6px; border: none;">
    Click Me
  </button>
</body>
</html>

This example is perfect for beginners because it shows how you can attach JavaScript behavior directly to an HTML element.

Version 2: Alpine.js

Alpine.js offers a declarative way to add interactivity directly inside your HTML using simple attributes such as x-data and x-on. This is the same pattern Alpine uses for dropdowns, modals, toggles, and search fields.

The Alpine version of the Hello World button looks like this:

<div x-data> <button x-on:click="alert('Hello World')" class="px-3 py-2 bg-green-600 text-white rounded"> Click Me </button> </div>

Alpine activates everything inside the element with x-data. When the user clicks the button, Alpine runs the alert.

The Alpine CDN

To use Alpine in a standalone page, include this line inside your <head> tag:

<script defer src="https://unpkg.com/alpinejs@3.x.x/dist/cdn.min.js"></script>

No build tools, npm, or configuration required. Alpine starts working as soon as the browser loads the page.

Full HTML Page (Alpine.js)

Here is a complete page that uses Alpine.js to display the “Click Me → Hello World” button:

!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;meta name="viewport" content="width=device-width, initial-scale=1.0"&gt; &lt;title&gt;Alpine.js Example&lt;/title&gt; &lt;!-- Alpine.js CDN --&gt; &lt;script defer src="https://unpkg.com/alpinejs@3.x.x/dist/cdn.min.js"&gt;&lt;/script&gt; &lt;/head&gt; &lt;body style="font-family: Arial, sans-serif; padding: 20px;"&gt; &lt;h2&gt;Alpine.js Click Me Button&lt;/h2&gt; &lt;div x-data&gt; &lt;button x-on:click="alert('Hello World')" style="padding: 10px 20px; background: #059669; color: white; border-radius: 6px; border: none;"&gt; Click Me &lt;/button&gt; &lt;/div&gt; &lt;/body&gt; &lt;/html&gt;

This example works in any browser and demonstrates how Alpine enables clean, expressive, state-driven behavior with almost no code.

Which One Should You Use?

  • Plain JavaScript is ideal for extremely small interactions and quick demos.
  • Alpine.js shines when you want scalable interactivity without a full framework.

If your project uses Tailwind or any server-rendered framework (Flask, Laravel, Django, Rails), Alpine is often the cleaner and more maintainable choice.

Conclusion

Both versions accomplish the same thing—a simple “Hello World” alert—but they represent two different philosophies. Plain JavaScript shows the browser’s basic capabilities. Alpine.js demonstrates how modern, declarative HTML-driven interactivity can be both elegant and powerful without requiring a build pipeline. As your pages grow, Alpine helps keep your code clean and organized while avoiding the complexity of large front-end frameworks.

Leave a Reply