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.
Runs on StackBlitz: starting it connects to stackblitz.com, which installs and runs this project in your browser (StackBlitz's privacy policy).
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.
Runs on StackBlitz: starting it connects to stackblitz.com, which installs and runs this project in your browser (StackBlitz's privacy policy).
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.
Runs on StackBlitz: starting it connects to stackblitz.com, which installs and runs this project in your browser (StackBlitz's privacy policy).
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.
Runs on StackBlitz: starting it connects to stackblitz.com, which installs and runs this project in your browser (StackBlitz's privacy policy).
Tailwind
Section titled “Tailwind”Tailwind v4 utilities shared as one adopted sheet across three components,
each counting its renders. Change --color-brand in src/tailwind.css and
everything recolours with no badge moving; add a class to a component and
the sheet gains it in place. See the
example’s README.
Runs on StackBlitz: starting it connects to stackblitz.com, which installs and runs this project in your browser (StackBlitz's privacy policy).
A text field, a switch, a star rating and a tag list built on one
FormControl base class, in a plain <form>. They go into FormData, block
submit while invalid, reset with the form and follow a disabled
<fieldset>, and show what they are doing as :state() custom states.
Every rule of the form, including those that span fields, is one valibot
schema over the controls’ typed values. Submit the form empty, then edit a
control while it is filled in, and the values stay. See the
example’s README.
Runs on StackBlitz: starting it connects to stackblitz.com, which installs and runs this project in your browser (StackBlitz's privacy policy).
Lit SSR
Section titled “Lit SSR”Components rendered on the server with
@lit-labs/ssr and hydrated in the
page. The counter arrives as server HTML and says Hydrated once it wakes;
click it, then edit src/ssr-counter.ts and the count stays. The next page
load renders your edit on the server too. See the
example’s README
and the SSR guide.
Runs on StackBlitz: starting it connects to stackblitz.com, which installs and runs this project in your browser (StackBlitz's privacy policy).
Lit in Astro
Section titled “Lit in Astro”A demo site for the Astro integration, a
page for each thing it does: hydration in place, every client: directive,
props Astro can’t write as attributes, slots, view transitions and Preact
islands. Press Hydrate 💦 on the server rendering page and the deferred
plant gets its water. Open the Lit panel from the Lit logo in Astro’s dev
toolbar; it asks once for the code the terminal prints. See the
example’s README.
Runs on StackBlitz: starting it connects to stackblitz.com, which installs and runs this project in your browser (StackBlitz's privacy policy).
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.
Runs on StackBlitz: starting it connects to stackblitz.com, which installs and runs this project in your browser (StackBlitz's privacy policy).
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.
Runs on StackBlitz: starting it connects to stackblitz.com, which installs and runs this project in your browser (StackBlitz's privacy policy).