Skip to main content
Chorus provides a lightweight Alpine.js plugin with magic methods for building real-time, reactive applications with minimal JavaScript.

​
Setup

Add the @chorus directive to your layout: 
<!-- resources/views/layouts/app.blade.php -->
<!DOCTYPE html>
<html>
<head>
    @vite(['resources/css/app.css', 'resources/js/app.js'])
    @chorus
</head>
<body>
    <!-- Your content -->
</body>
</html>
Initialize Alpine with the Chorus plugin: 
// resources/js/app.js
import Alpine from 'alpinejs'
import chorus from '@pixelsprout/chorus-alpine'

window.Alpine = Alpine
Alpine.plugin(chorus)
Alpine.start()
Configuration options: 
@chorus([
    'debugMode' => config('app.debug'),
    'endpoint' => '/api/custom',
    'websocketUrl' => 'ws://localhost:8080'
])

​
Manual Initialization

For more control, initialize manually: 
document.addEventListener('alpine:init', async () => {
  await Alpine.magic('chorus')().init({
    userId: 1,
    debugMode: true
  })
})

​
Magic Methods

​
$table(tableName)

Returns a reactive array that automatically updates in real-time: 
<div x-data="{ users: $table('users') }">
  <ul>
    <template x-for="user in users" :key="user.id">
      <li x-text="user.name"></li>
    </template>
  </ul>
</div>

​
$chorus

Access the Chorus instance:
  • $chorus.instance - The underlying ChorusCore instance
  • $chorus.init(config) - Initialize or reconfigure Chorus
  • $chorus.isInitialized - Check initialization status

​
Usage Examples

​
Filtered Data with Computed Properties

<div x-data="{
  users: $table('users'),
  search: '',

  get filteredUsers() {
    return this.users.filter(user =>
      user.name.toLowerCase().includes(this.search.toLowerCase())
    )
  }
}">
  <input x-model="search" placeholder="Search users...">

  <template x-for="user in filteredUsers" :key="user.id">
    <div x-text="user.name"></div>
  </template>
</div>

​
Multiple Tables

<div x-data="{
  users: $table('users'),
  posts: $table('posts')
}">
  <h2>Users: <span x-text="users.length"></span></h2>
  <h2>Posts: <span x-text="posts.length"></span></h2>
</div>

​
Configuration

Blade directive options: 
@chorus([
    'debugMode' => config('app.debug'),
    'endpoint' => '/api',
    'websocketUrl' => 'ws://localhost:8080'
])
Manual init options: 
await $chorus.init({
  userId: 1,
  debugMode: true,
  onRejectedHarmonic: (harmonic) => console.error(harmonic),
  onSchemaVersionChange: (oldVer, newVer) => console.log('Schema updated')
})

​
TypeScript Support

Import types for magic method auto-completion: 
import '@pixelsprout/chorus-alpine/types'

​
Next Steps

React Integration

Learn about React hooks and patterns

Vue Integration

Explore Vue composables and components

Chorus Actions

Master server-side write operations

Core Concepts

Understand how Chorus works under the hood