Reading Tables From the Frontend

Smart Assembly state lives on-chain, but players interact through a frontend. In this chapter, you'll learn how to read MUD table data from JavaScript.

The MUD Client

MUD provides a TypeScript client that syncs on-chain tables to a local cache. This gives you reactive, real-time reads without repeated RPC calls.

typescript
import { createClient } from "@latticexyz/store-sync";
import { mudConfig } from "./mud.config";

const client = createClient({
  config: mudConfig,
  worldAddress: "0x...", // The Eve Frontier World address
  chainId: 4242, // Eve Frontier chain
});

Reading a Table

Once the client is syncing, you can query tables directly:

typescript
// Get visitor count for a specific Smart Assembly
const visitorData = client.tables.VisitorCount.get({
  smartObjectId: BigInt(assemblyId),
});

if (visitorData) {
  console.log(Visitors: ${visitorData.count});
  console.log(Last visitor: ${visitorData.lastVisitor});
}

Reactive Updates

MUD tables are reactive. You can subscribe to changes:

typescript
// Watch for visitor count changes
client.tables.VisitorCount.watch(
  { smartObjectId: BigInt(assemblyId) },
  (update) => {
    console.log(New count: ${update.count});
    console.log(Visited by: ${update.lastVisitor});
  }
);

Displaying Data in React

Here's a React component that shows live visitor data:

typescript
import { useEffect, useState } from "react";

function VisitorDisplay({ assemblyId }: { assemblyId: string }) {
  const [count, setCount] = useState<number>(0);
  const [lastVisitor, setLastVisitor] = useState<string>("");

  useEffect(() => {
    const unwatch = client.tables.VisitorCount.watch(
      { smartObjectId: BigInt(assemblyId) },
      (update) => {
        setCount(update.count);
        setLastVisitor(update.lastVisitor);
      }
    );

    return () => unwatch();
  }, [assemblyId]);

  return (
    <div>
      <p>Total Visitors: {count}</p>
      <p>Last Visitor: {lastVisitor}</p>
    </div>
  );
}

Key Points

MUD syncs on-chain tables to a local store for fast reads
You never make direct RPC calls for table data — the sync layer handles it
Table reads are reactive, so your UI updates automatically when chain state changes
The client library handles reconnection and reorg protection