# Changelog

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

Find a version

## [0.13.0](/reference/changelog/version/0-13-0/)

Oct 6, 2026

Every component instance now knows where it was written. On the dev server, custom elements in `html` templates and in `index.html` carry their line and column, so the Components, Timeline and Updates views and the source overlay can open the template tag that rendered a given instance, not only the class behind it. The overlay tooltip becomes a readout that lights up the row a click will open. Nothing needs action to upgrade, but tests that match attributes exactly will see the new dev-only `data-lit-source`.

### Added

* **Jump to where a component instance is rendered.** The Components panel shows a “Rendered at” link next to the declaration that opens the `html` template, or `index.html`, at the line and column of the tag that created this instance. To make that possible the dev server stamps a `data-lit-source` attribute on those elements while `sourceOverlay` is on; production builds never get it.
* **The source overlay opens the call site too.** Its tooltip shows a “rendered at” row under the declaration, and Ctrl/⌘+Shift+click opens it. Library elements picked with `hosts: 'lit'` have no declaration, so Ctrl/⌘+click opens their call site instead. `onSelect` receives the new `callSite`, and a custom `EditorConfig.url` gets an optional `column`.
* **The overlay shows which file a click will open.** Holding Ctrl/⌘ lights up the declaration row, now marked with the Components tab’s cube, and adding Shift lights up the “rendered at” row.
* **Timeline and Updates link to where an element is rendered.** A selected span, and the updates of a single instance, show a “Rendered at” link next to the source link.
* **The Settings tab says why a feature is on or off.** The HMR, Source Overlay and Timeline headers now tag their enabled or disabled pill with `(option)` or `(env)` when your config set it, like the rows below them.

### Changed

* **The overlay tooltip is a readout, not a control.** The pointer never settled on it long enough to click, so its open icons are no longer buttons and the pointer passes through to the page underneath, which can now be picked there too.

### Fixed

* **A snapshot from `lit-devtools dev` no longer promises HMR or source links.** The frozen panel now offers what the host that recorded the session could do, instead of assuming the Vite plugin.

### Removed

* **The overlay tooltip’s copy button.** It sat out of the pointer’s reach; the path is still shown in the tooltip and in the Components panel.

## [0.12.0](/reference/changelog/version/0-12-0/)

Oct 2, 2026

The Lit panel now reaches pages no dev server is watching. Lit Inspector, a Chrome extension attached to every GitHub release, injects it into any site you enable, production builds and strict Content Security Policies included. `lit-devtools dev` stops showing controls it can’t serve and gains the Chrome Performance tracks switch, and the selected component keeps updating across a reload. Nothing needs action to upgrade.

### Added

* **Lit Inspector, a Chrome extension, comes with every GitHub release.** Download `lit-inspector-<version>.zip` from the release and load it unpacked to inspect Lit components on any page, production builds and sites you don’t serve included, with no dev server.

### Changed

* **The panel hides what `lit-devtools dev` can’t do.** Open-in-editor links and the snapshot Export button no longer appear as controls that fail, the Settings tab explains why plugin settings are missing, and the timeline notes when render layers stay empty because the page’s Lit is a production build.

### Fixed

* **The panel no longer reports the DevTools’ own Lit as a duplicate.** Pages loading `lit-devtools.js` showed “(duplicate copies)” in Settings and a warning in the components view even with a single Lit of their own.
* **The selected component keeps updating after the page reloads.** Its details used to freeze on the old page’s values, marked “update pending”, until you selected another row.
* **Chrome Performance tracks and update flashing can be switched on under `lit-devtools dev`.** The Settings tab hid both whenever the page wasn’t served by the Vite plugin.

## [0.11.0](/reference/changelog/version/0-11-0/)

Oct 2, 2026

A smaller release that makes the panel easier to read. The Components tab can scroll the selected element into view, async failures now count in Updates, every button has a tooltip, and Settings drops its row-by-row origin labels in favour of showing the default where you choose a value. About also lists the right Lit versions. Nothing needs action to upgrade.

### Added

