Any way of using headlessui without react or vue

[johnantoni]

Hi, I'm working with a rails project but not able to use react or vue. Do you think it's possible to use this library with vanilla js without react & vue ?

[brianpurkiss]

I've spent a few days looking into this.

The HeadlessUI documentation says it's up to the developer to handle the javascript side of things.

Surprisingly I still can't find someone who's written JS to do this with Vanilla JS.

At this point I coulda/shoulda written it myself.

[RobinMalfait]

Hey!

The HeadlessUI documentation says it's up to the developer to handle the javascript side of things.
Where did you read this? 🤔

Headless UI is an accessibility library written for React and Vue. We don't have a vanilla js implementation right now.

[RobinMalfait]

@johnantoni good question!

Right now it is not, Headless UI is created and coupled to React & Vue right now. We do want to play with a "core" package to decouple things a bit more, but I can't promise you that we will ever have a pure vanilla js implementation.

[ddahan]

May I ask what are the metrics you'll use to decide to provide a vanilla JS implementation?
In my opinion, it would be truly valuable for many projects:

• All the non-SPA projects (Rails, Django, Laravel, simple HTML/CSS/JS pages, ...)
• All the SPA projects that rely on another framework (Svelte, SolidJS, Angular, etc).

[cayolblake]

I heavily second that.

Its very sad there is/will-be no vanilla JS implementation! :-/

[uptonking]

@RobinMalfait

• for anyone interested in a framework-agnostic & headless ui library, take a took at https://github.com/chakra-ui/zag
  • The component interactions are modelled in a framework agnostic way. We provide adapters for JS frameworks like React, Solid, or Vue.
  • The machine APIs are completely unstyled and gives you the control to use any styling solution you prefer.

the downside maybe a little hard to understand because of Statecharts/state machine