Introduction​

If you're a fan of F#, you probably want to write both your backend and frontend in your favorite language. In this guide, I'll walk through how to build a fullstack web application using:

• ASP.NET Web API in F# for the backend. I will use raw ASP.NET in this tutorial but other frameworks are also supported eg. Giraffe or Saturn.
• Elmish Land for the frontend
• A shared F# library for types used across the stack

Elmish Land is a delightful way to write frontends in F# using Elmish. It's perfect for those who want to keep the type safety and functional programming style consistent across the stack.

Let’s dive in!

With the rise of AI chat applications, developers often rely on cloud-based APIs for natural language processing. However, running an AI model locally offers several advantages, including privacy, low latency, and cost savings. In this tutorial, we’ll build a local AI chat application using F#, Elmish Land and Ollama with the DeepSeek-R1 model. The UI will be styled with TailwindCSS to ensure a clean and modern look.

By the end of this guide, you’ll have a fully functional chat interface where you can interact with a locally hosted AI model.

In today’s fast-paced development landscape, creating modern, responsive user interfaces can be difficult. With the release of Feliz.Shadcn, developers can now leverage the powerful capabilities of F# and Fable while tapping into the rich ecosystem of the shadcn/ui component library. This new dotnet package provides type-safe bindings for Shadcn’s pre-styled components, enabling F# developers to craft elegant UIs without the steep learning curve often associated with CSS and traditional frontend design.

Flexbox is one of the most powerful tools in modern CSS, enabling developers to create flexible and responsive layouts with ease. One of its greatest strengths lies in its alignment capabilities, allowing precise control over how elements are positioned within a container.

In this guide, I’ll break down Flexbox alignment properties with Tailwind CSS, ensuring you understand not just how they work, but when to use them effectively. If you're using Elmish Land and need help setting it up for Tailwind, you can read this blog post first before continuing.

A great place to try and explore the tailwind utility classes is the Tailwind Play site.

Introduction​

Building modern web applications with F# and Elmish Land offers a powerful functional programming approach to frontend development. However, styling applications efficiently is equally important. Tailwind CSS is a popular utility-first CSS framework that enables rapid UI development with minimal custom styles. By integrating Tailwind CSS with Elmish Land, F# developers can create sleek, maintainable, and highly customizable web applications.

This guide walks you through setting up Tailwind CSS in an Elmish Land project, using it within pages and components, and applying best practices to keep your styles organized.

Creating web applications can be a daunting task, especially when managing state and ensuring a seamless user experience. Elmish Land offers a declarative and functional approach to building modern web apps. In this post, we’ll walk through building a simple to-do app using Elmish Land, step-by-step.

Elmish Land is a modern framework designed for F# developers who want to build scalable, maintainable, and type-safe frontend web applications with ease. Inspired by Elm Land, it abstracts away many of the complexities often associated with using F#, Fable, and Elmish, allowing developers to focus on building great user experiences with minimal boilerplate.