Cookbook
Short recipes for common tasks, each with a live demo and its code. A recipe solves one problem and links to the guides for the ideas behind it.
Forms and input
- Form validation: check fields in F# on submit and show each error beside its field.
- A custom form control: a switch component that a page's
<form>submits like a checkbox. - Search as you type: search after a pause in typing, and drop requests for old text.
Data
- Fetch JSON: load JSON with
fetch, with loading, error and retry states. - Infinite scroll: load the next page when the end of a list scrolls into view.
- Remember state across visits: save F# values to
localStorageand restore them on the next visit.
Layout and components
- Dark and light themes: system, light and dark themes from custom properties, remembered across visits.
- A card with slots: a card that takes its heading, body and footer from the page.
- A modal dialog: ask a question with
<dialog>, and read the answer when it closes. - Tabs: tabs with the ARIA roles, arrow keys, and panels that keep their state.
Behaviour
- Toast notifications: short messages that any code can raise, shown in one place.
- Keyboard shortcuts: page-wide keys that skip fields, in a controller any component can use.
- Drag to reorder: reorder a list by dragging, or with buttons from the keyboard.
- Animating list changes: fade new items in, and slide the rest into place.
Testing
- Testing components: test the logic in plain F#, and the component in a browser with Playwright.