* **Scroll a component into view from the Components tab.** A target button next to the selected element’s tag scrolls it to the middle of the page and outlines it for a moment, so you no longer have to hunt for elements below the fold.
* **Async failures show up in Updates.** An async `updated()` whose promise rejects unhandled, or a `@lit/task` that fails, now marks the update that started it (*rejected in updated*, *task userTask failed*) and counts toward the component’s ⚠, where before it left no trace in the panel.
* **Panel buttons explain themselves.** Hovering or tabbing to a button now shows a tooltip naming what it does, including the icon-only ones that previously had no hint at all.
* **Settings links to where the Chrome tracks show up.** The Chrome performance tracks row links to the timeline guide, which now shows the expanded Lit group in Chrome’s Performance panel and how far to zoom to read it.

### Changed

* **Settings rows lose their “(default)” and “(overridden)” labels.** Only values set by an option or env var keep an origin badge, and an overridden row is marked by the highlighted value it replaced, such as `env: Zed`, and the × that resets it. Open a dropdown to see the default beside your value: with `LIT_PLUGIN_HMR_ON_INCOMPATIBLE=warn` the list reads `warn env` and `reload default`. Hover a setting’s name for what it does.

### Fixed

* **About shows the right Lit versions.** Settings > About used to show lit-element’s version labelled as “lit” (for example “lit 4.2.2” next to lit 3.3.3). It now lists lit-html, lit-element and @lit/reactive-element by name, and the duplicate-copies warning says which package is duplicated.

## [0.10.0](/reference/changelog/version/0-10-0/)

Oct 2, 2026

The DevTools panel has a new look built on Web Awesome, and it now follows one tab at a time, so a second tab of the app no longer wipes the recording or leaks into what you are looking at. Updates and the timeline show what changed in a re-render and which updates threw, the Components tab stays live by default and shows task, signal and controller state and the last HMR patch, and agents can query by tag name. Nothing needs action to upgrade.

### Added

* **See what changed in a re-render.** Turn on the Changed values layer and each update records the old and new value of every changed property. The Updates tab lists them and flags a new reference that holds the same value, and `lit_update-summary` lists, per component, the properties reassigned to an equal new reference, so an agent can say which props re-render for nothing.
* **Errors thrown during an update are visible.** A phase that throws is marked in the timeline, counted per component in Updates, and reported through `lit_update-summary`, instead of looking like a normal update.
* **See tasks, signals and controllers in the Components tab.** The details pane now lists an element’s `@lit/task` state, signals, reactive controllers and plain fields in an Instance table below its properties.
* **Pick a component library’s elements, and step out to the one around.** Set `sourceOverlay.hosts` to `'lit'` and the picker also picks Lit elements you didn’t write, such as `<wa-button>`, into the Components tab. While picking, ↑ and ↓ move the outline out to the enclosing element and back.
* **Agents can query by tag name and bound the tree.** `lit_recent-events` and `lit_component-details` accept `tagName`, the latter returning every matching element, so an agent no longer has to find an element id first. `lit_list-components` accepts `maxDepth`, and nodes it cuts off report how many children were left out.
* **See whether an HMR edit landed.** After an edit the Components tab reads which component was patched, how many instances it touched and how long it took. `lit_hmr-history` gives agents the recent patches with child-state mode, interleaved with the components that could not be patched.
* **The Components tab says why it is empty.** Instead of one generic line, it now tells you when the page runtime has not connected, when more than one copy of lit is loaded, or when the runtime is inside an iframe, with the next step for each.
* **Settings has an About section.** It shows the plugin version, the lit version the page loaded (and a warning for duplicate copies), the timeline layers, picker availability, and the order in which settings resolve.
* **The dev server tells you when the DevTools panel cannot mount.** With `timeline` on and `DevTools()` missing from `plugins`, the terminal now prints a one-time warning with the fix instead of staying silent.
* **Resize the component details pane.** Drag the divider between the component tree and the details; the width is remembered across reloads.

### Changed

* **The DevTools panel has a new look built on Web Awesome.** Buttons, tabs, switches, selects and badges are Web Awesome components with square corners and the Lit blue as the accent, and the text glyphs that stood in for icons, including the arrow between old and new values, are Phosphor icons now. The panel still works fully offline.
* **The Components tree follows the page by default.** **Live** starts on, so components that appear or go away show up without a click. Toggle it off to pause the tree; the Refresh button is gone, because turning Live back on brings the tree up to date.

### Fixed

