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

# html.templateParameters

- **Type:** `Record<string, unknown> | Function`
- **Default:**

```ts
type DefaultParameters = {
  mountId: string; // the value of `html.mountId` config
  entryName: string; // entry name
  assetPrefix: string; // the value of dev.assetPrefix or output.assetPrefix configs
  compilation: Compilation; // Compilation object of Rspack
  rspackConfig: Rspack.Configuration; // Rspack config object
  // generated by html-rspack-plugin
  htmlPlugin: {
    tags: {
      headTags: HtmlTagObject[];
      bodyTags: HtmlTagObject[];
    };
    files: {
      publicPath: string;
      js: string[];
      css: string[];
      favicon?: string;
    };
  };
};
```

Define the parameters in the HTML template, see [HTML Template - Template Parameters](/guide/basic/html-template.md#template-parameters) for detailed usage.

## Object usage

If the value of `templateParameters` is an object, it will be merged with the default parameters using `Object.assign`.

For example, if you need to use the `foo` parameter in an HTML template, you can add the following settings:

```ts title="rsbuild.config.ts"
export default {
  html: {
    templateParameters: {
      foo: 'bar',
    },
  },
};
```

Then, you can read the parameter in the HTML template using `<%= foo %>`:

```html
<script>
  window.foo = '<%= foo %>';
</script>
```

The compiled HTML code will be:

```html
<script>
  window.foo = 'bar';
</script>
```

## Function usage

- **Type:**

```ts
type TemplateParametersFunction = (
  defaultValue: Record<string, unknown>,
  utils: { entryName: string },
) => Record<string, unknown> | void | Promise<Record<string, unknown> | void>;
```

When `html.templateParameters` is of type Function, the function receives two parameters:

- `defaultValue`: Default `templateParameters` configuration of Rsbuild.
- `utils`: An object containing the `entryName` field, corresponding to the name of the current entry.

In the context of a multi-page application (MPA), you can set different `templateParameters` based on the entry name:

```ts title="rsbuild.config.ts"
export default {
  html: {
    templateParameters(defaultValue, { entryName }) {
      const params = {
        foo: {
          ...defaultValue,
          type: 'Foo',
        },
        bar: {
          ...defaultValue,
          type: 'Bar',
          hello: 'world',
        },
      };
      return params[entryName] || defaultValue;
    },
  },
};
```

You can also use an async function to load template parameters:

```ts title="rsbuild.config.ts"
import fs from 'node:fs/promises';

export default {
  html: {
    async templateParameters(defaultValue) {
      const version = await fs.readFile('./VERSION', 'utf-8');

      return {
        ...defaultValue,
        version: version.trim(),
      };
    },
  },
};
```

## Version history

| Version | Changes                                                        |
| ------- | -------------------------------------------------------------- |
| v2.0.8  | Added support for async functions in `html.templateParameters` |