---
title: "Guides"
description: "Guides to building Lit web components in F# with Firelight, one topic at a time."
---

# Guides

One topic at a time, with live examples. Each guide covers what Firelight adds to Lit and links to the Lit docs for the rest.

- [Templates](https://roboz0r.github.io/Firelight/guides/templates/): plain HTML in F# interpolated strings, with bindings,
  conditionals, lists, directives and static values.
- [Properties and attributes](https://roboz0r.github.io/Firelight/guides/properties/): reactive properties, attributes, change
  detection with F# values, reflection and internal state.
- [Events](https://roboz0r.github.io/Firelight/guides/events/): listen with typed handlers, raise custom events with typed details,
  and how far events travel through shadow DOM.
- [Styling](https://roboz0r.github.io/Firelight/guides/styling/): scoped styles, theming with custom properties, parts, shared
  styles and the safe way to pass values from F#.
- [Lifecycle](https://roboz0r.github.io/Firelight/guides/lifecycle/): connecting, updating and cleaning up, and which lifecycle
  method to override for what.
- [Controllers](https://roboz0r.github.io/Firelight/guides/controllers/): state and lifecycle that any component can reuse.
- [Prerendering components at build time](https://roboz0r.github.io/Firelight/guides/prerendering/): Lit SSR at build time,
  declarative shadow DOM, hydration and prerender-safe components.
- [Component communication](https://roboz0r.github.io/Firelight/guides/communication/): properties down, events up, and context,
  signals or Elmish across.
- [Using web component libraries](https://roboz0r.github.io/Firelight/guides/component-libraries/): Web Awesome, Shoelace, Fluent UI
  or Carbon tags in F# templates.
- [Using JavaScript libraries](https://roboz0r.github.io/Firelight/guides/js-libraries/): npm libraries in components, with imports,
  bindings, loading on demand and lifecycle.
- [App architecture and loading](https://roboz0r.github.io/Firelight/guides/architecture/): structure a larger app, place its state,
  and load it fast without SSR.