* **A second tab no longer wipes the recording or leaks into the panel.** The session follows one page at a time, the one that loaded last, and a banner says when it switches. Events, picks, custom layers and HMR notices from any other tab are ignored, and the previous page’s recording, component tree and HMR notices are cleared on a switch; reloading the same tab clears them without the banner.
* **`update` spans close for components that override `update()`.** A subclass calling `super.update()` no longer produces a nested duplicate bracket that left the outer span open and skewed Updates durations.
* **Agents see the live component tree.** `lit_list-components` and `lit_component-details` now ask the page instead of returning what the panel last fetched, so they work with no panel open.
* **Live mode follows the panel.** Closing the panel no longer leaves the page observing the DOM and rebuilding the tree, and after a panel or page reload the Live toggle no longer shows as on while the page has stopped pushing tree updates.
* **The active tab label no longer jumps up.** The selected panel tab now sits on the same baseline as the others instead of a couple of pixels higher.

## [0.9.0](/reference/changelog/version/0-9-0/)

Oct 1, 2026

Pick now works on pages connected to the standalone `lit-devtools dev` server, and `#private` state survives hot-patching on Vite 7 as it already did on Vite 8. One change needs action: runtime globals moved to the package’s own `Symbol.for` prefix. The rest are fixes to panel settings that didn’t stick, a Pick button with no picker behind it, and the HMR indicator sitting on the DevTools toolbar.

### Added

* **Pick works on pages connected to `lit-devtools dev`.** Pick in the Components tab, or Ctrl/⌘+Shift+S on the page, picks any Lit element; the panel selects it and a panel tab comes forward on it. If you opened the panel yourself, the first pick opens a second panel tab and later picks reuse it.

### Changed

* **Runtime globals are keyed `@oddsquad/vite-plugin-lit#…`.** Code that read component source metadata (or any other plugin global) through `Symbol.for('@lit-labs/vite-plugin-lit#source')` needs the new prefix.

### Fixed

* **`#private` state survives HMR on Vite 7 too.** Editing a method that touches a private field of a decorated component no longer throws “Cannot read from private field” after esbuild has lowered it.
* **Panel settings survive a page reload in standalone mode and on StackBlitz.** After reloading the app, overrides such as flash updates or the HMR indicator reverted to the config defaults until a setting was changed again.
* **A setting changed right after opening the panel is kept.** The first toggle in a fresh panel session (for example Flash on the Components tab) could be silently wiped from the saved settings, so it was gone after a reload. Seen with `lit-devtools dev`; the Vite DevTools panel runs the same code.
* **The Components tab no longer shows a Pick button that does nothing.** Without the source overlay (off by default, and unavailable to pages connected to `lit-devtools dev`) the button lit up and no picker appeared. It now only appears when there is a picker to start.
* **The HMR indicator no longer covers the DevTools toolbar.** With the Vite DevTools dock on an edge, the indicator and the source-overlay tooltip sat on top of it instead of moving aside.
* **A `#event=` link scrolls to its row on a slow first load.** Opening the panel or a snapshot through a timeline link selected the event but could leave its row out of view when the list’s layout code loaded slowly.

## [0.8.1](/reference/changelog/version/0-8-1/)

Oct 1, 2026

A one-fix patch: turning the timeline on with `LIT_PLUGIN_TIMELINE=true` now brings up the Lit DevTools panel, not just the page runtime behind it.

### Fixed

* **`LIT_PLUGIN_TIMELINE=true` brings up the Lit DevTools panel.** Turning the timeline on through the env var injected the page runtime but left the panel out of Vite DevTools; it now mounts as it does with `timeline: true`.

## [0.8.0](/reference/changelog/version/0-8-0/)

Sep 30, 2026

The plugin is now on JSR as well as npm: every release publishes the same build to jsr.io/@oddsquad/vite-plugin-lit. The documentation site gets a page per release, the StackBlitz playground starts again, and the licence now names oddcelot as the copyright holder.

### Added

* **Also on JSR.** Releases now publish to jsr.io/@oddsquad/vite-plugin-lit alongside npm, so `npx jsr add @oddsquad/vite-plugin-lit` installs the same build.
* **The docs have a page per release.** The changelog on the documentation site now lists every version with its date and links to a page for each one, plus a page with everything that changed since a given version.

### Changed

* **The licence names the right copyright holder.** The package’s LICENSE, author field and source headers credited Google LLC; they now credit oddcelot. The licence terms (BSD-3-Clause) are unchanged.

### Fixed

