# @lwc/template-compiler

> Template compiler package

Latest version **9.4.3** (published 2026-09-02) · MIT license · 0 weekly downloads

## Install

```sh
npm install @lwc/template-compiler
pnpm add @lwc/template-compiler
yarn add @lwc/template-compiler
bun add @lwc/template-compiler
```

## Health

**Score 70/100 (B)** — status: active.

Positive: has types; esm support; no vulnerabilities; has provenance; recently updated; high maintenance score.

Warnings: low downloads.

## Facts

| | |
|---|---|
| Version | 9.4.3 |
| Published | 2026-09-02 |
| First published | 2018-12-12 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Node | >=16.6.0 |
| Dependencies | 5 |
| Unpacked size | 1.2 MB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Provenance | attested (GitHub Actions) |
| Maintainers | lwc-admin, caridy, jye-sf, ravi.jayaramappa, jodarove, abdulsattar, rax-it1, lpomerleau |
| Keywords | lwc |

## Links

- npm: https://www.npmjs.com/package/@lwc/template-compiler
- Repository: https://github.com/salesforce/lwc
- Homepage: https://lwc.dev
- Issues: https://github.com/salesforce/lwc/issues
- npm.io page: https://npm.io/package/@lwc/template-compiler

## Dependencies (5)

- [he](https://npm.io/package/he.md) ~1.2.0
- [acorn](https://npm.io/package/acorn.md) ~8.18.0
- [astring](https://npm.io/package/astring.md) ~1.9.0
- [@lwc/errors](https://npm.io/package/@lwc/errors.md) 9.4.3
- [@lwc/shared](https://npm.io/package/@lwc/shared.md) 9.4.3

## Recent versions

- 9.4.3 (latest) — 2026-09-02
- 9.4.6-alpha.1 (canary) — 2026-09-22
- 9.3.10 (winter27) — 2026-09-21
- 9.1.5 (summer26) — 2026-04-28
- 8.25.1 (spring26) — 2025-11-19
- 8.20.6 (winter26) — 2025-10-20
- 8.16.5 (summer25) — 2025-05-05
- 8.10.3 (spring25) — 2025-01-09
- 7.1.5 (winter25) — 2024-10-10
- 7.0.1-alpha.0 (next) — 2024-06-21
- 6.4.5 (summer24) — 2024-06-05
- 5.0.10 (spring24) — 2024-03-20
- 3.0.4 (winter24) — 2023-10-02
- 2.40.2-lbc (lbc-avante-garde) — 2023-03-21
- 2.31.8 (spring23) — 2023-03-20
- … 873 more at https://npm.io/package/@lwc/template-compiler/versions

## README

# @lwc/template-compiler

Compile LWC HTML template for consumption at runtime.

## Installation

```sh
yarn add --dev @lwc/template-compiler
```

## Usage

```js
import { compile } from '@lwc/template-compiler';

const filename = 'component.html';
const options = {};
const { code, warnings } = compile(
    `
    <template>
        <h1>Hello World!</h1>
    </template>
`,
    filename,
    options
);

for (let warning of warnings) {
    console.log(warning.message);
}

console.log(code);
```

## APIs

### `compile`

Compile a LWC template to javascript source code consumable by the engine.

```js
import { compile } from '@lwc/template-compiler';
const { code, warnings } = compile(`<template><h1>Hello World!</h1></template>`, {});
```

**Parameters:**

- `source` (string, required) - the HTML template source to compile.
- `filename` (string, required) - the source filename with extension.
- `options` (object, required) - the options to used to compile the HTML template source.

**Options:**

- `name` (type: `string`, optional, `undefined` by default) - name of the component, e.g. `foo` in `x/foo`.
- `namespace` (type: `string`, optional, `undefined` by default) - namespace of the component, e.g. `x` in `x/foo`.
- `experimentalComputedMemberExpression` (boolean, optional, `false` by default) - set to `true` to enable computed member expression in the template, eg: `{list[0].name}`.
- `experimentalComplexExpressions` (boolean, optional, `false` by default) - set to `true` to enable use of (a subset of) JavaScript expressions in place of template bindings.
- `experimentalDynamicDirective` (boolean, optional, `false` by default) - set to `true` to allow the usage of `lwc:dynamic` directives in the template.
- `enableDynamicComponents` (boolean, optional, `false` by default) - set to `true` to enable `lwc:is` directive in the template.
- `preserveHtmlComments` (boolean, optional, `false` by default) - set to `true` to disable the default behavior of stripping HTML comments.
- `enableStaticContentOptimization` (boolean, optional, `true` by default) - set to `false` to disable static content optimizations.
- `enableLwcSpread` (boolean, optional, `true` by default) - Deprecated. Ignored by template-compiler. `lwc:spread` is always enabled.
- `enableLwcOn` (boolean, optional, `false` by default) - set to `true` to enable `lwc:on` directive in the template.
- `customRendererConfig` (CustomRendererConfig, optional) - specifies a configuration to use to match elements. Matched elements will get a custom renderer hook in the generated template.
- `instrumentation` (InstrumentationObject, optional) - instrumentation object to gather metrics and non-error logs for internal use. See the `@lwc/errors` package for details on the interface.
- `disableSyntheticShadowSupport` (type: `boolean`, default: `false`) - Set to true if synthetic shadow DOM support is not needed, which can result in smaller/faster output.
    - Example 1: Config to match `<use>` elements under the `svg` namespace and have `href` attribute set.

        ```
        {
            customRendererConfig: {
                directives: [],
                elements: [
                    {
                        tagName: 'use',
                        namespace: 'http://www.w3.org/2000/svg',
                        attributes: ['href']
                    }
                ]
            }
        }
        ```

    - Example 2: Config to match `<script>` elements regardless of the attribute set. _Note:_ When `attributes` is not specified, attribute matching is skipped.
        ```
        {
            customRendererConfig: {
                directives: [],
                elements: [
                    {
                        tagName: 'script'
                    }
                ]
            }
        }
        ```

- `apiVersion` (type: `number`, optional) - API version to associate with the compiled template.

**Return:**
The method returns an object with the following fields:

- `code` (string) - the compiled template.
- `warnings` (array) - the list of warnings produced when compiling the template. Each warning has the following fields:
    - message (string) - the warning message.
    - level (string) - the severity of the warning: `info`, `warning`, `error`.
    - start (number) - the start index in the source code producing the warning.
    - length (number) - the character length in the source code producing the warning.

---
_Source: https://npm.io/package/@lwc/template-compiler · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._