# vite-plugin-lit

> True HMR for Lit components, CSS delivery helpers, and a DevTools panel for Vite.

[HMR that keeps state](/guides/hmr/)Edit a component and the page stays put. Focus, scroll, inputs, and child state survive.

[One stylesheet, every shadow root](/guides/stylesheets/)Share a single CSSStyleSheet across thousands of components. An edit restyles them all without a re-render.

[A DevTools panel that explains re-renders](/guides/devtools/)See which components updated, how long they took, and what triggered each one.

[Ask your coding agent](/guides/devtools/agents/)The same component tree and timeline as MCP tools, read straight from the running page.

* npm

  ```sh
  npm i -D @oddsquad/vite-plugin-lit
  ```

* pnpm

  ```sh
  pnpm add -D @oddsquad/vite-plugin-lit
  ```

* yarn

  ```sh
  yarn add -D @oddsquad/vite-plugin-lit
  ```

* bun

  ```sh
  bun add -d @oddsquad/vite-plugin-lit
  ```