F#

F# is a cross-platform, open-source functional programming language that runs on the .NET platform. It features strong type inference, pattern matching, and a concise syntax that also supports object-oriented and imperative programming styles.

In LiveCodes, F# code is compiled to JavaScript using Fable, an F# to JavaScript compiler. The compiled code runs in the result page, giving it access to the page DOM and browser APIs.

Note

LiveCodes also supports running F# on the real .NET runtime using a WebAssembly-based F# compiler. Read documentation here.

Usage

Demo

show code

JS

import { createPlayground } from 'livecodes';

const options = {
  "config": {
    "activeEditor": "script",
    "markup": {
      "language": "html",
      "content": "<h1>Hello, <span id=\"name\">World</span>!</h1>\n<button id=\"counter-button\">Click me</button>\n<p>You clicked <span id=\"counter\">0</span> times.</p>"
    },
    "script": {
      "language": "fsharp",
      "content": "module Hello\n\nopen Browser.Dom\n\nlet counter () =\n  let count = ref 0\n  let button = document.querySelector(\"#counter-button\")\n  let display = document.querySelector(\"#counter\")\n  button.addEventListener(\"click\", fun _ ->\n    count.Value <- count.Value + 1\n    display.textContent <- string count.Value\n  )\n\nlet main () =\n  let name = document.querySelector(\"#name\")\n  name.textContent <- \"F#\"\n  printfn \"Hello from F#!\"\n  counter ()\n"
    },
    "tools": {
      "status": "open"
    }
  }
};
createPlayground('#container', options);

TS

import { createPlayground, type EmbedOptions } from 'livecodes';

const options: EmbedOptions = {
  "config": {
    "activeEditor": "script",
    "markup": {
      "language": "html",
      "content": "<h1>Hello, <span id=\"name\">World</span>!</h1>\n<button id=\"counter-button\">Click me</button>\n<p>You clicked <span id=\"counter\">0</span> times.</p>"
    },
    "script": {
      "language": "fsharp",
      "content": "module Hello\n\nopen Browser.Dom\n\nlet counter () =\n  let count = ref 0\n  let button = document.querySelector(\"#counter-button\")\n  let display = document.querySelector(\"#counter\")\n  button.addEventListener(\"click\", fun _ ->\n    count.Value <- count.Value + 1\n    display.textContent <- string count.Value\n  )\n\nlet main () =\n  let name = document.querySelector(\"#name\")\n  name.textContent <- \"F#\"\n  printfn \"Hello from F#!\"\n  counter ()\n"
    },
    "tools": {
      "status": "open"
    }
  }
};
createPlayground('#container', options);

React

import LiveCodes from 'livecodes/react';

export default function App() {
  const options = {
  "config": {
    "activeEditor": "script",
    "markup": {
      "language": "html",
      "content": "<h1>Hello, <span id=\"name\">World</span>!</h1>\n<button id=\"counter-button\">Click me</button>\n<p>You clicked <span id=\"counter\">0</span> times.</p>"
    },
    "script": {
      "language": "fsharp",
      "content": "module Hello\n\nopen Browser.Dom\n\nlet counter () =\n  let count = ref 0\n  let button = document.querySelector(\"#counter-button\")\n  let display = document.querySelector(\"#counter\")\n  button.addEventListener(\"click\", fun _ ->\n    count.Value <- count.Value + 1\n    display.textContent <- string count.Value\n  )\n\nlet main () =\n  let name = document.querySelector(\"#name\")\n  name.textContent <- \"F#\"\n  printfn \"Hello from F#!\"\n  counter ()\n"
    },
    "tools": {
      "status": "open"
    }
  }
};
  return (<LiveCodes {...options} />);
}

Vue

<script setup>
import LiveCodes from "livecodes/vue";

const options = {
  "config": {
    "activeEditor": "script",
    "markup": {
      "language": "html",
      "content": "<h1>Hello, <span id=\"name\">World</span>!</h1>\n<button id=\"counter-button\">Click me</button>\n<p>You clicked <span id=\"counter\">0</span> times.</p>"
    },
    "script": {
      "language": "fsharp",
      "content": "module Hello\n\nopen Browser.Dom\n\nlet counter () =\n  let count = ref 0\n  let button = document.querySelector(\"#counter-button\")\n  let display = document.querySelector(\"#counter\")\n  button.addEventListener(\"click\", fun _ ->\n    count.Value <- count.Value + 1\n    display.textContent <- string count.Value\n  )\n\nlet main () =\n  let name = document.querySelector(\"#name\")\n  name.textContent <- \"F#\"\n  printfn \"Hello from F#!\"\n  counter ()\n"
    },
    "tools": {
      "status": "open"
    }
  }
};
</script>
<template>
  <LiveCodes v-bind="options" />
</template>

Svelte

<script>
import LiveCodes from 'livecodes/svelte';

