Examples

Working examples that demonstrate io.Connect patterns. Each example is a complete, runnable application you can use as a starting point.

Client List & Portfolio Demo

A two-app demo where selecting a client in the Client List app updates the Portfolio app via Shared Contexts. This is the canonical io.Connect example.

Architecture

Platform App (port 3000) — hosts both apps, initializes the io.Connect environment
Client List App (port 3001) — displays clients, publishes selection via io.contexts.update()
Client Portfolio App (port 3002) — subscribes to the selected client and displays portfolio

Data Flow

User clicks a client row in the Client List app
Client List calls io.contexts.update("SelectedClient", clientData)
Portfolio app receives the update via io.contexts.subscribe("SelectedClient", callback)
Portfolio UI updates to show the selected client's holdings

Client List (Publisher)

ClientList.tsx

import { useContext } from "react";
import { IOConnectContext } from "@interopio/react-hooks";

interface Client {
  id: string;
  name: string;
  email: string;
  portfolio: {
    totalValue: number;
    holdings: Array<{ symbol: string; shares: number; value: number }>;
  };
}

const CLIENTS: Client[] = [
  {
    id: "C-101",
    name: "Jane Smith",
    email: "jane@example.com",
    portfolio: {
      totalValue: 1250000,
      holdings: [
        { symbol: "AAPL", shares: 500, value: 75000 },
        { symbol: "MSFT", shares: 300, value: 120000 },
        { symbol: "GOOGL", shares: 150, value: 420000 },
      ],
    },
  },
  {
    id: "C-102",
    name: "John Doe",
    email: "john@example.com",
    portfolio: {
      totalValue: 890000,
      holdings: [
        { symbol: "TSLA", shares: 200, value: 48000 },
        { symbol: "NVDA", shares: 100, value: 90000 },
      ],
    },
  },
];

function ClientList() {
  const io = useContext(IOConnectContext);

  const selectClient = async (client: Client) => {
    await io?.contexts.update("SelectedClient", {
      type: "fdc3.contact",
      id: { email: client.email },
      name: client.name,
      portfolio: client.portfolio,
    });
  };

  return (
    <div>
      <h2>Clients</h2>
      <ul>
        {CLIENTS.map((client) => (
          <li key={client.id}>
            <button onClick={() => selectClient(client)}>
              {client.name} — ${client.portfolio.totalValue.toLocaleString()}
            </button>
          </li>
        ))}
      </ul>
    </div>
  );
}

export default ClientList;

Portfolio (Subscriber)

Portfolio.tsx

import { useState } from "react";
import { useIOConnect } from "@interopio/react-hooks";

interface PortfolioData {
  name: string;
  portfolio: {
    totalValue: number;
    holdings: Array<{ symbol: string; shares: number; value: number }>;
  };
}

function Portfolio() {
  const [data, setData] = useState<PortfolioData | null>(null);

  useIOConnect(async (io) => {
    const unsub = await io.contexts.subscribe(
      "SelectedClient",
      (ctx: PortfolioData) => setData(ctx)
    );
    return () => unsub();
  }, []);

  if (!data) return <p>Select a client to view portfolio</p>;

  return (
    <div>
      <h2>{data.name}&apos;s Portfolio</h2>
      <p>Total: ${data.portfolio.totalValue.toLocaleString()}</p>
      <table>
        <thead>
          <tr><th>Symbol</th><th>Shares</th><th>Value</th></tr>
        </thead>
        <tbody>
          {data.portfolio.holdings.map((h) => (
            <tr key={h.symbol}>
              <td>{h.symbol}</td>
              <td>{h.shares}</td>
              <td>${h.value.toLocaleString()}</td>
            </tr>
          ))}
        </tbody>
      </table>
    </div>
  );
}

export default Portfolio;

GitHub ExamplesFind more examples at InteropIO/js-examples— including Channels, Intents, Streaming, and Window Management demos.

External References

← PreviousDeployment Next →FAQ