Four complete examples demonstrating modern patterns for integrating Braided systems with React.

What is Braided? A minimal, type-safe library for declarative system composition with dependency-aware lifecycle management. Think dependency injection + lifecycle management for JavaScript.

What is Braided React? The bridge that lets you use Braided systems in React applications without giving up lifecycle control.

Modern React integration using useSyncExternalStore API.

cd basic
npm install
npm run dev

Shows:

• React 18's useSyncExternalStore API
• Resources with subscribe() and getSnapshot() methods
• Automatic re-renders without useState or forceUpdate
• Clean, modern React patterns

Best for: Modern React apps, learning the recommended pattern

Zustand stores managed as Braided resources for centralized state.

cd lazy-start
npm install
npm run dev

Shows:

• Zustand stores as Braided resources
• Multiple stores coordinated through the system
• Resources observing store changes
• Stores persisting across React remounts

Best for: Apps with complex state management, multiple stores

Resources communicating through an event bus for loose coupling.

cd singleton-manager
npm install
npm run dev

Shows:

• Event-driven architecture
• Resources communicating via pub/sub
• Loose coupling between resources
• Observable system behavior
• Coordinated interactions without tight dependencies

Best for: Complex systems, event-driven architectures, microservices-style apps

System that continues running even when React is unmounted.

cd outliving-react
npm install
npm run dev

Shows:

• System persisting across React mount/unmount
• Background tasks running independently
• State preservation outside React
• True separation of concerns
• Interactive mount/unmount controls

Best for: Music players, WebSocket apps, background sync, game engines

const counterResource = defineResource({
  start: () => {
    let count = 0
    const listeners = new Set()
    
    return {
      subscribe: (listener) => {
        listeners.add(listener)
        return () => listeners.delete(listener)
      },
      getSnapshot: () => count,
      increment: () => {
        count++
        listeners.forEach(l => l())
      }
    }
  }
})

// In component
const counter = useResource('counter')
const count = useSyncExternalStore(counter.subscribe, counter.getSnapshot)

const storeResource = defineResource({
  start: () => {
    const useStore = create((set) => ({
      count: 0,
      increment: () => set((s) => ({ count: s.count + 1 }))
    }))
    return { useStore }
  }
})

// In component
const store = useResource('store')
const { count, increment } = store.useStore()

const eventBusResource = defineResource({
  start: () => {
    const listeners = new Map()
    return {
      emit: (event, data) => listeners.get(event)?.forEach(h => h(data)),
      on: (event, handler) => {
        if (!listeners.has(event)) listeners.set(event, new Set())
        listeners.get(event).add(handler)
        return () => listeners.get(event).delete(handler)
      }
    }
  }
})

// Resources communicate via events
timerResource.emit('tick', Date.now())
counterResource.on('tick', () => count++)

// System starts before React
const { system } = await startSystem(config)

// Mount React
root.render(<SystemBridge system={system}><App /></SystemBridge>)

// Unmount React (system keeps running!)
root.unmount()

// Remount React (state preserved!)
root.render(<SystemBridge system={system}><App /></SystemBridge>)

All examples follow these principles:

1. System lives outside React - React observes, doesn't control
2. Type-safe hooks - Full inference from config to components
3. No ref counting - System doesn't care about React's mount/unmount
4. Explicit cleanup - Halt system when truly done, not on unmount
5. StrictMode proof - Resources survive double-mounting

1. Day 1: useSyncExternalStore - Learn modern React integration
2. Day 2: Zustand Integration - See centralized state management
3. Day 3: Event Bus - Understand loose coupling
4. Day 4: Outliving React - Experience true independence
5. Day 5: Build your own! Mix and match patterns as needed

• Open DevTools console to see system lifecycle logs
• Try React DevTools to see how systems are just context
• Experiment with StrictMode - systems survive double-mounting
• Check the README in each example for specific details
• The "Outliving React" example has interactive mount/unmount controls!

• Modern React apps
• Clean component integration
• Automatic reactivity

• Complex state management
• Multiple coordinated stores
• E-commerce apps, dashboards

• Microservices-style architecture
• Plugin systems
• Complex coordinated workflows
• Real-time collaboration apps

• Music/video players
• WebSocket/WebRTC connections
• Background sync
• Game engines
• Session management
• Real-time chat

Untangle your code. Compose your systems. Let React observe. 🧶

• Braided - The core system composition library
• Braided React - React integration (Main Docs)
• npm: braided - Core library on npm
• npm: braided-react - React integration on npm