const options = {
  "config": {
    "activeEditor": "script",
    "markup": {
      "language": "html",
      "content": "<h1>Hello, <span id=\"name\">World</span>!</h1>\n<button id=\"counter-button\">Click me</button>\n<p>You clicked <span id=\"counter\">0</span> times.</p>"
    },
    "script": {
      "language": "fsharp",
      "content": "module Hello\n\nopen Browser.Dom\n\nlet counter () =\n  let count = ref 0\n  let button = document.querySelector(\"#counter-button\")\n  let display = document.querySelector(\"#counter\")\n  button.addEventListener(\"click\", fun _ ->\n    count.Value <- count.Value + 1\n    display.textContent <- string count.Value\n  )\n\nlet main () =\n  let name = document.querySelector(\"#name\")\n  name.textContent <- \"F#\"\n  printfn \"Hello from F#!\"\n  counter ()\n"
    },
    "tools": {
      "status": "open"
    }
  }
};
</script>

<LiveCodes {...options} />

Solid

import LiveCodes from 'livecodes/solid';

export default function App() {
  const options = {
  "config": {
    "activeEditor": "script",
    "markup": {
      "language": "html",
      "content": "<h1>Hello, <span id=\"name\">World</span>!</h1>\n<button id=\"counter-button\">Click me</button>\n<p>You clicked <span id=\"counter\">0</span> times.</p>"
    },
    "script": {
      "language": "fsharp",
      "content": "module Hello\n\nopen Browser.Dom\n\nlet counter () =\n  let count = ref 0\n  let button = document.querySelector(\"#counter-button\")\n  let display = document.querySelector(\"#counter\")\n  button.addEventListener(\"click\", fun _ ->\n    count.Value <- count.Value + 1\n    display.textContent <- string count.Value\n  )\n\nlet main () =\n  let name = document.querySelector(\"#name\")\n  name.textContent <- \"F#\"\n  printfn \"Hello from F#!\"\n  counter ()\n"
    },
    "tools": {
      "status": "open"
    }
  }
};
  return (<LiveCodes {...options} />);
}

Preact

import LiveCodes from 'livecodes/preact';

export default function App() {
  const options = {
  "config": {
    "activeEditor": "script",
    "markup": {
      "language": "html",
      "content": "<h1>Hello, <span id=\"name\">World</span>!</h1>\n<button id=\"counter-button\">Click me</button>\n<p>You clicked <span id=\"counter\">0</span> times.</p>"
    },
    "script": {
      "language": "fsharp",
      "content": "module Hello\n\nopen Browser.Dom\n\nlet counter () =\n  let count = ref 0\n  let button = document.querySelector(\"#counter-button\")\n  let display = document.querySelector(\"#counter\")\n  button.addEventListener(\"click\", fun _ ->\n    count.Value <- count.Value + 1\n    display.textContent <- string count.Value\n  )\n\nlet main () =\n  let name = document.querySelector(\"#name\")\n  name.textContent <- \"F#\"\n  printfn \"Hello from F#!\"\n  counter ()\n"
    },
    "tools": {
      "status": "open"
    }
  }
};
  return (<LiveCodes {...options} />);
}

Web Components

<live-codes></live-codes>

<script type="module">
  import "livecodes/web-components";

  const playground = document.querySelector("live-codes");
  playground.config = {
    "activeEditor": "script",
    "markup": {
      "language": "html",
      "content": "<h1>Hello, <span id=\"name\">World</span>!</h1>\n<button id=\"counter-button\">Click me</button>\n<p>You clicked <span id=\"counter\">0</span> times.</p>"
    },
    "script": {
      "language": "fsharp",
      "content": "module Hello\n\nopen Browser.Dom\n\nlet counter () =\n  let count = ref 0\n  let button = document.querySelector(\"#counter-button\")\n  let display = document.querySelector(\"#counter\")\n  button.addEventListener(\"click\", fun _ ->\n    count.Value <- count.Value + 1\n    display.textContent <- string count.Value\n  )\n\nlet main () =\n  let name = document.querySelector(\"#name\")\n  name.textContent <- \"F#\"\n  printfn \"Hello from F#!\"\n  counter ()\n"
    },
    "tools": {
      "status": "open"
    }
  };
</script>

JavaScript Interoperability

Since F# code is compiled to JavaScript and runs in the context of the result page, it can interact with the page DOM and browser APIs using Fable's browser bindings (e.g. the Browser.Dom module).

Check the starter template for another example.

Language Info

Name

fsharp

Aliases / Extensions

fs, fsx, fsharp

Editor

script

Compiler

Fable, the F# to JavaScript compiler.

Version

Fable v3.8.0 (targeting F# 8)

Code Formatting

Not supported.

Example Usage

module Hello

open Browser.Dom

let main () =
  let name = document.querySelector("#name")
  name.textContent <- "F#"
  printfn "Hello from F#!"

The starter template shows a more complete example that demonstrates DOM access and event handling.

Starter Template

https://livecodes.io/?template=fsharp

Links

• F#
• F# documentation
• Fable
• F# (Wasm) in LiveCodes