fable-compiler/fable3-samples

This repository is a collection of sample applications and code snippets demonstrating how to use Fable to compile F\# into JavaScript. It covers various runtime environments, including browser-based rendering with HTML5 Canvas and React, server-side execution with Node.js, and client-side database operations using SQL.js. The samples also illustrate key interoperability patterns, such as calling JavaScript from F\# and vice versa, as well as different build and dependency management workflows using tools like Webpack, Paket, and npm.

A new sample application has been added to the browser source directory. This F\# module initializes an HTML5 canvas, draws a 20x20 grid with light gray lines, and displays the text 'Fable on Canvas' in the center, providing a basic demonstration of browser-side rendering.

browser/src · high confidence

A new sample application has been added to the minimal/src directory, demonstrating an Increment/Decrement counter built with Elmish and Fable.React. This entry point initializes a simple state machine with increment and decrement messages, renders the current count with plus and minus buttons, and mounts the React application to the 'elmish-app' DOM element.

minimal/src · high confidence

Introduced a new sample project demonstrating an Fable-based Node.js application integrated with the Mocha testing framework. The addition includes the necessary project structure with F\# source and test files, configuration for the Fable 3.0.2 .NET tool, and documentation outlining how to build and run the application and its tests using npm.

mocha · high confidence

A new sample application demonstrating Fable, Fetch API, Promises, and JSON parsing has been added to the \promises\ directory. This Node.js-based project allows users to fetch and display a dog image from a remote server, featuring a Webpack development server on port 8080, F\# source files in the \src\ folder, and standard build tooling including \package.json\ and \.gitignore\.

promises · high confidence

Introduced a new sample project demonstrating how to build and publish an F\# component for React using Fable. The addition includes the necessary build configuration (webpack.config.js) to bundle the F\# source into an AMD library, along with documentation (README.md) explaining how to link and consume the component in a standard React application, and standard ignore files (.gitignore, .npmignore) to manage build artifacts and dependencies.

reactComponent · high confidence

A new browser-based sample application has been added to demonstrate an Fable app that draws a grid on a canvas element. The entry includes the necessary project scaffolding: a Webpack configuration for bundling and a development server on port 8080, an HTML entry point, and a .gitignore file tailored for F\# and Node.js development environments.

browser · high confidence

A new sample application demonstrating how to build a Node.js app using Fable has been added to the repository. This includes the necessary project configuration (dotnet-tools.json), a .gitignore file, documentation (README.md), and source code (src/App.fs) that fetches a random dog image URL using the isomorphic-fetch library.

nodejs · high confidence

A new sample project has been added to the interop directory that demonstrates how to call JavaScript code from F\# using Fable. The sample includes F\# source files that import and invoke JavaScript functions, classes, and members defined in separate JS modules (alert, canvas, and MyClass). It is configured with a .NET tool manifest for Fable 3.0.2, a Webpack development server on port 8080, and an HTML page that renders the results of the interop calls.

interop · high confidence

A new sample application has been added to the promises/src location, demonstrating how to use Fable with the Fetch API and Thoth.Json to retrieve and display a random dog image from an external URL. The app defines a PictureInfo type for JSON decoding, uses Promise.bind and Promise.map to handle the asynchronous fetch and text parsing, and dynamically creates an img element to append to the page container.

promises/src · high confidence

This change introduces the initial codebase for a web-based SQL.js demo application. It establishes the project structure using F\# (compiled via Fable) and JavaScript tooling (Webpack, pnpm). The application implements a client-side SQLite database backed by IndexedDB using the absurd-sql library, with communication between the main thread and a Web Worker handled via Comlink. Key features include the configuration of Cross-Origin-Opener-Policy and Cross-Origin-Embedder-Policy headers required for SharedArrayBuffer support, the definition of sample database schemas (kv and users tables), and a demo workflow that initializes the database, executes SQL queries, and logs results to the console.

sqljs · high confidence

A new minimal sample application has been added to demonstrate a simple Fable and Elmish counter app with minimal configuration. The sample includes a Webpack development server (port 8080) for hot reloading, a basic HTML entry point, and a .gitignore tailored for F\# and Node.js projects. Users can build and run the app using npm or dotnet CLI commands, providing a starting point for Fable projects without complex tooling like Paket or Fake.

minimal · high confidence

