# litnano

> Minify HTML markup inside lit tagged template literals

Latest version **1.1.0** (published 2026-11-09) · MIT license · 0 weekly downloads

## Install

```sh
npm install litnano
pnpm add litnano
yarn add litnano
bun add litnano
```

## Health

**Score 60/100 (C)** — status: active.

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

Warnings: low downloads; no types.

## Facts

| | |
|---|---|
| Version | 1.1.0 |
| Published | 2026-11-09 |
| First published | 2025-03-12 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | ESM |
| Dependencies | 1 |
| Unpacked size | 43 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 3 |
| Author | Benjamin Franzke |
| Maintainers | bnf |
| Keywords | lit, lit-html, htmlnano, cssnano, minify, html, css, template, tagged, literals, ast |

## Links

- npm: https://www.npmjs.com/package/litnano
- Repository: https://github.com/bnf/litnano
- Homepage: https://github.com/bnf/litnano#readme
- Issues: https://github.com/bnf/litnano/issues
- npm.io page: https://npm.io/package/litnano

## Dependencies (1)

- [acorn-walk](https://npm.io/package/acorn-walk.md) ^8.3.4

## Alternatives

- [@tsparticles/shape-image](https://npm.io/package/@tsparticles/shape-image.md) — 303.7K weekly downloads
- [@tsparticles/shape-line](https://npm.io/package/@tsparticles/shape-line.md) — 233.7K weekly downloads
- [stringify-attributes](https://npm.io/package/stringify-attributes.md) — 58.6K weekly downloads
- [mobile-drag-drop](https://npm.io/package/mobile-drag-drop.md) — 46.3K weekly downloads
- [@comunica/actor-rdf-parse-html](https://npm.io/package/@comunica/actor-rdf-parse-html.md) — 29.2K weekly downloads

## Recent versions

- 1.1.0 (latest) — 2026-11-09
- 1.0.1 — 2025-04-21
- 1.0.0 — 2025-03-22
- 0.4.0 — 2025-03-21
- 0.3.3 — 2025-03-15
- 0.3.2 — 2025-03-15
- 0.2.0 — 2025-03-14
- 0.1.0 — 2025-03-12

## README

# `litnano` – `htmlnano` for `lit`

Minify HTML markup inside [lit](https://lit.dev/) tagged [template literals](https://lit.dev/docs/templates/overview/).

```sh
npm install --save-dev litnano
```

It can be used as a [rollup](https://rollupjs.org/) plugin, [webpack](https://webpack.js.org/) loader or directly operate on any [ESTree](https://github.com/estree/estree)-compliant AST where it modifies
[`TaggedTemplateExpression`](https://github.com/estree/estree/blob/master/es2015.md#taggedtemplateexpression)
nodes using `htmlnano` and `cssnano`.


<details name="usage">
<summary>
<h2>Rollup plugin usage</h2>
</summary>

A rollup plugin is provided via the `litnano/rollup` entrypoint. It
supports soucemaps and can be combined with `@rollup/plugin-terser`.

```js
// rollup.config.mjs
import { litnano } from 'litnano/rollup'
import terser from '@rollup/plugin-terser'

export default {
  input: '…',
  output: {
    file: '…',
    format: 'es',
    sourcemap: true,
  },
  plugins: [
    litnano(),
    terser({ ecma: 2020, module: true })
  ],
}
```
</details>


<details name="usage">
<summary><h2>Webpack loader usage</h2></summary>

A webpack loader is provided out of the box and can be referenced
using the `litnano` entrypoint. It supports soucemaps and can be combined with typescript and terser.

```js
// webpack.config.js
export default {
  …
  module: {
    rules: [
      {
        test: /\.ts$/,
        use: [
          { loader: 'litnano' },
          { loader: 'ts-loader' },
        ],
        exclude: /node_modules/
      }
    ]
  },
  optimization: {
    minimize: true
  }
}
```

Note: The loader can also be manually imported via the explicit `litnano/webpack` entrypoint, in case it needs to be extended.
</details>

<details name="usage">
<summary><h2>Advanced usage (AST)</h2></summary>

The litnano lowlevel API is designed to operate on a [ESTree](https://github.com/estree/estree)-compliant AST and modify
[`TaggedTemplateExpression`](https://github.com/estree/estree/blob/master/es2015.md#taggedtemplateexpression)
nodes using `htmlnano`.

```js
import { litnano } from 'litnano'
import { parse } from 'acorn'
import { generate } from 'astring'
import { readFile, writeFile } from 'node:fs/promises'

const code = await readFile('mycomponent.js', 'utf-8')
const ast = parse(code, { ecmaVersion: 2023, sourceType: 'module' })
// You may use "changedNodes" to generate a sourcemap
const changedNodes = await litnano(ast)
await writeFile('mycomponent.min.js', generate(ast))
```

You may pass a concrete `htmlnano` version to be used via the options parameter:

```js
import htmlnano from 'htmlnano'
await litnano(ast, { htmlnano })
```
</details>

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