# Demos > Try the plugin in the browser. StackBlitz embeds of the Lit flame, Web Awesome, Fernhouse, CSS, Tailwind, forms and SSR examples and the playground, each running the latest release. 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 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](https://github.com/oddcelot/vite-plugin-lit/tree/main/examples/flame) 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](https://stackblitz.com/privacy-policy)). [Open in StackBlitz](https://stackblitz.com/github/oddcelot/vite-plugin-lit/tree/main/examples/flame?file=src%2Flit-flame.ts) ## Web Awesome A component built from [Web Awesome](https://webawesome.com) 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](https://github.com/oddcelot/vite-plugin-lit/tree/main/examples/web-awesome). Runs on StackBlitz: starting it connects to stackblitz.com, which installs and runs this project in your browser ([StackBlitz's privacy policy](https://stackblitz.com/privacy-policy)). [Open in StackBlitz](https://stackblitz.com/github/oddcelot/vite-plugin-lit/tree/main/examples/web-awesome?file=src%2Fpacking-list.ts) ## 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](https://github.com/oddcelot/vite-plugin-lit/tree/main/examples/fernhouse). Runs on StackBlitz: starting it connects to stackblitz.com, which installs and runs this project in your browser ([StackBlitz's privacy policy](https://stackblitz.com/privacy-policy)). [Open in StackBlitz](https://stackblitz.com/github/oddcelot/vite-plugin-lit/tree/main/examples/fernhouse?file=src%2Ffh-product-card.ts) ## CSS 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](https://github.com/oddcelot/vite-plugin-lit/tree/main/examples/css). Runs on StackBlitz: starting it connects to stackblitz.com, which installs and runs this project in your browser ([StackBlitz's privacy policy](https://stackblitz.com/privacy-policy)). [Open in StackBlitz](https://stackblitz.com/github/oddcelot/vite-plugin-lit/tree/main/examples/css?file=src%2Ftokens.css) ## 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](https://github.com/oddcelot/vite-plugin-lit/tree/main/examples/tailwind). Runs on StackBlitz: starting it connects to stackblitz.com, which installs and runs this project in your browser ([StackBlitz's privacy policy](https://stackblitz.com/privacy-policy)). [Open in StackBlitz](https://stackblitz.com/github/oddcelot/vite-plugin-lit/tree/main/examples/tailwind?file=src%2Ftailwind.css) ## Forms A text field, a switch, a star rating and a tag list built on one `FormControl` base class, in a plain `
`. They go into `FormData`, block submit while invalid, reset with the form and follow a disabled `
`, 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](https://github.com/oddcelot/vite-plugin-lit/tree/main/examples/forms). Runs on StackBlitz: starting it connects to stackblitz.com, which installs and runs this project in your browser ([StackBlitz's privacy policy](https://stackblitz.com/privacy-policy)). [Open in StackBlitz](https://stackblitz.com/github/oddcelot/vite-plugin-lit/tree/main/examples/forms?file=src%2Ffeedback-schema.ts) ## Lit SSR Components rendered on the server with [`@lit-labs/ssr`](https://lit.dev/docs/ssr/overview/) 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](https://github.com/oddcelot/vite-plugin-lit/tree/main/examples/ssr) and the [SSR guide](/guides/ssr/). Runs on StackBlitz: starting it connects to stackblitz.com, which installs and runs this project in your browser ([StackBlitz's privacy policy](https://stackblitz.com/privacy-policy)). [Open in StackBlitz](https://stackblitz.com/github/oddcelot/vite-plugin-lit/tree/main/examples/ssr?file=src%2Fssr-counter.ts) ## Lit in Astro A demo site for the [Astro integration](/guides/astro/), 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](https://github.com/oddcelot/vite-plugin-lit/tree/main/examples/astro). Runs on StackBlitz: starting it connects to stackblitz.com, which installs and runs this project in your browser ([StackBlitz's privacy policy](https://stackblitz.com/privacy-policy)). [Open in StackBlitz](https://stackblitz.com/github/oddcelot/vite-plugin-lit/tree/main/examples/astro?file=src%2Fcomponents%2Fssr-counter.ts) ## 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](https://stackblitz.com/privacy-policy)). [Open in StackBlitz](https://stackblitz.com/github/oddcelot/vite-plugin-lit/tree/main/playground?file=src%2Fhmr-counter.ts) ## 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`](/reference/cli/#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](https://stackblitz.com/privacy-policy)). [Open in StackBlitz](https://stackblitz.com/github/oddcelot/vite-plugin-lit/tree/main/playground?file=package.json\&startScript=standalone)