Demos
Each demo runs on StackBlitz, in your browser, against the latest release of the plugin. Press Run this demo to boot one: StackBlitz installs the dependencies and starts the dev server, which takes a moment. Edit the open file and save, and the component updates in the preview without losing what you did to it.
The embeds run only in Chromium-based browsers such as Chrome, Edge or Brave; in other browsers, use Open in StackBlitz under each one. The first Run reloads this page once to turn on the isolation the embed needs, then starts it. If an embed stops at “Cloning repo from GitHub”, press Stuck? Reload the demo.
Lit flame
Section titled “Lit flame”One component, edited while it runs. Turn its colours, stoke it and blow it
out, then edit src/lit-flame.ts and watch its state, #private field and
colours survive. The
example’s README
lists edits to try.
Web Awesome
Section titled “Web Awesome”A component built from Web Awesome elements, a
third-party Lit library. Add items to the packing list, tick a few and type
into the input, then edit src/packing-list.ts: the plugin patches your
component and leaves the library’s elements alone, so their checked boxes and
half-typed text survive too. See the
example’s README.
Fernhouse
Section titled “Fernhouse”A small plant shop built to explore the DevTools on. Open the Lit panel in the
dock, pick a product card, and turn on Anatomy to see its slots and parts
drawn on the page; the cart button shows the context it reads from the app.
Then record on the Timeline, with the Mouse and Custom events layers on, and
add a plant to the cart: cause rails link the click to the card’s update and
the add-to-cart event to the cart button’s. See the
example’s README.
One card per way of delivering CSS to a shadow root, with real UnoCSS
utilities shared as one adopted sheet. Each card counts its renders. Change
--brand in src/tokens.css and every card recolours with no badge moving;
edit a card’s own .css file and only that card re-renders. See the
example’s README.
Playground
Section titled “Playground”The repo’s playground, with the Vite DevTools dock. Click the counter, edit
src/hmr-counter.ts, and the count stays. The rest of the page has one
component per case the plugin handles, from shared stylesheets to signals and
context, to edit the same way.
Standalone mode
Section titled “Standalone mode”The same playground built to static files and served without Vite, next to
the DevTools panel on its own port.
lit-devtools dev is how
the panel inspects a page that Vite does not serve.