Browser examples
Open these examples directly from the documentation. Each is built from the F# source in this repository and published with the docs on GitHub Pages.
| Example | Try it | What it demonstrates |
|---|---|---|
| Playground | Open playground | Reactive views, collections, boundaries, events and component lifetimes. |
| Motion | Open motion examples | Kanban, dashboard, story, physics and route transitions using anime.js. |
| Server hydration | Open hydration snapshot | F#-rendered HTML and transferred state becoming interactive in the browser. |
Server hydration preview
The preview starts with HTML and state rendered by .NET during the documentation build. The browser hydrates that output and handles counter interactions. GitHub Pages serves the saved snapshot; it does not run the F# backend or produce new request-specific data.
Open the snapshot in its own tab for more room.
To run the real backend locally, follow the hydration example README. It renders request-specific initial values on the server, transfers them to the browser and hydrates the shared Ranvier component. The README includes the build and start commands and URLs for changing those initial values.
The F# HTTP backends guide shows equivalent Giraffe, Oxpecker and Suave handlers using the same shared component and browser bundle.
The page declarations guide explains the shared page definition and generated browser entry. State transfer covers the codec and embedded data; hydration describes how the browser reuses server nodes.
Explore the source
- Playground: ordinary panels are rendered on .NET and hydrated; the scheduling panel demonstrates explicit mounting.
- Motion: shared page declarations generate the documents and browser entries. Read the motion walkthrough for each animation technique.
- Server hydration: a shared component and page used by both the local HTTP server and the static exporter.
For console and Avalonia applications, see application examples.