# Firelight

> Build standards-based web components in F# with Lit and Fable. Type-safe templates, Elmish, context and routing, compiled to lean JavaScript.

Each page of the site is also Markdown: add `index.md` to its address. [llms-full.txt](https://roboz0r.github.io/Firelight/llms-full.txt) has every page in one file, in the order below.

## Home

- [Web Components for F#](https://roboz0r.github.io/Firelight/index.md): Build standards-based web components in F# with Lit and Fable. Type-safe templates, Elmish, context and routing, compiled to lean JavaScript.

## Get started

- [Your first component](https://roboz0r.github.io/Firelight/start/index.md): From an empty folder to a running Firelight component: create an app with dotnet new, then give its component a property, an event, styles and a list.
- [Firelight compared](https://roboz0r.github.io/Firelight/why/index.md): Firelight beside Fable.Lit, Feliz, Sutil and Lit in TypeScript
- [Using Firelight with coding agents](https://roboz0r.github.io/Firelight/agents/index.md): Markdown docs for agents, a Claude Code skill, and what helps

## Packages

- [Firelight](https://roboz0r.github.io/Firelight/packages/firelight/index.md): Core bindings: `LitElement`, `html`/`css` templates, directives, reactive properties
- [Firelight.Context](https://roboz0r.github.io/Firelight/packages/context/index.md): Share state across a component tree without passing it through every layer
- [Firelight.Elmish](https://roboz0r.github.io/Firelight/packages/elmish/index.md): Run an Elmish (Model-View-Update) loop inside a component
- [Firelight.Router](https://roboz0r.github.io/Firelight/packages/router/index.md): Client-side routing on the URL Pattern API, with routes as an F# union
- [Firelight.Signals](https://roboz0r.github.io/Firelight/packages/signals/index.md): Shared reactive state that any component can read
- [Firelight.Motion](https://roboz0r.github.io/Firelight/packages/motion/index.md): Animate elements as they move, appear and disappear
- [Firelight.Observers](https://roboz0r.github.io/Firelight/packages/observers/index.md): Reactive controllers for resize, intersection, mutation and performance observers
- [Firelight.Task](https://roboz0r.github.io/Firelight/packages/task/index.md): Async work with pending, complete and error states
- [Firelight.Virtualizer](https://roboz0r.github.io/Firelight/packages/virtualizer/index.md): Long lists that only render the visible items

## Guides

- [Guides](https://roboz0r.github.io/Firelight/guides/index.md): Guides to building Lit web components in F# with Firelight, one topic at a time.
- [Templates](https://roboz0r.github.io/Firelight/guides/templates/index.md): Plain HTML in F# interpolated strings: bindings, lists, directives
- [Properties and attributes](https://roboz0r.github.io/Firelight/guides/properties/index.md): Reactive properties: attributes, types, reflection, state and change detection
- [Events](https://roboz0r.github.io/Firelight/guides/events/index.md): Listen with @event, raise CustomEvents, and how they cross shadow DOM
- [Styling](https://roboz0r.github.io/Firelight/guides/styling/index.md): Scoped CSS with css, :host, custom properties, ::part and shared styles
- [Lifecycle](https://roboz0r.github.io/Firelight/guides/lifecycle/index.md): Connecting, updating and cleaning up: which lifecycle method to override for what
- [Controllers](https://roboz0r.github.io/Firelight/guides/controllers/index.md): Reactive controllers: state and lifecycle that any component can reuse
- [Prerendering components at build time](https://roboz0r.github.io/Firelight/guides/prerendering/index.md): Lit SSR at build time: declarative shadow DOM, hydration and prerender-safe components
- [Component communication](https://roboz0r.github.io/Firelight/guides/communication/index.md): Properties down, events up, and context, signals or Elmish across
- [Using web component libraries](https://roboz0r.github.io/Firelight/guides/component-libraries/index.md): Web Awesome, Shoelace, Fluent UI or Carbon tags in F# templates
- [Using JavaScript libraries](https://roboz0r.github.io/Firelight/guides/js-libraries/index.md): npm libraries in components: imports, bindings, loading on demand, lifecycle
- [App architecture and loading](https://roboz0r.github.io/Firelight/guides/architecture/index.md): Structure a larger app, place its state, and load it fast without SSR

## From Lit

- [From Lit](https://roboz0r.github.io/Firelight/from-lit/index.md): For developers who know Lit: each topic of Lit's documentation, with the TypeScript you know next to the Firelight F# that does the same.
- [Components](https://roboz0r.github.io/Firelight/from-lit/components/index.md): Defining, rendering and reactive properties
- [Styles](https://roboz0r.github.io/Firelight/from-lit/styles/index.md): Static styles, sharing them, and shadow DOM
- [Lifecycle](https://roboz0r.github.io/Firelight/from-lit/lifecycle/index.md): Connecting, the update cycle and changedProperties
- [Events](https://roboz0r.github.io/Firelight/from-lit/events/index.md): Listening, dispatching custom events and listening on the element
- [Decorators](https://roboz0r.github.io/Firelight/from-lit/decorators/index.md): What each Lit decorator becomes in F#
- [Templates](https://roboz0r.github.io/Firelight/from-lit/templates/index.md): Expressions, conditionals, lists, directives and static values
- [Composition](https://roboz0r.github.io/Firelight/from-lit/composition/index.md): Reactive controllers, and what replaces mixins
- [Context](https://roboz0r.github.io/Firelight/from-lit/context/index.md): Providing and consuming values with @lit/context
- [Tasks](https://roboz0r.github.io/Firelight/from-lit/tasks/index.md): Async work with @lit/task
- [Signals](https://roboz0r.github.io/Firelight/from-lit/signals/index.md): Shared reactive state with @lit-labs/signals

## Cookbook

- [Cookbook](https://roboz0r.github.io/Firelight/cookbook/index.md): Short Firelight recipes, each with a live demo and its code: forms, data loading, dialogs, tabs, theming, drag and drop, animation and testing.
- [Form validation](https://roboz0r.github.io/Firelight/cookbook/form-validation/index.md): Check fields in F# on submit and show each error beside its field
- [A custom form control](https://roboz0r.github.io/Firelight/cookbook/form-control/index.md): A switch component that a page's `<form>` submits like a checkbox
- [Search as you type](https://roboz0r.github.io/Firelight/cookbook/debounced-search/index.md): Search after a pause in typing, and drop requests for old text
- [Fetch JSON](https://roboz0r.github.io/Firelight/cookbook/fetch-json/index.md): Load JSON with `fetch`, with loading, error and retry states
- [Infinite scroll](https://roboz0r.github.io/Firelight/cookbook/load-more/index.md): Load the next page when the end of a list scrolls into view
- [Remember state across visits](https://roboz0r.github.io/Firelight/cookbook/persist-state/index.md): Save F# values to `localStorage` and restore them on the next visit
- [Dark and light themes](https://roboz0r.github.io/Firelight/cookbook/theme-toggle/index.md): System, light and dark themes from custom properties, remembered across visits
- [A card with slots](https://roboz0r.github.io/Firelight/cookbook/slots/index.md): A card that takes its heading, body and footer from the page
- [A modal dialog](https://roboz0r.github.io/Firelight/cookbook/dialog/index.md): Ask a question with `<dialog>`, and read the answer when it closes
- [Tabs](https://roboz0r.github.io/Firelight/cookbook/tabs/index.md): Tabs with the ARIA roles, arrow keys, and panels that keep their state
- [Toast notifications](https://roboz0r.github.io/Firelight/cookbook/toasts/index.md): Short messages that any code can raise, shown in one place
- [Keyboard shortcuts](https://roboz0r.github.io/Firelight/cookbook/keyboard-shortcuts/index.md): Page-wide keys that skip fields, in a controller any component can use
- [Drag to reorder](https://roboz0r.github.io/Firelight/cookbook/drag-reorder/index.md): Reorder a list by dragging, or with buttons from the keyboard
- [Animating list changes](https://roboz0r.github.io/Firelight/cookbook/animate-list/index.md): Fade new items in, and slide the rest into place
- [Testing components](https://roboz0r.github.io/Firelight/cookbook/testing/index.md): Test the logic in plain F#, and the component in a browser with Playwright

## Demos

- [Client-side routing](https://roboz0r.github.io/Firelight/client-side-routing/index.md): A live demo of Firelight.Router: URL patterns matched to an F# route type, without reloading the page.