World Explorer

World Explorer is a GUI tool designed for visually exploring and manipulating the state of worlds. It is available in the MUD TypeScript templates starting with version 2.2.

Usage

If you are running locally a MUD TypeScript template version 2.2 or later, the URL for World Explorer is http://localhost:13690 (opens in a new tab).

CLI options

To use the explorer with different command-line options, use this process:

  1. In the mprocs screen, go down to the explorer process.

  2. Type x to stop the default explorer.

  3. In a different command-line window, go to packages/contract.

  4. Run the explorer using pnpm explorer <options>.

The World Explorer accepts the following CLI options:

OptionDescriptionDefault value
--worldAddressThe address of the world to exploreNone
--worldsFilePath to a worlds configuration file (used to resolve world address)None
--indexerDatabasePath to your SQLite indexer databaseindexer.db
--chainIdThe chain ID of the network31337
--portThe port on which to run the World Explorer13690
--envThe environment to run the World Explorer in (e.g., "development", "production")production

Installation (for earlier MUD versions)

The easiest way to get World Explorer for earlier MUD versions is to create a project with the new template.

  1. Create a project with the new template, which has World Explorer. Then, delete the files you no longer need.

    pnpm create mud@main explorer --template vanilla
    cd explorer
    rm -rf packages/client packages/contracts/[st]*
  2. Edit mprocs.yaml to remove the definitions for client, contracts, and anvil.

    mprocs.yaml
    procs:
      indexer:
        cwd: packages/contracts
        shell: rimraf $SQLITE_FILENAME && pnpm sqlite-indexer
        env:
          RPC_HTTP_URL: "http://127.0.0.1:8545"
          FOLLOW_BLOCK_TAG: "latest"
          SQLITE_FILENAME: "indexer.db"
      explorer:
        cwd: packages/contracts
        shell: pnpm explorer
  3. Replace packages/contracts/worlds.json with a link to the original project's worlds.json.

    cp packages/contracts
    rm worlds.json
    ln -s <the original project>/packages/contracts/worlds.json .
    cd ../..
  4. Run the new project.

    pnpm dev
  5. Browse to World Explorer (opens in a new tab).

Contributing

To contribute to or modify the World Explorer, the easiest way is to run the example setup in development mode.

  1. Create a local development setup:

    git clone https://github.com/latticexyz/mud.git
    cd mud
    pnpm install
    pnpm build
  2. Change to the example directory.

    cd examples/local-explorer/
  3. Edit the explorer line in mprocs.yaml

    mprocs.yaml
    procs:
      client:
        cwd: packages/client
        shell: pnpm run dev
      contracts:
        cwd: packages/contracts
        shell: pnpm mud dev-contracts --rpc http://127.0.0.1:8545
      anvil:
        cwd: packages/contracts
        shell: anvil --base-fee 0 --block-time 2
      indexer:
        cwd: packages/contracts
        shell: rimraf $SQLITE_FILENAME && pnpm sqlite-indexer
        env:
          RPC_HTTP_URL: "http://127.0.0.1:8545"
          FOLLOW_BLOCK_TAG: "latest"
          SQLITE_FILENAME: "indexer.db"
      explorer:
        cwd: packages/contracts
        shell: pnpm explorer --env development
  4. Install the libraries and run the application.

    pnpm install
    pnpm dev
  5. In a separate command-line window, go to mud/package/explorer and modify that package. The code should rebuild automatically after you save changes.

    If you want to modidy the user interface code, it is at src/app/worlds/\[worldAddress\].