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)worlds.json
--indexerDatabasePath to your SQLite indexer databaseindexer.db
--chainIdThe chain ID of the network31337
--portThe port on which to run the World Explorer13690

Installation (pre-2.2 MUD)

  1. Install the Indexer and World Explorer packages in the project root.

    pnpm add -w @latticexyz/explorer @latticexyz/store-indexer
  2. Edit mprocs.yaml to add the indexer and explorer processes.

    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: rm -rf $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. Restart pnpm dev.

  4. Browse to World Explorer (opens in a new tab).

Contributing

To contribute to World Explorer, first get familiar with the MUD contribution guidelines (opens in a new tab). Then, set up the development environment for World Explorer:

  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\].