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,167 @@
+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
+
+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)              | None          |
+| `--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         |
+| `--env`             | The 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.
+
+   ```sh copy
+   pnpm create mud@main explorer --template vanilla
+   cd explorer
+   rm -rf packages/client packages/contracts/[st]*
+   ```
+
+1. Edit `mprocs.yaml` to remove the definitions for `client`, `contracts`, and `anvil`.
+
+   ```yaml filename="mprocs.yaml" copy
+   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
+   ```
+
+1. Replace `packages/contracts/worlds.json` with a link to the original project's `worlds.json`.
+
+   ```sh copy
+   cp packages/contracts
+   rm worlds.json
+   ln -s <the original project>/packages/contracts/worlds.json .
+   cd ../..
+   ```
+
+1. Run the new project.
+
+   ```sh copy
+   pnpm dev
+   ```
+
+1. Browse to [World Explorer](http://localhost:13690).
+
+## 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](/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\]`.

packages/explorer/README.md

@@ -1,85 +1,53 @@
 # World Explorer
 
 World Explorer is a GUI tool designed for visually exploring and manipulating the state of worlds.
+For the full information about it, [see the docs](http://mud.dev/world-explorer).
 
-## Getting started
+## Installation
 
-1. **Install the package**
+Starting with MUD 2.2, the MUD templates come with the World Explorer installed.
+These instructions are how to use World Explorer on earlier versions of MUD.
 
-   ```sh
-   pnpm add @latticexyz/explorer
-   ```
-
-2. **Start a local development chain**
-
-   Ensure you have a local development chain running.
+The easiest way to get World Explorer for earlier MUD versions is to create a project with the new template.
 
-3. **Run the World Explorer**
+1. Create a project with the new template, which has World Explorer.
+   Then, delete the files you no longer need.
 
-   ```sh
-   npx @latticexyz/explorer --worldAddress <YOUR_WORLD_ADDRESS>
+   ```sh copy
+   pnpm create mud@main explorer --template vanilla
+   cd explorer
+   rm -rf packages/client packages/contracts/[st]*
    ```
 
-   Alternatively, if you have a worlds configuration file:
-
-   ```sh
-   npx @latticexyz/explorer --worldsConfigPath <PATH_TO_WORLDS_CONFIG>
+1. Edit `mprocs.yaml` to remove the definitions for `client`, `contracts`, and `anvil`.
+
+   ```yaml filename="mprocs.yaml" copy
+   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
    ```
 
-   Note: You can use `@latticexyz/store-indexer` for indexing your world's data.
-
-## CLI arguments
-
-The World Explorer accepts the following CLI arguments:
-
-| Argument          | Description                                                                      | Default value |
-| ----------------- | -------------------------------------------------------------------------------- | ------------- |
-| `worldAddress`    | The address of the world to explore                                              | None          |
-| `worldsFile`      | Path to a worlds configuration file (used to resolve world address)              | None          |
-| `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         |
-| `env`             | The environment to run the World Explorer in (e.g., "development", "production") | "production"  |
-
-## Example setup
-
-An example setup is provided in the `examples/local-explorer` directory, demonstrating a full setup for using the World Explorer in a local development environment:
-
-1. **Setup**
-
-   ```sh
-   cd examples/local-explorer && pnpm install
-   ```
-
-2. **Run**
-
-   ```sh
-   pnpm dev
-   ```
-
-   This command starts all necessary processes, including a local chain, indexer, and the explorer.
-
-## Contributing
-
-To contribute to or modify the World Explorer, the easiest way is to run the example setup in `development` mode:
-
-1. **Setup**
-
-   Navigate to the `examples/local-explorer` directory and locate the `mprocs.yaml` file.
-
-2. **Configure**
-
-   In `mprocs.yaml`, ensure the `explorer` command is set up correctly. For example:
+1. Replace `packages/contracts/worlds.json` with a link to the original project's `worlds.json`.
 
-   ```yaml
-   explorer:
-     shell: pnpm explorer --worldsConfigPath packages/contracts/worlds.json --env development
+   ```sh copy
+   cp packages/contracts
+   rm worlds.json
+   ln -s <the original project>/packages/contracts/worlds.json .
+   cd ../..
    ```
 
-3. **Run**
+1. Run the new project.
 
-   ```sh
+   ```sh copy
    pnpm dev
    ```
 
-   Files can now be edited in the `packages/explorer` directory, and changes will be reflected in the running World Explorer instance.
+1. Browse to [World Explorer](http://localhost:13690).