* **The StackBlitz playground starts.** Opening the playground on StackBlitz, in dev or with `npm run standalone`, no longer stops at “Cannot find native binding”, and the dev server prints where to open the Lit DevTools panel in its own tab.

## [0.7.0](/reference/changelog/version/0-7-0/)

Sep 29, 2026

Hot-patching covers two cases it used to get wrong: components with native `#private` members, which threw, and child elements whose parent template you edit, which lost their state. The standalone `lit-devtools dev` server also gets pages to feed it: one script tag connects any page running Lit, whether Vite serves it or not, directly or through a proxy. Two fixes ride along: open-in-editor links lose a stray slash, and the timeline no longer misses the first component’s connect and disconnect.

### Added

* **Components with `#private` fields keep hot-patching.** Editing an element that uses native `#private` fields or methods now updates it in place and keeps its private state, instead of throwing “Cannot read private member”. Set `hmr.privateFields: false` to keep real brand checks in dev.
* **Child components keep their state when you edit the parent.** Changing the template a child element sits in no longer resets its `@state` and `#private` fields; `hmr.childState: 'reuse'` keeps the original element where it has no bindings, and `'reset'` restores the old behaviour. The DevTools Settings tab can switch the mode live; the next edit uses it.
* **Pages outside Vite can feed the standalone panel.** `lit-devtools dev` now prints a `<script src=".../lit-devtools.js">` tag; a page that loads it shows its component tree, inspector and timeline in the panel, even when Vite doesn’t serve it or it’s reached through a proxy or tunnel. Pages on localhost connect on any port, and `--allow-origin` admits others, with `*` for any subdomain (`--allow-origin 'https://*.webcontainer-api.io'` for StackBlitz). HMR, source locations and open-in-editor still need Vite.

### Fixed

* **Open-in-editor links use the documented URL form.** Links to VS Code, Cursor, Zed and Windsurf no longer carry a double slash before absolute paths like `/Users/...`.
* **The timeline records the first component’s connect and disconnect.** On a page with no Lit element when the DevTools runtime starts, the first component defined afterwards now shows its `connectedCallback` and `disconnectedCallback` events like the rest.

## [0.6.1](/reference/changelog/version/0-6-1/)

Sep 29, 2026

A fix release. Components whose `extends` clause holds braces load in dev again, and the plugin now shares one devframe with the current Vite DevTools. The rest comes from a security pass over the dev server: source opens and snapshot exports stay inside the project, and the standalone server won’t go without its code gate on a network address.

### Changed

* **`lit-devtools dev --no-auth` only runs on localhost.** Combined with a `--host` other machines can reach, it now refuses to start instead of letting anyone on the network drive the panel without a code.

### Fixed

* **Components whose `extends` clause has braces load in dev again.** With `sourceOverlay` on, a class like `extends Dialog<{open: boolean}>` or `extends Mixin(Base, {shadow: true})` broke the module with a 500 from the dev server. Broken since 0.3.0.
* **Exporting a snapshot can no longer delete your files.** The export wipes its output directory before writing, and nothing checked which directory that was. It now only writes inside the dev server’s working directory and only replaces an earlier snapshot.
* **The panel can only open source files inside your project.** Source links from the DevTools panel used to open any absolute path they were given. They now follow the same rule as the in-page overlay: the path has to be under the Vite root or `server.fs.allow`.
* **Symlinks can’t send the editor outside your project.** Opening a source file used to follow a symlink under the project to wherever it pointed. Now the target has to be inside the project too.
* **One copy of devframe alongside the current Vite DevTools.** The plugin pinned devframe 1.0.0 exactly, so apps on `@vitejs/devtools-kit` 0.7.6 installed a second copy and got an unmet-peer warning. It now accepts any devframe 1.x.

## [0.6.0](/reference/changelog/version/0-6-0/)

Sep 29, 2026

A small release with one feature. The Lit timeline can now appear in Chrome DevTools’ own Performance panel, so an update tick sits on the same time axis as the layout, paint and long tasks it caused.

### Added

* **Lit updates in Chrome’s Performance panel.** Turn on **chrome performance tracks** under Timeline in the Settings tab and a Chrome Performance recording gets a Lit track group, with each update tick nested as `<my-element> performUpdate` over its phases, next to layout, paint and long tasks. It works without the Lit panel recording, and traces taken through chrome-devtools-mcp include it.