Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More
Socket
Sign inDemoInstall
Socket

alpinejs

Package Overview
Dependencies
Maintainers
1
Versions
134
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

alpinejs

The rugged, minimal JavaScript framework

  • 3.14.1
  • Source
  • npm
  • Socket score

Version published
Weekly downloads
228K
decreased by-0.93%
Maintainers
1
Weekly downloads
 
Created

What is alpinejs?

Alpine.js is a lightweight JavaScript framework designed to provide reactive and declarative behavior to HTML elements. It is often described as a minimalistic alternative to larger frameworks like Vue.js or React, offering a simpler and more intuitive way to add interactivity to web pages.

What are alpinejs's main functionalities?

Reactive Data Binding

This feature allows you to bind data to HTML elements and automatically update the DOM when the data changes. In this example, clicking the button increments the count, and the span element updates to reflect the new count.

<div x-data="{ count: 0 }">
  <button @click="count++">Increment</button>
  <span x-text="count"></span>
</div>

Conditional Rendering

Conditional rendering allows you to show or hide elements based on the state of your data. In this example, clicking the button toggles the visibility of the div element.

<div x-data="{ isVisible: true }">
  <button @click="isVisible = !isVisible">Toggle</button>
  <div x-show="isVisible">This is conditionally rendered</div>
</div>

Event Handling

Alpine.js makes it easy to handle events directly in your HTML. This example shows how to display an alert message when a button is clicked.

<div x-data="{}">
  <button @click="alert('Button clicked!')">Click Me</button>
</div>

Looping

You can loop through arrays and render elements for each item using the x-for directive. This example demonstrates how to render a list of items.

<div x-data="{ items: ['Item 1', 'Item 2', 'Item 3'] }">
  <template x-for="item in items" :key="item">
    <div x-text="item"></div>
  </template>
</div>

Other packages similar to alpinejs

FAQs

Package last updated on 18 Jun 2024

Did you know?

Socket

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

Packages

npm

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc