fsharp-routing

Implement client-side routing for F# Elmish SPAs with Feliz.Router.

1|Updated Nov 26, 2025

Search Tags:#frontend #routing #navigation #SPA #Feliz.Router #URL #routing-patterns

Ready to run

npx skills add https://github.com/heimeshoff/Cinemarco --skill fsharp-routing

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: fsharp-routing
Source: https://github.com/heimeshoff/Cinemarco/tree/main/.claude/skills/fsharp-routing
Command: npx skills add https://github.com/heimeshoff/Cinemarco --skill fsharp-routing

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill equips you to implement routing in F# FP frontend apps using Feliz.Router, enabling clean URLs and page navigation.

Core Features & Use Cases

Route Definition: Distinguish Home, Items, ItemDetail, etc, using discriminated unions.
URL Parsing & Generation: Parse segments and create paths with Route.toPath.
Programmatic Navigation: Dispatch NavigateTo commands; Link-based navigation with Router.format.
Use Case: Add a new page and a detail view with shared route types.

Quick Start

Set up Feliz.Router patterns in your client project to enable route management.

Frequently Asked Questions about fsharp-routing

High-intent search queries and answers about installing and using this skill.

FAQPage Schema

How do I set up client-side routing in an F# Elmish SPA?▼

Client-side routing in F# Elmish SPAs uses Feliz.Router to define routes as discriminated unions, parse URL segments, and integrate navigation with your Elmish init/update flows. Define your route types, use Route.toPath to generate URLs, and dispatch NavigateTo commands to navigate programmatically.

Can I use Feliz.Router for URL parsing and path generation?▼

Yes. Feliz.Router provides bidirectional URL parsing and path generation through discriminated union route definitions and Route.toPath functions, enabling you to construct URLs from route values and parse incoming URLs into typed routes for deep linking.

How do I implement deep linking in an F# frontend app?▼

Deep linking integrates with your Elmish update flow by parsing incoming URLs into typed routes via Feliz.Router, then initializing your app state from those parsed routes. Handle URL changes with Cmd.navigatePath to restore state and enable users to share and bookmark specific pages.

What's the difference between Link-based and programmatic navigation?▼

Link-based navigation uses Router.format to generate href attributes for standard links; programmatic navigation dispatches NavigateTo commands from Elmish to change routes dynamically. Both use the same underlying route types and Feliz.Router parsing.

Do I need to manually handle URL changes in Elmish?▼

Feliz.Router handles URL parsing and change detection; you integrate the parsed routes into your Elmish init and update functions to respond to navigation events and manage state transitions for each page or view.