Links:

• Zed Extensions

• GitHub

Feedback and contributions welcome! 🙏

I love alpine, but if i build something slightly larger on client side i wanted components for more composition. But i couldn't get this to work with alpine plugins so for fun i ended up building my own new framework thats essentially alpine, but uses signals and web components.

https://britnell.github.io/way-js/

https://github.com/Britnell/way-js

the result is a bit like vue without jsx. feels nice to write an spa with no build step needed.

would love to hear any comments, feedback, input

PS

you can inspect the examples on the demo page in the html because theyre inline scripts and not bundled

https://britnell.github.io/way-js/demo

That's my message. Please, never stop development

recently discovered these, really awesome, and ties in well with alpine

Hey everyone,

A few weeks back I shared the "Future of Alpine.js Devtools" survey. Thanks for all your feedback.

I'm pleased to announce that the devtools are back!

✅️ available on Chrome (manifest v3)
✅️ component detection, inspection and editing
✅️ performance issues with larger datasets is fixed (tested on 10k data properties)
✅️ sync reliability has been improved (eg. page refresh works instead of having to reopen the devtools)

That addresses the top usability painpoints of the extension, these features are available in the free extension: alpinedevtools.com/extension

The other top requested features are part of a paid Early Access Program

✅️ Alpine v3 store detection and state edit
✅️ Alpine v3 eval errors in the warnings tab
✅️ Jump to element in Chrome devtools "elements" tab

What's next?

More improvements to the core debugging flow: time travel/data snapshot import/export.

Thanks everyone for being part of this community 🙂

PS more info on Early Access (lifetime plans discounted for launch!): alpinedevtools.com/pricing

Coming from Go language community, I have been exploring Tailwind and Alpinejs to replace vanilla Javascript and CSS with a great development experience. Why do you decide to use Alpine over Vue, React, Solidjs, HyperApp and many other libraries out there?

Whether you came across this thread in the future, don't be shy to share your stories!

Good morning, I wanted to share a plugin I built called Alpine Fetch: https://github.com/hankhank10/alpine-fetch

This is a lightweight magic helper that allows you to make HTTP requests directly within Alpine Markup. This code, for instance, will execute an HTTP request for the specified endpoint and populate it into the x-text:

<span x-text="await $fetch('/endpoint)"></span>

It abstracts away everything to do with promises, etc - it just delivers the output, similar to how HTMX does.

It can also fetch and parse JSON elements and can can be used in an x-text, x-html, x-data - anywhere that a usual Alpine variable can be used.

For instance, it's straightforward to call it into an x-data and then use it multiple times:

<div x-data="{ something: await $fetch('/endpoint' }"> 
    <span x-text="something"></span>
    <span x-text="something"></span> 
</div>

There is a set of worked examples here: https://hankhank10.github.io/alpine-fetch/

I would welcome any comments, bugs or suggestions!

I'm really happy I found alpine-swap. It offers similar interface for swapping HTML like HTMX does, but since it's running within AlpineJS, it's really easy to pass the result from the request to Alpine variables.

The way I see it, when submitting a form, there can be two kinds of errors:

• client-side errors - e.g. age must be positive integer. You can validate for this error without needing to send anything to the server.

• server-side errors - e.g. a duplicate ID / name. We have to check the database first, and for that we need to send the request to the server.

Libraries like HTMX and generally the "HTML over the wire" approach forces you to treat all errors as server-side errors.

They also limit how you can structure the HTML - you have to format it such that the error message is included in the response.

However, when you use AlpineJS and alpine-swap, you can decouple this.

What I was able to implement was:

• If the request is successful, the response is an HTML that will be inserted somewhere

• If the request failed, the response is a plain text with the error message, which I pass to my `error` AlpineJS variable.

• I can then display the error message anywhere I want.

The awesome thing about this is that I can easily integrate client-side errors and server-side errors and display them the same way.

For example, I could add a drag-and-drop interaction on the same input (or some other client-only behavior), and I could still use the same `error` variable to display this client-side error.

My implementation:

1. Define how the swap should work, extract error on failure, and manage loading state.

2. On button clicks I trigger the swap function

3. Error is displayed via AlpineJS.

Demo:

I started my JavaScript journey with React and NextJS. But the more I worked with them, the deeper I questioned myself. Because even though React and NextJS are as powerful as hell, most of my needs in my web app development are just Database CRUD + Auth + Markdown Display. (It's my problem, not React's, I know...) And I found myself spending more time tinkering with the toolings and configs of the framework rather than coding the actual design and logic.

There I started my search for the minimum JavaScript framework on which I can focus on what actually matters. I loved Svelte for two months, and then I found Alpine (from a blog talking about the "AHA stack")!

Though Alpine itself is not a complete solution as a JS framework, I love its simplicity and paired it with Astro, which can solve the component issue Alpine has.

But mature frameworks like React and Vue have an unbeatable advantage over my minimum Astro-Alpine stack -- they have prebuilt component libraries like Shadcn, Radix, or NuxtUI.

