🚀 Welcome to XHub Chat

Modern, type-safe chat SDK for building real-time messaging experiences in React and beyond.

✨ Why XHub Chat?

XHub Chat provides a comprehensive suite of tools for building real-time chat applications with ease. Whether you're building a small team chat or a large-scale messaging platform, XHub Chat has you covered.

Core Strengths

🎯

Type-Safe

Built with TypeScript for full type safety and IntelliSense support throughout your development workflow.

⚡

Real-Time

WebSocket-based communication with sliding sync, automatic reconnection, and optimistic UI updates.

💾

Offline-First

Built-in IndexedDB caching ensures your app works seamlessly offline and syncs when back online.

Developer Experience

🔌 Framework Agnostic Core - Use with React, Vue, Angular, or vanilla JavaScript
🪝 React Hooks - Powerful, easy-to-use hooks for seamless React integration
📦 Modular Architecture - Use only what you need, fully tree-shakeable exports
🧪 Well Tested - Comprehensive test coverage with Jest and TypeScript
📚 Extensive Documentation - Detailed guides, API references, and real-world examples
🎨 Modern Tooling - Built with latest TypeScript, bundled with tsup

🎨 Core Features

📱 For All Developers

🎭 Event-driven architecture
🔌 Extensible plugin system
💾 IndexedDB caching for offline support
💬 Message reactions and threading
🏠 Room management and presence
📎 File attachments and media
🔔 Push notifications support
🔐 End-to-end encryption ready

⚛️ For React Developers

useXHubChat - Core chat client access
useRooms - Room list management
useTimeline - Message timeline with pagination
useReactions - Message reactions handling
useThread - Thread management
useTyping - Typing indicators
usePresence - User presence tracking
And many more custom hooks...

📦 Packages

📦 @xhub-chat/core

Framework-agnostic core chat functionality with WebSocket support, event handling, and storage.

Perfect for: Building chat on any platform or framework

Learn more →

@xhub-chat/react

React hooks and components for seamless integration with the core SDK.

Learn more →

🚀 Quick Start

Get started in less than 5 minutes:

# Install packages
pnpm add @xhub-chat/core @xhub-chat/react

# Or with npm
npm install @xhub-chat/core @xhub-chat/react

# Or with yarn
yarn add @xhub-chat/core @xhub-chat/react

import { XHubChatProvider, useXHubChat, useRooms } from '@xhub-chat/react';

function App() {
  return (
    <XHubChatProvider config={{ baseUrl: 'https://api.example.com' }}>
      <ChatApp />
    </XHubChatProvider>
  );
}

function ChatApp() {
  const client = useXHubChat();
  const { rooms, loading } = useRooms();
  
  return (
    <div>
      <h1>My Rooms</h1>
      {loading ? (
        <p>Loading...</p>
      ) : (
        rooms.map(room => (
          <div key={room.roomId}>{room.name}</div>
        ))
      )}
    </div>
  );
}

📖 What's Next?

📚 Getting Started

Learn the basics and get your first app running

Installation →

💡 Core Concepts

Understand the architecture and design principles

Overview →

📘 API Reference

Detailed API documentation for all exports

API Docs →

🤝 Community & Support

GitHub: XHub-Platform/xhub-chat
Issues: Report bugs
NPM: @xhub-chat/core

✨ Why XHub Chat?​

Core Strengths​

Type-Safe

Real-Time

Offline-First

Developer Experience​

🎨 Core Features​