Examples
Each example shows a live preview, the LiveView that drives it, and the React component it renders — the real source, embedded at compile time, so what you read is what runs.
Some examples run inside a LiveView with a socket. Others are plain controller-rendered pages, showing that React components work without a LiveView at all. Each example says which it is.
Getting Started
Events
Props & data
-
Phoenix Streams
A stream assign arrives in React as an array with __dom_id
LiveView
-
Props Diffing
Only the changed path travels, unless a component opts out
LiveView
-
Async Assigns
assign_async's AsyncResult reaches React as loading, ok and failed
LiveView
-
Custom Encoder
@derive decides what a struct sends to the client, and what it doesn't
LiveView
Forms
Navigation
Advanced
-
SSR Control
Turn server rendering off for browser-only components
LiveView
-
Slots
HEEx markup passed into React as children
LiveView
-
React Context
Share state between components without prop drilling
LiveView
-
TypeScript
Typed props in a .tsx component
no socket
-
Lazy Loading
React.lazy and Suspense inside LiveView
no socket