Access Alpine.js component data/state from outside its scope

Warning this uses Alpine.js v2 internals, there isn’t currently a public-facing API to do this.

As an active Alpine.js and Alpine.js Devtools contributor, I’ve had the pleasure of explaining how to access Alpine.js component data from outside the component and of using my suggestion as part of work I did on the community-maintained Alpine.js Devtools.

How Alpine.js keeps track of x-data/state

The short story of how Alpine.js tracks component state (or “data”) is that when it initialises, it runs the content of x-data, wraps it in a proxy (which allows for reactive view updates) and stores it on the component’s root node.

Why store it on the root node?

Well:

1. Why not?
2. Where else would it be stored? Alpine.js doesn’t have a Virtual DOM or any sort of abstraction layer where it can store this information.

It actually stores it on the root node as the __x.$data property, to access it we can use the __x.getUnobservedData() function.

Accessing an Alpine.js component’s state/data from outside it

For example if we go to Alpine.js Playground and open the console we can run document.querySelector('[x-data]').__x, which will give us the following.

Accessing __x.$data directly returns the proxy, thankfully Alpine.js provides a getUnobservedData() helper which unfurls the proxy.

Similarly as reading __x we can run document.querySelector('[x-data]').__x.getUnobservedData() in the console. Which gives us the following:

Note: the full detail of how that application works is in Integrating Alpine.js with Eleventy & YAML files to create Alpine Playground’s Collections.

For multiple Alpine.js components, you should use document.querySelectorAll('[x-data]'), in that case, the __x property will be on the elements in the NodeList. So for example to get all the data from all the Alpine.js components on a page, we can use:

document.querySelectorAll('[x-data]').forEach(el => {
  console.log(el.__x.getUnobservedData());
});

That’s how you access Alpine.js state/data from outside of it, nice and easy since Alpine.js stores everything on the DOM Nodes. Note that you really shouldn’t use any of the code from this post and instead download the community-maintained Alpine.js Devtools.

Jeremy Perkins