# vite-plugin-html-pages [![npm version](https://img.shields.io/npm/v/vite-plugin-html-pages.svg)](https://www.npmjs.com/package/vite-plugin-html-pages) [![npm downloads](https://img.shields.io/npm/dm/vite-plugin-html-pages.svg)](https://www.npmjs.com/package/vite-plugin-html-pages) [![license](https://img.shields.io/npm/l/vite-plugin-html-pages.svg)](LICENSE) [![vite](https://img.shields.io/badge/vite-plugin-646CFF?logo=vite&logoColor=white)](https://vitejs.dev) **Static site generation for Vite — no framework, no components, no magic.** Write JavaScript (or TypeScript, or JSX) functions that return HTML. Get a complete static site with file-based routing, dynamic pages, data loading, an asset pipeline, sitemap, RSS, and a live dev server. ⭐ If this project helps you, please consider starring it. --- ## TL;DR Write a function that returns HTML: ```js // src/index.ht.js export default () => ` My website

Hello world

` ``` Run: ```bash vite build ``` Get: ``` dist/ index.html ← rendered, with added for you styles.css ← bundled + minified, because your page referenced it 404.html ← generated automatically ``` That's the whole mental model. Everything else is convenience on top. --- ## Features - **File-based routing** — `src/about.ht.js` → `/about` - **Dynamic routes** — `[slug]`, `[year]/[slug]`, catch-all `[...path]`, optional catch-all `[...path]?` - **Route groups** — `(admin)/users.ht.js` → `/users` - **Bring your own HTML** — template literals, [javascript-to-html](https://www.npmjs.com/package/javascript-to-html), or JSX/TSX - **Data loading** — `data()` runs at build time, with built-in fetch caching - **Typed pages** — per-route param types inferred from the filename - **Smart asset pipeline** — JS/TS/CSS referenced by your HTML is bundled and minified; server-only code never leaks into `dist` - **Asset validation** — broken ` ... ` ``` At build time: - **Referenced JS / TS / CSS is bundled** with esbuild — imports are inlined, output is minified, and `.ts` files compile to `.js`. - **Unreferenced code files are not emitted.** A helper like `src/lib/api.ts` that you only import from `data()` stays out of `dist/` — server-only code (and its secrets) never ships by accident. - **Everything else is copied** (images, fonts, videos, ...), so CSS `url()` references keep working. - **`public/` behaves like normal Vite** — copied verbatim. In dev, the same URLs are served through Vite's transform pipeline, so TypeScript and CSS work identically without a build. ### Missing-asset validation Every generated page is checked: a `