Build full-stack web apps. Stay in F#.

Build reactive UIs, call server functions directly, and share types across your application - all with the power of F# and .NET.

Get started

$ dotnet new install WebSharper.Templates

[<JavaScript>]
module Client =
    type IndexTemplate = Template<"wwwroot/index", ClientLoad.FromDocument>

    let People =
        ListModel.FromSeq [
            "John"
            "Paul"
        ]

    [<SPAEntryPoint>]
    let Main () =
        let newName = Var.Create ""
        IndexTemplate.Main()
            .ListContainer(
                People.View.DocSeqCached(fun (name: string) -> 
                    IndexTemplate.ListItem().Name(name).Doc()
                )
            )
            .Name(newName)
            .Add(fun _ ->
                People.Add(newName.Value)
                newName.Value <- ""
            )
            .Doc()
        |> Doc.RunById "main"

<!DOCTYPE html>
<html lang="en">
<head>
    <title>spa_websharper</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" type="text/css" href="Scripts/spa-websharper.css" />
    <style>   
        /* Don't show the not-yet-loaded templates */
        [ws-template], [ws-children-template] { display: none; }
    </style>
    <script type="text/javascript" src="Scripts/spa-websharper.head.js"></script>
</head>
<body>
    <h1>My list of unique people</h1>
    <div id="main" ws-children-template="Main">
        <ul ws-hole="ListContainer">
            <li ws-template="ListItem">${Name}</li>
        </ul>
        <div>
            <input ws-var="Name" placeholder="Name" />
            <button ws-onclick="Add">Add</button>
            <div>You are about to add: ${Name}</div>
        </div>
    </div>
    <script type="module" src="Scripts/spa-websharper.min.js"></script>
</body>
</html>

Terminal

VITE v6.3.5 ready in 663 ms

➜ Local: http://localhost:24347/

➜ Network: use --host to expose

➜ press h + enter to show help

█

Trusted by fast-growing companies around the world

How it works

Write your app once in C# or F#, or in OCaml. The compiler emits a native .NET or OCaml server and a JavaScript client that share both their data types and the metadata that connects them.

Shared types and typed calls across the boundary — no hand-written serialization or fetch glue.

Functional, reactive applications with WebSharper.UI

Bind composite data models to your reactive user interfaces. The flow of reactive values through the code yet concise, readability.

Learn more

let x = Var.Create 1
let y = Var.Create 1

let addNumbers =
    div [] [
        p [] [text "x "; Doc.InputType.IntUnchecked [] x]
        p [] [text "y "; Doc.InputType.IntUnchecked [] y]
        p [] [
            textView (View.Map2 (fun x y -> $"x + y = {x + y}") x.View y.View)
        ]
    ]

addNumbers |> Doc.RunById "main"

import Doc from "./WebSharper.UI/WebSharper.UI.Doc.js";
import Var from "./WebSharper.UI/WebSharper.UI.Var.js";
import { Map2 } from "./WebSharper.UI/WebSharper.UI.View.js";

const x = Var.Create(1);
const y = Var.Create(1);

const addNumbers = Doc.Element("div", [], [
  Doc.Element("p", [], [Doc.TextNode("x "), Doc.IntInputUnchecked([], x)]),
  Doc.Element("p", [], [Doc.TextNode("y "), Doc.IntInputUnchecked([], y)]),
  Doc.Element("p", [], [
    Doc.TextView(Map2((a, b) => "x + y = " + String(a + b), x.View, y.View))
  ])
]);

Doc.RunById("main", addNumbers);

Powerful UI abstractions

Declare full interactive forms in just a few lines of code with WebSharper Forms.

Learn more

let LoginForm () =
    Form.Return (fun user pass -> user, pass)
    <*> (Form.Yield ""
        |> Validation.IsNotEmpty "Must enter a username")
    <*> (Form.Yield ""
        |> Validation.IsNotEmpty "Must enter a password")
    |> Form.WithSubmit
    |> Form.Run (fun (u, p) ->
        JS.Alert("Welcome, " + u + "!")
    )
    |> Form.Render (fun user pass submit ->
        form [] [
            div [] [label [] [text "Username: "]; Doc.InputType.Text [] user]
            div [] [label [] [text "Password: "]; Doc.InputType.Password [] pass]
            Doc.Button "Log in" [] submit.Trigger
            div [] [
                Doc.ShowErrors submit.View (fun errors ->
                    errors
                    |> Seq.map (fun m -> p [] [text m.Text])
                    |> Doc.Concat)
            ]
        ]
    )
    
LoginForm() |> Doc.RunById "main"

import Doc from "./WebSharper.UI/WebSharper.UI.Doc.js";
import {
  Return, Yield, WithSubmit, Run, Render, op_LessMultiplyGreater
} from "./WebSharper.Forms/WebSharper.Forms.Form.js";
import { IsNotEmpty } from "./WebSharper.Forms/WebSharper.Forms.Validation.js";
import { ShowErrors } from "./WebSharper.Forms/WebSharper.Forms.DocExtensions.js";
import { map } from "./WebSharper.StdLib/Microsoft.FSharp.Collections.ListModule.js";

function LoginForm() {
  return Render(
    (user) => (pass) => (submit) =>
      Doc.Element("form", [], [
        Doc.Element("div", [], [
          Doc.Element("label", [], [Doc.TextNode("Username: ")]),
          Doc.Input([], user)
        ]),
        Doc.Element("div", [], [
          Doc.Element("label", [], [Doc.TextNode("Password: ")]),
          Doc.PasswordBox([], pass)
        ]),
        Doc.Button("Log in", [], () => { submit.Trigger(); }),
        Doc.Element("div", [], [
          ShowErrors(submit.view, (errors) =>
            Doc.Concat(map((m) => Doc.Element("p", [], [Doc.TextNode(m.message)]), errors)))
        ])
      ]),
    Run(
      (values) => alert("Welcome, " + values[0] + "!"),
      WithSubmit(
        op_LessMultiplyGreater(
          op_LessMultiplyGreater(
            Return((user) => (pass) => [user, pass]),
            IsNotEmpty("Must enter a username", Yield(""))),
          IsNotEmpty("Must enter a password", Yield(""))))));
}

Doc.RunById("main", LoginForm());

Web Workers without hassle

Write client-side parallel code directly in your code.

The compiler automatically creates the separate trimmed JavaScript file for the web worker.

Learn more

Worker.fs

let worker = new Worker(fun self ->
  // This code runs in the worker:
  self.OnMessage <- fun e ->
      Console.Log(
        "Received message from main thread: " 
        + string e.Data
      )
)

// This code runs in the main thread:
worker.PostMessage("Hello, worker!")

index.js

var worker = new Worker("worker.js");
worker.postMessage("Hello, worker!");

worker.js

self.onmessage = function (e) {
    console.log(
       "Received message from main thread: "
           + e.data.toString());
}

Terminal

> Received message from main thread: Hello, worker! █

Get Started

Instant access to the power of WebSharper

Get started

$ dotnet new install WebSharper.Templates

Build full-stack web apps. Stay in F#.

How it works

Functional, reactive applications with WebSharper.UI

Powerful UI abstractions

Web Workers without hassle

More in the box

Sitelets

Forms

Typed WebSockets

Metaprogramming

Client-side testing

Bindings & npm

Get Started