Added a new sample application demonstrating an F\# Fable web app that uses Paket to manage .NET dependencies (specifically Fable.Core, Fable.Promise, Fable.Fetch, Fable.Browser.Dom, and Thoth.Json) alongside npm for JavaScript dependencies. The sample includes the necessary build infrastructure, such as the Paket restore MSBuild targets and a dotnet CLI tool configuration for Paket and Fable, allowing users to build and run the app via standard npm and dotnet commands.

withpaket · high confidence

A new sample project has been added to the nodejsbundle location, demonstrating how to bundle a Fable-compiled Node.js application using Webpack. The setup includes a webpack configuration that compiles F\# source files via fable-loader and handles JavaScript dependencies, producing a bundled output in the build directory. The sample application fetches a random dog image URL from an external API, illustrating serverless function patterns and the integration of F\# with Node.js runtime.

nodejsbundle · high confidence

The reactComponent/src module introduces a new F\# React component library that demonstrates how to define and expose React components to JavaScript. It includes a standard class-based component (StandardComponent) and a functional component (FunComponent), along with a specialized FunctionComponent.ForJS helper to expose functional components with memoization and display names, specifically tailored for Fable 5 compatibility.

reactComponent/src · high confidence

Added a new sample project, \interopFableFromJS\, that demonstrates how to call F\# code compiled by Fable from JavaScript. The sample includes a basic Webpack configuration to bundle the F\# output, a simple F\# module exposing a function, and a JavaScript entry point that invokes this function to update the DOM. It also provides a README with instructions for building and running the app using the .NET SDK and Node.js.

interopFableFromJS · high confidence

The fsx-script sample now uses Paket (version 5.242.2) for .NET dependency resolution and Fable 3.1.5 for F\# to JavaScript compilation, replacing previous setup methods. This change introduces a new build workflow where \npm i\ triggers Paket restore to generate load scripts for Fable packages (including Elmish 3.0.6, React 5.3.6, and browser APIs), allowing the application to be built and run via npm scripts while maintaining a script-centric development experience.

fsx-script · high confidence

This change introduces the initial npm and .NET dependency configurations for several Fable sample projects, including browser, fsx-script, interop, interopFableFromJS, minimal, and mocha. The diffs show the addition of package.json and package-lock.json files for Node.js dependencies (such as webpack, webpack-cli, webpack-dev-server, and react) alongside .fsproj files defining .NET package references (primarily Fable.Core, Fable.Browser.Dom, and Fable.Elmish.React). This establishes the build environment for these specific sample locations.

(dependencies) · high confidence

Written by watchdog.canine.dev from the codebase's own history, inside the signed delivery this page is composed from.

• CAI 37 → 39 (+1.4)
• Rubric changed (rubric-2026.09.15 → rubric-2026.10.1) — scores are not directly comparable.

• Code Health 97 (new)
• Architecture 69 → 100 (+31.0)
• Maturity 44 → 44 (+0.0)
• Readiness 32 → 22 (-9.7)
• Security 78 → 78 (+0.0)
• Accessibility 29 → 38 (+9.0)

• Documentation: no architecture or design documentation (README.md)
• Documentation: no usage examples (README.md)
• High CVE: [GHSA redacted] (fsx-script/package-lock.json)
• High CVE: [GHSA redacted] (interop/package-lock.json)
• High CVE: [GHSA redacted] (browser/package-lock.json)
• High CVE: [GHSA redacted] (fsx-script/package-lock.json)
• High CVE: [GHSA redacted] (interop/package-lock.json)

• Duplicated block (17 lines × 2) (browser/src/App.fs)
• Duplicated block (22 lines × 2) (browser/src/App.fs)
• Duplicated block (22 lines × 2) (nodejs/src/App.fs)
• High CVE: [CVE redacted] (fsx-script/package-lock.json)
• High CVE: [CVE redacted] (interop/package-lock.json)
• High CVE: [GHSA redacted] (browser/package-lock.json)
• High CVE: [GHSA redacted] (fsx-script/package-lock.json)
• High CVE: [GHSA redacted] (interop/package-lock.json)

Written by watchdog.canine.dev from the codebase's own history, inside the signed delivery this page is composed from.

fable-compiler/fable3-samples was measured the same way every project in this corpus was: the same rubric, at a pinned commit, with the result published in full. Point a surveyor at a repository you know and see whether you agree with it.