> For AI agents: the complete documentation index is available at /llms.txt, the full documentation bundle is available at /llms-full.txt.

# Playground

## Introduction

Playground is an online analysis tool provided by Rsdoctor that supports uploading build analysis data and viewing analysis reports online. No local installation of Rsdoctor is required to quickly experience build analysis features, with support for complete report display.

## Supported data formats

### 1. Rsdoctor analysis data

Supports uploading JSON format analysis data generated by Rsdoctor to re-display complete analysis reports.

#### Configuration requirements

Need to configure `output.mode: 'brief'` and set `output.options.type` to `['json']` or `['html', 'json']`:

```js title="rspack.config.mjs"
export default {
  plugins: [
    new RsdoctorRspackPlugin({
      output: {
        mode: 'brief',
        options: {
          type: ['json'], // or ['html', 'json']
        },
      },
    }),
  ],
};
```

- Optional configuration
  - `optimizationBailout`: Optional configuration. If not enabled, it will only affect the display of [Bailout Reason](/guide/usage/module-analysis.md#bailout-reason) for each Module.

#### Usage steps

1. After building the project, find the `rsdoctor-data.json` file in the output directory
2. Visit the [Playground page](https://rsdoctor.rs/preview/#/resources/uploader)
3. Upload the `rsdoctor-data.json` file
4. View the complete analysis report

:::tip
Difference between Brief mode and Normal mode:

- **Brief mode**: Generates single files (HTML or JSON), convenient for sharing and uploading
- **Normal mode**: Generates folders containing multiple files, suitable for local viewing
  :::

### 2. Webpack/Rspack Stats data

Supports uploading `stats.json` files from Webpack or Rspack to automatically generate analysis reports.

:::tip
Webpack support in this section applies only to importing an existing stats file into Playground. Rsdoctor 2.x does not provide a Webpack build plugin.
:::

#### Configuration requirements

Need to configure detailed stats options to get complete build information:

**Method 1: Use verbose mode**

`verbose` mode outputs all build information (except debug info) and automatically includes all data required by Rsdoctor. For custom configuration, refer to the example below. See [Rspack stats](https://rspack.dev/config/stats) for detailed information.

```js title="rspack.config.mjs/webpack.config.mjs"
export default {
  stats: 'verbose',
};
```

**Method 2: Stats configuration**

Configure according to the Stats options below.

```js title="rspack.config.mjs/webpack.config.mjs"
export default {
  stats: {
    all: false,
    chunks: true,
    assets: true,
    modules: true,
    chunkModules: true,
    hash: true,
    ids: true,
    version: true,
    optimizationBailout: true, // Optional configuration
  },
};
```

#### Usage steps

1. Set the above stats options in the build configuration
2. Build the project to generate the `stats.json` file
3. Visit the [Playground page](https://rsdoctor.rs/preview/#/resources/uploader)
4. Upload the `stats.json` file
5. View the automatically generated analysis report