docs(explorer): add world explorer docs page

docs/pages/_meta.js

@@ -23,6 +23,10 @@ export default {
   cli: "CLI",
   "state-query": "State Query",
   services: "Services",
+  "world-explorer": {
+    title: "World Explorer",
+    theme: { breadcrumb: false },
+  },
   "---": {
     title: "", // no title renders as a line
     type: "separator",

docs/pages/world-explorer.mdx

@@ -0,0 +1,163 @@
+import { Tabs, Tab } from "nextra/components";
+import { CollapseCode } from "../components/CollapseCode";
+
+# 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](http://localhost:13690).
+
+<Tabs items={["Data Explorer", "Interact"]}>
+  <Tab>
+    <iframe
+      width="761"
+      height="523"
+      src="https://www.youtube.com/embed/87wuGFH9Pz0"
+      title="Using the MUD Data Explorer"
+      frameborder="0"
+      allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
+      referrerpolicy="strict-origin-when-cross-origin"
+      allowfullscreen
+    ></iframe>
+  </Tab>
+  <Tab>
+    <iframe
+      width="761"
+      height="523"
+      src="https://www.youtube.com/embed/87wuGFH9Pz0?t=281https://www.youtube.com/embed/87wuGFH9Pz0?si=EsgcYGK9qk6J-Xvs&amp;start=281"
+      title="Using the MUD Data Explorer's Interact tab"
+      frameborder="0"
+      allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
+      referrerpolicy="strict-origin-when-cross-origin"
+      allowfullscreen
+    ></iframe>
+  </Tab>
+</Tabs>
+
+### 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.
+
+1. Type `x` to stop the default explorer.
+
+1. In a different command-line window, go to `packages/contract`.
+
+1. Run the explorer using `pnpm explorer <options>`.
+
+The World Explorer accepts the following CLI options:
+
+| Option              | Description                                                         | Default value |
+| ------------------- | ------------------------------------------------------------------- | ------------- |
+| `--worldAddress`    | The address of the world to explore                                 | None          |
+| `--worldsFile`      | Path to a worlds configuration file (used to resolve world address) | worlds.json   |
+| `--indexerDatabase` | Path to your SQLite indexer database                                | indexer.db    |
+| `--chainId`         | The chain ID of the network                                         | 31337         |
+| `--port`            | The port on which to run the World Explorer                         | 13690         |
+| `--dev`             | Run in development mode                                             | false         |
+
+## Installation (pre-2.2 MUD)
+
+1. Install the Indexer and World Explorer packages in the project root.
+
+   ```sh copy
+   pnpm install @latticexyz/store-indexer@latest -w
+   pnpm install @latticexyz/explorer@latest -w
+   ```
+
+1. Edit `mprocs.yaml` to add the `indexer` and `explorer` processes.
+
+   <CollapseCode>
+
+   ```yaml filename="mprocs.yaml" copy showLineNumbers {11-20}
+   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
+   ```
+
+   </CollapseCode>
+
+1. Restart `pnpm dev`.
+
+1. Browse to [World Explorer](http://localhost:13690).
+
+## Contributing
+
+To contribute to World Explorer, first get familiar with the [MUD contribution guidelines](https://mud.dev/contribute). Then, set up the development environment for World Explorer:
+
+1. Create a [local development setup](/contribute#local-development-setup):
+
+   ```sh copy
+   git clone https://github.com/latticexyz/mud.git
+   cd mud
+   pnpm install
+   pnpm build
+   ```
+
+1. Change to the example directory.
+
+   ```sh copy
+   cd examples/local-explorer/
+   ```
+
+1. Edit the explorer line in `mprocs.yaml`
+
+   <CollapseCode>
+
+   ```yaml filename="mprocs.yaml" copy showLineNumbers {20}
+   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
+   ```
+
+   </CollapseCode>
+
+1. Install the libraries and run the application.
+
+   ```sh copy
+   pnpm install
+   pnpm dev
+   ```
+
+1. 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\]`.