Stateful LiveComponents

Independent components with isolated state and event handling

Counter Components

Each counter is an independent component with its own state. Click "Notify Parent" to see parent-child communication.

Counter 1

CID: 1
0

Counter 2

CID: 2
10

Counter 3

CID: 3
20

Messages from Components

Components can send events to their parent via send_parent().

  • No messages yet

Toggle Components

Simple boolean state components. Each toggle maintains its own state.

Notifications OFF
Dark Mode OFF
Sound Effects ON

How It Works

1. Component Definition: Extend LiveComponent with mount(), update(), handle_event(), and template()

2. Event Targeting: Use phx-target="{meta.myself}" to route events to the component

3. State Isolation: Each component instance has its own context, stored externally by CID

4. Parent Communication: Components can call send_parent() to send events up