Skip to content
vite-plugin-lit

vite-plugin-lit

Edit a Lit component. Keep the page. In-place HMR, one shared stylesheet for every shadow root, and a DevTools panel that explains re-renders.
Build your first componentTry the demosView on GitHub
Play the vite-plugin-lit promo: a tour inside the Lit DevTools panel, from HMR that keeps a counter at 42, through one stylesheet recolouring a thousand shadow roots and the Timeline explaining each update, to the litPlugin() setup line
HMR that keeps stateEdit a component and the page stays put. Focus, scroll, inputs, and child state survive.
One stylesheet, every shadow rootShare a single CSSStyleSheet across thousands of components. An edit restyles them all without a re-render.
A DevTools panel that explains re-rendersSee which components updated, how long they took, and what triggered each one.
Ask your coding agentThe same component tree and timeline as MCP tools, read straight from the running page.
Terminal window
npm i -D @oddsquad/vite-plugin-lit

Inspect Lit on any site

Section titled “Inspect Lit on any site”

Lit Inspector puts the same panel in Chrome and Firefox DevTools, for production builds and sites you don’t serve. No Vite needed. Install Lit Inspector.

Get it on theChrome Web StoreComing soon toFirefox Add-ons