# Using Ray with Alpine.js

Once the plugin is installed, you may access the helper function as `$ray()` from within your Alpine components.

## Example component

```
<div x-data="onClickData()">
    <div x-show="show">Hi There Ray!</div>
    <button x-on:click="toggle()">Show/Hide (Ray)</button>
    <button @click="$ray('hello from alpine')">Send to Ray</button>
</div>

<script>
function onClickData() {
    return {
        init() {
            this.$ray().html('<strong>init on-click-ray data</strong>');
        },
        toggle() {
            this.show = !this.show;
            this.$ray('toggled show value to ' + (this.show ? 'true' : 'false'));
        },
        show: false,
    };
}
</script>
```

## Tracking data stores

You may automatically send Alpine stores to Ray whenever the store data is updated. Consider the following:

```
window.Alpine.store('mydata', {
    showing: false,
});

setInterval( () => {
    window.Alpine.store('mydata').showing = !window.Alpine.store('mydata').showing;
}, 3000);
```

To watch the store and display changes in Ray, use the `$ray().watchStore('name')` method:

```
<div x-data="componentData()">
    <div x-show="$store.mydata.showing">Hi There Ray!</div>
    <button x-on:click="toggle()">Show/Hide (Ray)</button>
</div>

<script>
window.Alpine.store('mydata', {
    showing: false,
});

function componentData() {
    return {
        init() {
            this.$ray().watchStore('mydata');
        },
        toggle() {
            this.$store.mydata.showing = !this.$store.mydata.showing;
        },
    };
}
</script>
```

## Debug without breaking your flow

Ray keeps all your debug output neatly organized in a dedicated desktop app.

Download Ray

macOS

[ARM](https://spatie.be/products/ray/v3/download/macos-arm64/latest) [Intel](https://spatie.be/products/ray/v3/download/macos-x64/latest)

Windows

[x86 (Intel)](https://spatie.be/products/ray/v3/download/windows/latest)

Linux

[AppImage](https://spatie.be/products/ray/v3/download/linux/latest)

The free trial lets you send up to 20 messages per session.