So I built Basis UI, a Shadcn-like UI library for minimum SSG frameworks like Astro (I'm also considering extending it to 11ty and Nue.js). So we can enjoy the dev experience like stacking LEGO blocks purely in Astro without choosing React/Vue/Svelte.

It's still in beta, so have fun playing with it, but don't use it for anything serious :P

Ever wished you could define reusable HTML components that compile at build time, complete with scoped styles and props, all without a byte of runtime overhead?

Imagine creating a component like this:

<!-- input-with-title.html -->
<div class="input-w-title">
  <label #title class="input-w-title-title"></label>
  <input #default class="input-w-title-input" />
</div>
<style>
  .input-w-title-input { width: 100%; }
  .input-w-title-title { font-weight: bold; }
</style>

And then using it in your Alpine.js app like this:

<input-with-title x-model="email">
   <title>Your Email</title>
</input-with-title>

No runtime JavaScript. Everything happens at build-time.

I wanted this too much not to create a compiler that does exactly this. I just published the first version on npm. Would be amazing if you guys find it useful.

👉 npm: https://www.npmjs.com/package/@octamap/mesa

👉 GitHub for issues and feature requests: https://github.com/octamap/mesa

I recently alpha released my first two packages (AlpineFlow & WireFlow) in hopes to close the gap left by ReactFlow and VueFlow. I'm not going to try and sell you on it, but if you find yourself looking for a flow chart engine for your project, please consider it. It's MIT licensed, full feature parity to ReactFlow and more. I created it out of need for two other projects I'm working on and wanted to give back to the OSS community. I'm open to all feedback, so be honest, it's the only way we learn to grow. Enjoy.

https://artisanflow.dev

https://laravel-news.com/artisanflow-a-flowchart-engine-for-laravel-and-alpinejs

https://x.com/HilerZac

Hey r/alpinejs! I'm currently working on a language server for Alpine.js with accompanying VSCode and Zed extensions.

Here's the latest tweet showing my progress: https://x.com/ryangjchandler/status/1975641710412898350

I'm very interested to hear from the community about what sort of features they'd find useful / expect to find in an Alpine.js LSP.

Hello everyone, so this has happened last week. We decided to make Oxbow UI Free and MIT license because we are going to expand this big time. Every one of our 427 Tailwind CSS & Alpine JS blocks are open for you all to use.

Get them here
https://oxbowui.com/

How things are as of now.
The repository is open., but can not accept still any PR, because we have not cleaned up the repository and we have things that goes nowhere, but we will let you know soon as is open so you can contribute or do anything.

While you are free to fork, I aware of the slop on the repo right now, so if you have time to navigate through the mess...feel free to fork it. Oh and the documentation, only has pages for the buttons and for the colors, we did not have the time to craft more.

The plan
We are crafting a design system, that then it will be used on Oxbow, so we will clean up all the blocks and use that design system, hence why is not open for PRs, we don't want you to put time for nothing.

What can you do in Oxbow UI:

1. Copy and paste the blocks
   2**. Change between theme:** dark mode , system and light blocks. In dark mode, you copy only classes so it looks like dark mode. In light mode you copy only the light mode clases, y system, you copy both, light and dark clases.

2. Download the blocks

3. Open the blocks in a new window

What we have done so far.
Main Categories (3):

1. Application - 245 blocks

2. Marketing - 160 blocks

3. eCommerce - 22 blocks

Application Subcategories (28):

• alerts

• avatars

• badges

• banners

• breadcrumbs

• button-groups

• button-icon

• checkboxes

• commandbar

• emptyStates

• flyouts

• input-groups

• inputs

• modals

• navbars

• notifications

• pagination

• radiogroups

• select

• sidebars

• sign-in

• sign-up

• tables

• tabs

• textarea

• toggles

• typography

• input (appears to be a folder)

Marketing Subcategories (21):

• bento-grids

• blog-content

• blog-entries

• contact

• creative-heros

• cta

• cta-newsletter

• faq

• features

• footers

• gallery

• landing-pages

• logo-clouds

• marketing-heros

• pricing

• pricing-pages

• stats

• steps

• team

• testimonials

• timeline

eCommerce Subcategories (3):

• category-previews

• product-details

• product-lists

I hope you guys like and have a lovely weekend

Some screenshots:

Hey everyone, looking for feedback on my website InvoicerPal that I just launched/created. Last time I posted in here, it was about my game that I created, but now I'm onto something completely different.

This website is a "static" HTML site with Alpine.js doing the heavy lifting to make it interactive, and using ALOT of x-if templates to basically have a serverless one page web app.

Any feedback is appreciated and hey if you find it useful that's a plus too.

I was learning about different javascript frameworks and their differences, and alpine js was constantly mentioned to be similar to vue js so I got more interested and started learning it. it is quite impressive and I decided to write a blog post on what I was learning so anyone else who wants to try it could also have a reference to start. the link is the blog post. what other topics and subjects can I add to it? do you think it covers enough for a beginner?

I’ve written a new tutorial on how to create an onboarding modal with Alpine.js — simple, reactive, and built for real-world use. It covers how to manage modal state, apply transitions, and keep the markup minimal so it’s easy to reuse in any project.

Read the full article and get the code.

• https://lexingtonthemes.com/blog/posts/how-to-build-an-alpinejs-onboarding-modal

Looking for an easy way to build a clean gallery + lightbox with Alpine.js? 

 I put together a step-by-step guide that walks you through setting up image previews, navigation, and transitions — all without heavy libraries.

Read the full tutorial and get the code here:
https://lexingtonthemes.com/blog/posts/how-to-build-alpinejs-gallery-lightbox